BootStrap【三、组件】

特有标签属性

• role 用于浏览器识别
• aria-label 用于浏览器识别
• tabIndex 用于浏览器识别
• data- 自定义数据属性

图标

直接引用官方图标库中的class
官方图标库
Demo

下拉菜单

.dropdown 下拉组件，用于div
.dropup 上拉组件，用于div（即向上弹出的菜单）
data-toggle="dropdown" 下拉按钮绑定下拉事件
.dropdown-menu 选项菜单，用于ul
.dropdown-menu-right 右对齐，用于ul
.divider 分割线，用于li
.dropdown-header menu列表标题，用于li

Demo

控件组

.input-group 控件组
.input-group-addon 额外内容及图标
Demo

导航

.nav 导航标签，用于ul
.nav-tabs 可切换导航，用于ul
.nav-pills 胶囊导航，用于ul
.nav-justified 使垂直，用于ul
注：导航中须使用a标签
Demo

分页

.pagination 父元素中添加表示分页，用于ul
.pagination-lg/sm 分页器变大、变小，用于ul
.pager 放置在翻页区域，只是前后
.previous 链接向左对其
.next 连接向右对其
Demo

进度条

.progress-bar 进度条
.progress-bar-success/danger.. 改变颜色
.progress-bar-stiped 条文
Demo

列表

.list-group 列表，用于ul
.list-group-item 列表项，用于li
.list-group-item-success/danger.. 改变列表项颜色
.badge 状态数，可用于任何地方的span，表示未读数量，状态数量等
.active 选中状态
.disabled 不可用状态
Demo

面板

.panel 面板
.panel-default 面板基本样式
.panel-success/danger... 改变面板颜色
.panel-heading 面板头
.panel-body 面板内容
.panel-footer 注脚