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></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样式即可