HTML5技术

[Bootstrap]7天深入Bootstrap(4)CSS组件 - Never、C

字号+ 作者:H5之家 来源:博客园 2015-09-24 10:02 我要评论( )

Bootstrap框架的三大核心之二:组件。 组件也是最核心的地方,因为绝大部分的网页都必须利用组件才能构建出绚丽的页面。 组件包括:Icon图标(Glyphicon)、 下拉菜单(Dropdown)、按钮组(Button group)、按钮下拉菜单(Button dropdown)、输入框组(Inp

Bootstrap框架的三大核心之二:组件。 组件也是最核心的地方,因为绝大部分的网页都必须利用组件才能构建出绚丽的页面。

组件包括:Icon图标(Glyphicon)、 下拉菜单(Dropdown)、按钮组(Button group)、按钮下拉菜单(Button dropdown)、输入框组(Input group)、导航 (Nav)、导航条(Navbar)、面包屑导航(Breadcrumb)、分 页导航(Pagination)、标签(Label)、徽章(Badge)、大屏幕 展播(Jumbotron)、页面标题(Pageheader)、缩略图 (Thumbnail)、警告框(Alert)、进度条(Progress bar)、媒 体对象(Media object)、列表组(Listgroup)、面板(Panel) 和洼地(Well),总计20种。

 

本节目录

  •  

    所有组件

    小图标

    小图标(icon)是一个优秀网站不可缺少的一组元素,小图标的点缀可以使网站瞬间提升一个档次。bs提供了 200个小图标。

    使用的时候必须同时使用两个样式,即.glyphicon和以.glyphicon-*开头的样式。

    新版icon就是利用@font-face特性,并结合一定的字体, 来制作Web页面中的icon图标。

     

    优点

    这种形式不仅可以让字体无损失放大,还可以简单地通过color: #ff0的形式设置图标的颜色。

     

    2种使用方式

    <span></span> <i></i>

      

    3种场景使用场景

    button、li、input-group

     

    扩展

    图标是利用字体和content属性来实现的,所以下面这2个是等效的

    <span></span> <span>&#xe001</span>

     

    下拉菜单

    使用

    .dropdown样式是大容器,.dropdown-menu是菜单li元素的容器,而.divider样式在li元素上的显示效果是分隔符。

    由于menu样式中设置display:none,通过设置open样式,可以打开菜单。

    菜单标题,通过设置.dropdown-header样式可以设置标题。

    支持active和disabled

     

    多级菜单

    在bs3.x版本默认是没有多级菜单的,在bs2.x中有,如果要使用,先添加扩展样式

    .dropdown-submenu { position:} .dropdown-submenu > .dropdown-menu { top: 0; left: margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropup .dropdown-submenu > .dropdown-menu { top: auto; bottom: margin-top: 0; margin-bottom: -2px; -webkit-border-radius: 5px 5px 5px 0; -moz-border-radius: 5px 5px 5px 0; border-radius: 5px 5px 5px 0; } .dropdown-submenu > a:after { display: block; float: right; width: 0; height: 0; margin-top: 5px; margin-right: -10px; border-color: transparent; border-left-color: border-style: solid; border-width: 5px 0 5px 5px; content: " "; } .dropdown-submenu:hover > a:after { border-left-color:} .dropdown-submenu.pull-left { float:} .dropdown-submenu.pull-left > .dropdown-menu { left: margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }

    .dropdown-submenu

    然后在菜单项上添加dropdown-submenu样式。

     

    一个简单的多级菜单

    我的积分我的流量个人中心我的积分我的流量个人中心

     

     

    按钮组

    只需要在多个 按钮外部使用一个容器元素(比如div),然后在容器元素上应用.btn-group样式即可.

    按钮工具栏主要是将多个按钮组排列在一起,工具栏是一个容器,在容器元素上应用.btn-toolbar样式。

    支持lg、sm尺寸样式

    垂直分组.btn-group-vertical

    .btn-group-justified样式提供了一个特殊的功能,就是在一个.btn-group容器上,如果使用了该样式,则所有的按钮都会 100%充满容器元素。

     

    按钮下拉菜单

    下拉菜单需要满足一个特殊的需求,那就是必须有position: relative.(而.dropdown、btn-group样式正好都有该属性)

    组合下拉菜单

     

    分离下拉菜单(实际上就是加一个单独按钮。)

     

    向上弹起的

    只需要在容器上加上dropup样式即可

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • Omi树组件omi-tree编写指南 - 【当耐特】

      Omi树组件omi-tree编写指南 - 【当耐特】

      2017-05-02 15:04

    • 对于Bootstrap的介绍以及如何使用 - novai-L

      对于Bootstrap的介绍以及如何使用 - novai-L

      2017-04-29 09:00

    • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

      在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

      2017-04-28 15:00

    • JS组件系列——自己动手封装bootstrap-treegrid组件 - 懒得安分

      JS组件系列——自己动手封装bootstrap-treegrid组件 - 懒得安分

      2017-04-28 14:02

    网友点评
    a