1、图标 glyphicons
所有图标都有一个基类和对应每个图标的类。
务必在图标和文本之间添加一个空格
应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。
只对内容为空的元素起作用。
为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
aria-label 属性
如果你所创建的组件不包含任何文本内容（例如， 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属性。
aria-hidden="true" 属性
为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=”true” 属性。
2、下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
如需将菜单右对齐，请使用 .dropdown-menu-right 类
如需左对齐，请使用 .dropdown-menu-left 类。
分割线
为下拉菜单添加一条分割线，用于将多个链接分组。
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> ...
<li role="separator" class="divider"></li>
...
</ul>
3、按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组，需要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"。
垂直排列 .btn-group-vertical
让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
两端对齐排列的按钮组 .btn-group-justified
只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。
4、输入框组
为 .input-group 中所包含的元素应用工具提示（tooltip）或popover（弹出框）时，必须设置 container: ‘body’ 参数，
在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
.input-group-addon 或 .input-group-btn
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
.input-group-btn
为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。
5、导航
Bootstrap 中的导航组件都依赖同一个 .nav 类
如果你在使用导航组件实现导航条功能，务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件。
6、标签页
注意 .nav-tabs 类依赖 .nav 基类。
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类：
<ul class="nav nav-pills">
。。。
</ul>
胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
<ul class="nav nav-pills nav-stacked">
...
</ul>
两端对齐的标签页
在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。
7、导航条
默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
依赖 JavaScript 插件
如果 JavaScript 被禁用，并且视口（viewport）足够窄，致使导航条折叠起来，导航条将不能被打开， .navbar-collapse 内所包含的内容也将不可见。
导航条的可访问性
务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。
按钮
对于不包含在 中的 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
导航固定在顶部
添加 .navbar-fixed-top 类可以让导航条固定在顶部；
添加 .navbar-fixed-bottom 类可以让导航条固定在底部
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
导航禁止在顶部
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。
反色导航条
通过添加 .navbar-inverse 类可以改变导航条的外观。
<nav class="navbar navbar-inverse">
...
</nav>
品牌图标
由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。
路径导航 . breadcrumb
<div class="container ">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</div>
分页
禁用和激活状态
链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。
标签 .label
<span class="label label-default">New</span>
徽章 .badge
给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。
<a href="#">Inbox <span class="badge">42</span></a>
巨幕 .jumbotron
它能延伸至整个浏览器视口来展示网站上的关键内容。
<div class="jumbotron">
...
</div>
页头 .page-header
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
缩略图 thumbnail
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
警告框
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框；
.alert 类是必须要设置的；
警告框中的链接
用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。
进度条 .progress
堆叠效果
把 多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。
媒体对象
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片。
媒体查询 对齐 .media-middle .media-top .media-bottom
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
媒体对象列表
用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
列表组
面版 .panel
带标题的面版 .panel-heading
带脚注的面版 .panel-footer
带表格的面版 .table
具有响应式特性的嵌入内容
根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。
这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。
well
把 Well 用在元素上，就能有嵌入（inset）的简单效果。