用于展示可切换、有关联的一系列链接。与下拉菜单JavaScript插件配合使用。

以下是下拉菜单所需的HTML。下拉菜单的触发器和整个下拉菜单都需要包裹在.dropdown中，或者声明为position: relative;的其它页面元素中。

菜单可以右对齐，并且可以添加二级下拉菜单。

向.dropdown-menu添加.pull-right即可右对齐下拉菜单。

向添加.disabled即可禁用菜单中的某个链接。

通过添加一些简单的标记，可以给下拉菜单增加一个二级菜单，这个二级菜单会在鼠标悬停时自动展现，就像OS X中的效果。在现有的下拉菜单中，给任意的li添加.dropdown-submenu即可自动赋予一个二级菜单。

默认样式

向上弹出的子菜单

左侧弹出的子菜单

两个基本类型和更多变种类型。

将带有.btn类的一系列按钮包裹在.btn-group中。

将多个放入中即可获得更多复杂的组件。

让一组按钮呈现出垂直方向堆叠的样式。

按钮组还可以从能上表现得像单元框（一次只能有一个按钮被选中）或复选框（可同时选中多个按钮）。详见JavaScript插件文档。

注意！ 带有下拉菜单的按钮必须单独包裹在.btn-group中，然后才能放入.btn-toolbar中，只有这样才能正确渲染整个组件。

将按钮放入.btn-group中，并为其添加适当的菜单标签，即可让此按钮触发下拉菜单。

按钮式下拉菜单可以和所有表示尺寸的类共存：.btn-large、.btn-small、.btn-mini。

按钮式下拉菜单需要和Bootstrap下拉菜单插件配合使用。

在某些情况下—例如手机—下拉菜单可能会超出可视范围，你需要自己手工解决这一问题或者修改JavaScript。

在按钮组的基础上，我们可以很容易的创建分裂式按钮。分裂式按钮左侧是一个标准形式的按钮，右侧是一个可触发下拉菜单的链接。

使用这些类可以调整按钮大小：.btn-mini、.btn-small、.btn-large。

给.dropdown-menu的直接父节点添加一个类就可以让下拉菜单由下到上显示。.caret将会自动翻转，菜单的位置也会变为由下到上而不是由上到下了。

所有的导航组件都列在这里了—标签页、pills和列表—共用.nav类，具有相同的标记结构和样式

基于并添加.nav-tabs类：

相同的HTML结构，但这里使用了.nav-pills类：

为任一导航组件（标签页、pills或列表）添加.disabled类，均可让链接变灰并失去鼠标悬停效果。但是链接仍然是可以点击的，除非你将链接的href属性去除，你还可以写JavaScript代码阻止用户点击链接。

可以使用.pull-left 或 .pull-right工具类来对齐导航链接。每个类都实现特定方向的浮动。

标签页和pills默认都是水平排列的，只需额外添加一个.nav-stacked类即可让他们实现堆叠式排列。

通过一小段HTML代码和下拉菜单JavaScript插件即可添加一个下拉菜单。

这是一个简单并且容易的方式来构建一个带有可选标头的导航列表。他们经常被用在侧栏处，就像OS X中的Finder。

将class="nav nav-list"添加到一组链接列表中：

注意 导航列表需要嵌套时，将class="nav nav-list"添加到被嵌套的中。

新建一个列表项，并赋予.divider类，即可创建一条水平分割线，就像这样：

仅需一个简单的插件就可以在标签页之间切换内容。Bootstrap整合了4中样式的标签页样式：top (默认)、right、bottom和left。

为了让标签页可切换，需要在.tab-content中创建一个带有唯一ID的.tab-pane。

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

I'm in Section 1.

Howdy, I'm in Section 2.

为了让标签页有淡入效果，需要给每个.tab-pane添加.fade类。

所有可切换标签页都需要jQuery插件的支持。阅读更多关于JavaScript插件文档吧。

翻转HTML的顺序, 并添加一个.tabs-below类即可让标签页置于底部。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

添加.tabs-left类将标签页置于左侧。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

添加.tabs-right类将标签页置于右侧。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

导航条的基本样式是static（相对于fixed、absolute等定位样式）的（不固定在页面顶部），并包含一个项目（或网站）名称和基本的导航项。将导航条放入.container中就可以限制其宽度。

只需要一个连接标签就可以展示你的品牌货项目名称。

导航条中条目可以是无序列表。

添加分隔符同样的简单，只需增加一个空白的条目并为其设置一个类即可。如下所示：

要想在导航条中放置一个表单，需要像下面这个案例一样添加相应的类。对于一个默认表单，需要包含.navbar-form 和 .pull-left 或 .pull-right用以对齐。

在导航条内为form添加.navbar-search，并为输入框添加.search-query即可获得一个搜索表单。

使用.pull-left 或 .pull-right工具类用以对齐链接、搜索表单或文本。每个CSS类都会指定浮动的方向。

只需增加少量的标记即可在导航条中添加下拉菜单，另外还需要下来菜单JavaScript插件配合使用。

查看JavaScript下拉菜单完整文档

用.navbar-text包裹文本字符串可以很容易的突出此文本，一般使用

标签。

为最外层div添加一个额外.navbar类，就可把导航条固定在顶部或者底部。

只需添加.navbar-fixed-top类， 记得要给增加40px的padding（内补）才能不让导航条挡住其下面的内容。一定要在Bootstrap核心CSS（即bootstrap.css）文件之后，响应式CSS（bootstrap-responsive.css）文件之前添加。

添加.navbar-fixed-bottom即可。

通过添加.navbar-static-top即可创建一个与页面等宽的导航条，它会随着页面向下滚动而消失。和.navbar-fixed-top类不同的是，你不需要对改变body的内补（padding）。

要实现一个响应式导航条，需要把导航条包含在.nav-collapse.collapse中，并添加一个触发按钮.btn-navbar。

通过添加.navbar-inverse类可改变导航条的外观。

下面是一个简单的案例，他可以展示在多个页面上，用以页面之间的跳转。

这种简单的分页方式的灵感来自Rdio，非常适合app和搜索结果的展示。分页中的每一块都非常大，不易弄错，而且很容易扩展，并具有非常大的点击区域。

可根据不同情况定制链接。用.disabled标明链接不可点击，用.active标明当前页。

你还可以使用span标签替代a标签，这样就去除了点击功能，同时又能保留需要的样式。

需要更大或更小的分页吗？添加.pagination-large、.pagination-small 或 .pagination-mini就可以改变分页尺寸。

后面列出的两个类可以改变分页的对齐方式：.pagination-centered 和 .pagination-right。

用更少的标记和样式来创建简单的“前一页”和“后一页”。这种分页方式非常适用于简单的网站，比如博客或者杂志网站。

默认情况下，翻页中的链接居中显示。

另外，还可以将两个链接放置于两侧：

分页也可使用.disabled工具类让链接处于禁用状态。

当没有任何内容时，可以很方便的将标签和徽章折叠起来（通过CSS的 :empty 选择器）。

一个轻量、灵活的用于展示网站重点内容的组件。很适合营销类或内容类网站。

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Tagline

Learn more

给h1套上这个简单的外壳，就可以为其增加间隔并从页面中分离出来。也可以在h1里增加small元素，就像其他大部分组件一样（需要增加额外的样式）。

默认情况下，Bootstrap中的缩略图被设计为用最少的标记展示带链接的图片。

只需添加一点额外的标记，就可以在缩略图里添加任何类型的HTML内容，如标题、段落或按钮。

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

缩略图（v1.4版本之前叫.media-grid）很适合将图片、视频、图片搜索结果、商品列表等展示为网格样式。他们可以是链接或纯粹的内容。

组成缩略图的标记很简单—ul包裹任意数量的li 元素即可。它同样很灵活，只需添加少量标记即可包裹你需要展示的任何内容。

最后，缩略图组件使用现有的栅格系统中的类—例如.span2 或.span3—用以控制缩略图的尺寸。

如前面所提到的，缩略图所必须的标记很少、很直观。下面就来看看如何实现一个图片链接：

如果在缩略图中自定义HTML内容，标记的变化不大。为了放进来块级内容，我们把 替换成了，就像这样：

Thumbnail caption...

自己探寻一下不同的栅格类所带来的不同效果吧。你还可以同时设置不同的尺寸。

下面这个基本的警告框是在.alert中包裹任何文本和一个可选的关闭按钮。

Safari和Opera移动版浏览器上，当使用标签关闭警告框时，除了添加data-dismiss="alert"属性外，还需要包含href="#"属性。

可选方案是，使用带有data属性的元素，就像此文档中一样。当使用 时，必须包含type="button"属性，否则你将无法执行提交（submit）动作。

使用警告框jQuery插件可以快速、方便的关闭警告框。

对于较长的信息，通过添加.alert-block类可以增加警告框上下方向的内补（padding）。

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

通过添加其它类，可以改变警告框的含义。

默认样式是带有垂直渐变的进度条。

使用渐变创建的一个条纹效果的进度条。不支持IE7-8。

为.progress-striped添加.active，即可创建一个从右向左变化的条纹样式。IE全系列都不支持此效果。

将多个进度条放入同一个.progress中即可创建堆叠样式。

进度条与按钮和警告框共用某些类以获得一致的样式。

类似纯色样式，我们还可以创建不同颜色的条纹进度条。

进度条依赖于CSS3的渐变、过度和动画特性，这些都是不被IE7-9 或较老版本的Firefox所支持的。

IE10和Opera 12之前的版本均不支持动画特性。

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右对齐的图片（就像blog内容或Tweets等）。

默认样式是在内容区域的左或右侧浮动一个媒体对象（图片、视频、音频）。

使用一些额外的标记就可将媒体包含在列表内（对评论或文章列表很有用）。

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

well能给一个页面元素添加简单的嵌入（inset）效果。

这两个类用以控制内补和圆角效果。

关闭图标用来关闭模态对话框或警告框。

如果你选择使用连接标签的话，在iOS设备上需要一个href="#"配合点击事件。

用于小屏幕或调整行为的简单、功能单一的类。

让页面元素向左浮动

让页面元素向右浮动

改变页面元素的颜色为#999

为任意页面元素清除浮动