Bootstrap 手册 05 - 常用组件篇

Bootstrap 已高度组件化，切忌随意尝试重新开发。

1. 按钮

常用按钮元素有 button、a、input[type="submit"]、div 和
span 等，追加 .btn 类名即可使之成为 Bootstrap 风格按钮。使用除此以外的其它元素亦可，但为避免浏览器兼容性问题，建议最好使用 button 或 a 元素来制作按钮。

Bootstrap v3.x 版本的按钮要简约很多，去除了 v2.x 版本中的大量的
CSS3 特效，如：文本阴影、渐变背景、边框阴影等。
Bootstrap 考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在不同的浏览器中所呈现的效果基本相同。

1.1. 按钮风格

.btn.btn-(风格关键词)
主要风格按钮均为行内元素；

按钮基础及默认风格列表

按钮主要风格列表

1.2. 按钮尺寸

追加 .btn-lg、.btn-sm、.btn-xs 可按需调节按钮尺寸；
这几个类名将控制按钮的 padding、line-height、font-size 和
border-radius 等属性；

按钮尺寸列表

1.3. 块状按钮

追加.btn-block 可使按钮变为块状元素；
按钮宽度充满整个父容器 width: 100%，且这个按钮不会有任何的padding 和 margin 值；

1.4. 按钮状态

活动状态

悬停 :hover
点击 :active
焦点 :focus

禁用状态

禁用状态使按钮背景颜色透明度 opcity 的值调整为 65%。

追加类名 .disabled（无法从功能上禁用，点击可能仍有作用）；
追加属性 disabled（表单元素将禁用）；

1.5. 水平按钮组

在按钮组中的按钮，第一个按钮左上角和左下角具有圆角以及最后一个按钮右上角和右下角具有圆角。

div.btn-group>(.btn+.btn+...)
水平按钮组依赖 button.js 或者全局 bootstrap.js 文件；

按钮组尺寸

.btn-group.btn-group-lg：大按钮组；
.btn-group.btn-group-sm：小按钮组；
.btn-group.btn-group-xs：超小按钮组；

1.6. 垂直按钮组

在按钮组中的按钮，第一个按钮左上角和右上角具有圆角以及最后一个按钮左下角和右下角具有圆角。

.btn-group-vertical>(.btn+.btn+...)
其余同水平按钮组；

1.7. 按钮工具栏

每一按钮组 (div.btn-group) 都将浮动，并且在组间保持 5px 的左外距。

div.btn-toolbar>div.btn-group>(.btn+.btn+...)
需对 .btn-toolbar 清除浮动；

1.8. 按钮嵌套分组

将下拉菜单与按钮组排列在一起，可实现类似于导航菜单的效果。

div.btn-group>(button.btn.dropdown-toggle+ul.dropdown-menu>li)

1.9. 按钮等分分组

等分按钮组的效果在移动端上特别的实用。整个按钮组宽度是容器的
100%，而按钮组里面的每个按钮平分整个容器宽度。等分按钮组也常被称为是自适应分组按钮。

.btn-group.btn-group-justified
在制作等分按钮组时，尽量使用 a 元素作按钮（使用 button 元素时，display: table 在部分浏览器下支持并不友好）。

1.10. 向下 / 向上三角形

向下三角形：button>span.caret；
向上三角形：div.btn-group.dropup>button>span.caret；

2. 下拉菜单

下拉菜单组件依赖 dropdown.js 或 bootstrap.js 文件；
div.dropdown>(button.dropdown-toggle[type="button" data-toggle="dropdown（与最外层容器类名一致）"]+ul.dropdown-menu>li)

2.1. 菜单分割线

空元素 li.divider 即是菜单分割线；

2.2. 菜单标题

li.dropdown-header

2.3. 菜单对齐方式

Bootstrap 下拉菜单默认是左对齐，可通过以下步骤让下拉菜单相对于父容器右对齐：

使用 ul.dropdown-menu.dropdown-menu-right 或者 ul.dropdown-menu.pull-right；
为 .dropdown 添加 float: left; 属性；

2.4. 菜单项状态

悬浮状态 :hover；
焦点状态 :focus；
激活状态 .active；
禁用状态.disabled；

2.5. 上弹菜单

.btn-group.dropup 或者 .dropdown.dropup；

3. 标签 & 徽章

Bootstrap 标签，常用于导航等处，高亮相关信息（如新增等）。徽章和标签效果极其相似，亦用于信息提示（如未读信息条数等）。

标签或徽章没有内容时，可以借助 CSS3 :empty 伪元素将其隐藏：

.label:empty,
.badge:empty {
  display: none;
}

3.1. 标签使用

span.label.label-(风格关键词)

3.2. 标签风格

label-deafult：默认标签，深灰色；
label-primary：主要标签，深蓝色；
label-success：成功标签，绿色
label-info：信息标签，浅蓝色；
label-warning：警告标签，橙色；
label-danger：错误标签，红色；

3.3. 徽章使用

span.badge
徽章组件不提供多种风格效果；

4. 缩略图

Bootstrap 缩略图最常用于产品列表等，需配合栅格系统实现。

.container>.row>.col-xs-6>a.thumbnail[href="#"]>(img+div.caption)
div.caption 为可选，用于放置标题、文本描述或按钮等内容；

5. 警示框

.alert[role="alert"]

5.1. 警示框风格

警示框的主要风格

成功警示框：.alert[role="alert"].alert-success；
信息警示框：.alert[role="alert"].alert-info；
警告警示框：.alert[role="alert"].alert-warning；
错误警示框：.alert[role="alert"].alert-danger；

5.2. 警示框的关闭按钮

对警示框追加 alert-dismissable 类名；
在警示框中添加关闭按钮：；

close 类名提供关闭按钮的样式；
data-dismiss="alert" 属性提供单击关闭功能；

5.3. 警示框中的链接

.alert[role="alert"]>a.alert-link

6. 进度条

Bootstrap 进度条包含一个 100% 宽度的背景色以及高亮色块表示完成进度。

div.progress>div.progress-bar
优化示例：


  
    
      40% Complete

role 属性指出：这个 div 的作用是进度条；
aria-valuenow="40" 属性表示：当前进度条的进度为 40%；
aria-valuemin="0"属性表示：进度条的最小值为 0%；
aria-valuemax="100" 属性表示：进度条的最大值为 100%；

6.1. 进度条风格

.progress-bar.progress-bar-info：信息进度条（蓝色）；
.progress-bar.progress-bar-success：成功进度条（绿色）；
.progress-bar.progress-bar-warning：警告进度条（黄色）；
.progress-bar.progress-bar-danger：错误进度条（红色）；

6.2. 条纹进度条

Bootstrap 提供一种采用 CSS3 线性渐变实现的条纹进度条。条纹进度条和四种纯色风格进度条可以混合使用。

div.progress.progress-striped>div.progress-bar.progress-bar-(风格关键词)

6.3. 动态条纹进度条

div.progress.progress-striped.active>div.progress-bar.progress-bar-(风格关键词)

6.4. 层叠进度条

Bootstrap 进度条可将不同状态的进度条放置在一起，按水平方式排列。支持纯色和条纹交错，但总计不可超过 100%。

6.5. 带数字的进度条

带数字进度条示例

20%

7. 媒体对象

Bootstrap 定义了媒体对象，一般是成组出现，每一对象左边居左（或居右），内容居右（或居左）排列；一般包括以下成分——

媒体对像的容器 (.media)：用来容纳媒体对象的所有内容；
媒体对像的对象 (.media-object)：媒体对象中的对象，一般是图片；
媒体对象的主体 (.media-body)：媒体对象中的主体内容，可以是任何元素，一般是图片侧边内容；
媒体对象的标题 (.media-heading)：可选，用来描述对象的一个标题；

除上述定义的部分外，还可以配合 pull-left 或 pull-right 类名来控制媒体对象中的对象浮动方式。

div.media>(a.pull-*>img.media-object+div.media-body>h*.media-heading)

媒体对象列表

成组的媒体对象可以作为列表元素出现。

ul.media-list>li.media>(a.pull-*>img.media-object+div.media-body>h*.media-heading)

8. 列表组

8.1. 基础列表组

基础列表组示例

.list-group>.list-group-item
列表组容器 .list-group 可以是 ul、ol 或 div；
列表项 .list-group-item 可以是 li、a 或 div；

8.2. 带徽章的列表组

结合徽章组件和基础列表组的效果。

.list-group>.list-group-item>.badge

带徽章的列表组示例

8.3. 带悬停效果的列表组（链接列表项）

div.list-group>a.list-group-item

8.4. 自定义列表组

.list-group-item-heading：定义列表项头部样式；
.list-group-item-text：定义列表项主要内容；

8.5. 列表项状态

.list-group-item.active：当前状态；
.list-group-item.disabled：禁用状态；

8.6. 列表组风格

.list-group-item.list-group-item-success：绿色列表组；
.list-group-item.list-group-item-info：蓝色列表组；
.list-group-item.list-group-item-warning：黄色列表组；
.list-group-item.list-group-item-danger：红色列表组；

9. 面板

.panel.panel-(风格关键词)>(.panel-heading+.panel-body+panel-footer)

9.1. 面板风格

面板的主要风格

.panel.panel-default：默认；
.panel.panel-primary：重点蓝；
.panel.panel-success：成功绿；
.panel.panel-info：信息蓝；
.panel.panel-warning：警告黄；
.panel.panel-danger：危险红；

9.2 面板中嵌套表格 / 列表

Bootstrap 面板是在 .panel-body 内放置需要的内容，可以是图片、表格或者列表等。在实际应用运中，表格 / 列表和面板边缘可以不需要有任何的间距。但由于 .panel-body 设置了 padding: 15px;，在实际使用时可以将 table 或 ul 提取到 .panel-body 外面。

示例


  Title
  …
  …
  Author: XXX