例子

用于显示链接列表的可切换上下文菜单。与下拉 JavaScript 插件交互。

<ul类= “下拉菜单”角色= “菜单” aria-labelledby = “下拉菜单” >   
  <li><a tabindex = "-1" href = "#" >动作</a></li>  
  <li><a tabindex = "-1" href = "#" >另一个动作</a></li>  
  <li><a tabindex = "-1" href = "#" >这里有别的东西</a></li>  
  <li class = "分隔符" ></li> 
  <li><a tabindex = "-1" href = "#" >分隔链接</a></li>  
</ul>

标记

只看下拉菜单，这是所需的 HTML。您需要将下拉菜单的触发器和下拉菜单包装在内.dropdown，或另一个声明position: relative;. 然后只需创建菜单。

<div类= “下拉” > 
  <!-- 用于切换下拉菜单的链接或按钮 -->
  <ul类= “下拉菜单”角色= “菜单” aria- labelledby = “dLabel” >   
    <li><a tabindex = "-1" href = "#" >动作</a></li>  
    <li><a tabindex = "-1" href = "#" >另一个动作</a></li>  
    <li><a tabindex = "-1" href = "#" >这里有别的东西</a></li>  
    <li class = "分隔符" ></li> 
    <li><a tabindex = "-1" href = "#" >分隔链接</a></li>  
  </ul>
</div>

选项

向右对齐菜单并添加包括其他级别的下拉菜单。

对齐菜单

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

<ul类= “下拉菜单向右”角色= “菜单” aria- labelledby = “dLabel” >   
  ...
</ul>

禁用的菜单选项

添加.disabled到<li>下拉列表中的 a 以禁用链接。

<ul类= “下拉菜单”角色= “菜单” aria-labelledby = “下拉菜单” >   
  <li><a tabindex = "-1" href = "#" >常规链接</a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" >禁用链接</a></li>   
  <li><a tabindex = "-1" href = "#" >另一个链接</a></li>  
</ul>

下拉菜单上的子菜单

添加一个额外级别的下拉菜单，像 OS X 一样在悬停时出现，并添加了一些简单的标记。添加.dropdown-submenu到li现有下拉菜单中的任何内容以进行自动样式设置。

<ul类= “下拉菜单”角色= “菜单” aria- labelledby = “dLabel” >   
  ...
  <li class = "下拉子菜单" > 
    <a tabindex = "-1" href = "#" >更多选项</a>  
    <ul class = "下拉菜单" > 
      ...
    </ul>
  </li>
</ul>

例子

两个基本选项，以及两个更具体的变体。

单键组

.btn用in包裹一系列按钮.btn-group。

<div class = "btn-group" > 
  <button class = "btn" >左</button> 
  <button class = "btn" >中间</button> 
  <button class = "btn" >右</button> 
</div>

多个按钮组

将集合组合<div class="btn-group">成<div class="btn-toolbar">更复杂的组件。

<div类= "btn 工具栏" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

垂直按钮组

使一组按钮显示为垂直堆叠而不是水平堆叠。

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

复选框和收音机口味

按钮组也可以用作单选，其中只有一个按钮处于活动状态，或复选框，其中任意数量的按钮都可能处于活动状态。查看JavaScript 文档。

按钮组中的下拉菜单

小心！带有下拉菜单的按钮必须单独包装在.btn-groupa.btn-toolbar中以正确呈现。

概述和示例

使用任何按钮来触发下拉菜单，方法是将其放置在 a 中.btn-group并提供适当的菜单标记。

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    行动
    <span class = "caret" ></span> 
  </a>
  <ul class = "下拉菜单" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

适用于所有按钮尺寸

按钮下拉菜单适用于任何大小：.btn-large、.btn-small或.btn-mini。

需要 JavaScript

按钮下拉菜单需要Bootstrap 下拉插件才能运行。

在某些情况下——比如移动端——下拉菜单会延伸到视口之外。您需要手动或使用自定义 JavaScript 解决对齐问题。

拆分按钮下拉菜单

基于按钮组样式和标记，我们可以轻松创建拆分按钮。拆分按钮的左侧是标准操作，右侧是带有上下文链接的下拉切换。

<div class = "btn-group" > 
  <button class = "btn" >动作</button> 
  <按钮类= “btn下拉切换”数据切换= “下拉” >  
    <span class = "caret" ></span> 
  </按钮>
  <ul class = "下拉菜单" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

尺寸

使用额外的按钮类.btn-mini, .btn-small, 或.btn-large来调整大小。

<div class = "btn-group" > 
  <button class = "btn btn-mini" >动作</button> 
  <按钮类= “btn btn-mini下拉切换”数据切换= “下拉” >  
    <span class = "caret" ></span> 
  </按钮>
  <ul class = "下拉菜单" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

下拉菜单

下拉菜单也可以通过将单个类添加到.dropdown-menu. 它将翻转方向.caret并重新定位菜单本身以从下向上移动而不是自上而下。

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <按钮类= “btn下拉切换”数据切换= “下拉” >  
    <span class = "caret" ></span> 
  </按钮>
  <ul class = "下拉菜单" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

轻量级默认值相同的标记，不同的类

这里的所有导航组件——选项卡、药丸和列表——在整个类中共享相同的基本标记和样式.nav。

基本选项卡

获取常规<ul>链接并添加.nav-tabs：

<ul类= “导航导航选项卡” > 
  <li class = "活动" > 
    <a href = "#" >主页</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

基本丸

采用相同的 HTML，但.nav-pills改用：

<ul class = "nav nav-药丸" > 
  <li class = "活动" > 
    <a href = "#" >主页</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

禁用状态

对于任何导航组件（选项卡、药丸或列表），添加.disabled灰色链接和无悬停效果。但是，除非您删除该href属性，否则链接将保持可点击状态。或者，您可以实施自定义 JavaScript 来防止这些点击。

<ul class = "nav nav-药丸" > 
  ...
  <li class = "disabled" ><a href = "#" >主页</a></li>  
  ...
</ul>

组件对齐

要对齐导航链接，请使用.pull-left或.pull-right实用程序类。两个类都将在指定方向添加 CSS 浮动。

可堆叠

由于选项卡和药丸默认情况下是水平的，只需添加第二个类 ,.nav-stacked即可使它们垂直堆叠。

堆叠标签

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

堆叠药丸

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

下拉菜单

添加带有一点额外 HTML 的下拉菜单和下拉 JavaScript 插件。

带有下拉菜单的选项卡

<ul类= “导航导航选项卡” > 
  <li class = "下拉菜单" > 
    <a类= "下拉切换" 
       数据切换= “下拉”
       href = "#" >
        落下
        <b类= "插入符号" ></b> 
      </a>
    <ul class = "下拉菜单" > 
      <!-- 链接 -->
    </ul>
  </li>
</ul>

带有下拉菜单的药丸

<ul class = "nav nav-药丸" > 
  <li class = "下拉菜单" > 
    <a类= "下拉切换" 
       数据切换= “下拉”
       href = "#" >
        落下
        <b类= "插入符号" ></b> 
      </a>
    <ul class = "下拉菜单" > 
      <!-- 链接 -->
    </ul>
  </li>
</ul>

导航列表

一种使用可选标题构建导航链接组的简单方法。它们最适合用于 OS X 中的 Finder 等侧边栏。

示例导航列表

获取链接列表并添加class="nav nav-list"：

<ul类= "导航导航列表" > 
  <li class = "nav-header" >列表头</li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" >库</a></li> 
  ...
</ul>

笔记对于导航列表中的嵌套，包括class="nav nav-list"任何嵌套<ul>的 .

水平分隔线

通过使用 class 创建一个空列表项来添加水平分隔线.divider，如下所示：

<ul类= "导航导航列表" > 
  ...
  <li class = "分隔符" ></li> 
  ...
</ul>

选项卡导航

使用一个简单的插件让您的标签栩栩如生，通过标签在内容之间切换。Bootstrap 集成了四种样式的可选项卡：顶部（默认）、右侧、底部和左侧。

可选项卡示例

要使选项卡可选项卡，请.tab-pane为每个选项卡创建一个具有唯一 ID 的并将它们包装在.tab-content.

我在第一节。

你好，我在第 2 部分。

怎么样，女孩，这是第 3 节。

<div class = "tabbable" > <!-- 仅左/右标签需要 -->  
  <ul类= “导航导航选项卡” > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" >第 1 节</a></li>   
    <li><a href = "#tab2" data-toggle = "tab" >第 2 节</a></li>  
  </ul>
  <div类= "标签内容" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p>我在第 1 部分。</p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p>你好，我在第 2 部分。</p>
    </div>
  </div>
</div>

淡入标签

要使标签淡入，请添加.fade到每个.tab-pane.

需要 jQuery 插件

所有可选项卡都由我们的轻量级 jQuery 插件提供支持。在 JavaScript 文档页面上阅读有关如何使可选项卡栩栩如生的更多信息。

可在任何方向上标记

底部的标签

翻转 HTML 的顺序并添加一个类以将选项卡放在底部。

我在A区。

你好，我在 B 区。

怎么了女孩，这是C区。

<div class = "tabable tabs-below" > 
  <div类= "标签内容" > 
    ...
  </div>
  <ul类= “导航导航选项卡” > 
    ...
  </ul>
</div>

左侧的选项卡

交换类以将选项卡放在左侧。

我在A区。

你好，我在 B 区。

怎么了女孩，这是C区。

<div class = "tabable tabs-left" > 
  <ul类= “导航导航选项卡” > 
    ...
  </ul>
  <div类= "标签内容" > 
    ...
  </div>
</div>

右侧的选项卡

交换类以将选项卡放在右侧。

我在A区。

你好，我在 B 区。

怎么了女孩，这是C区。

<div class = "tabable tabs-right" > 
  <ul类= “导航导航选项卡” > 
    ...
  </ul>
  <div类= "标签内容" > 
    ...
  </div>
</div>

基本导航栏

首先，导航栏是静态的（不固定在顶部），包括对项目名称和基本导航的支持。在 a 中的任意位置放置一个.container，它设置您的站点和内容的宽度。

<div类= "导航栏" > 
  <div类= “导航栏内部” > 
    <a class = "brand" href = "#" >标题</a>  
    <ul类= “导航” > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" >链接</a></li> 
      <li><a href = "#" >链接</a></li> 
    </ul>
  </div>
</div>

导航栏组件

牌

显示您的品牌或项目名称的简单链接只需要一个锚标签。

<a class = "brand" href = "#" >项目名称</a>

导航链接

导航项目很容易通过无序列表添加。

<ul类= “导航” > 
  <li class = "活动" > 
    <a href = "#" >主页</a> 
  </li>
  <li><a href = "#" >链接</a></li> 
  <li><a href = "#" >链接</a></li> 
</ul>

您可以使用空列表项和简单的类轻松地将分隔线添加到导航链接。只需在链接之间添加：

<ul类= “导航” > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

形式

要在导航栏中正确设置表单的样式和位置，请添加适当的类，如下所示。对于默认表单，包含.navbar-form和其中之一.pull-left或.pull-right以正确对齐它。

<form class = "navbar-form pull-left" > 
  <输入类型= “文本”类= “span2” >  
  <button type = "submit" class = "btn" >提交</button>  
</form>

搜索表格

要获得更自定义的搜索表单，请在导航栏中添加.navbar-search和form输入.search-query以获取专用样式。

<form class = "navbar-search pull-left" > 
  <输入类型= “文本”类= “搜索查询”占位符= “搜索” >   
</form>

组件对齐

对齐导航链接、搜索表单或文本，使用.pull-left或.pull-right实用程序类。两个类都将在指定方向添加 CSS 浮动。

使用下拉菜单

使用一些标记和下拉 JavaScript 插件将下拉列表和下拉列表添加到导航。

<ul类= “导航” > 
  <li class = "下拉菜单" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      帐户
      <b类= "插入符号" ></b> 
    </a>
    <ul class = "下拉菜单" > 
      ...
    </ul>
  </li>
</ul>

访问JavaScript 下拉列表文档以获取有关调用下拉列表的更多标记和信息。

文本

用将文本字符串包裹在一个元素中.navbar-text，通常在一个<p>标签上以获得正确的前导和颜色。

可选的显示变化

将导航栏固定到视口的顶部或底部，并在最外面的 div 上添加一个类，.navbar.

固定在顶部

添加.navbar-fixed-top并记住通过将至少 40px 添加padding到<body>. 请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

固定在底部

.navbar-fixed-bottom改为添加。

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

静态顶部导航栏

创建一个全宽导航栏，通过添加.navbar-static-top. 与.navbar-fixed-top类不同，您不需要更改body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

响应式导航栏

要实现折叠响应式导航栏，请将导航栏内容包装在包含 div 的 div 中.nav-collapse.collapse，并添加导航栏切换按钮.btn-navbar.

<div类= "导航栏" > 
  <div类= “导航栏内部” > 
    <div类= “容器” > 
 
      <!-- .btn-navbar 用作折叠导航栏内容的切换 -->
      <一个类= “btn btn-navbar”数据切换= “折叠”数据目标= “. nav-折叠” >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- 如果您想显示品牌，请务必将其保留在那里 -->
      <a class = "brand" href = "#" >项目名称</a>  
 
      <!-- 任何你想隐藏在 940px 或以下的东西，都放在这里 -->
      <div class = "nav-collapse 折叠" > 
        <!-- .nav、.navbar-search、.navbar-form 等 -->
      </div>
 
    </div>
  </div>
</div>

小心！响应式导航栏需要折叠插件和响应式 Bootstrap CSS 文件。

倒变式

通过添加来修改导航栏的外观.navbar-inverse。

<div类= "导航栏 navbar-inverse" > 
  ...
</div>

例子

显示的单个示例可能会跨多个页面显示。

<ul类= “面包屑” > 
  <li><a href = "#" >主页</a> <span class = "divider" > / </span></li>   
  <li><a href = "#" >库</a> <span class = "divider" > / </span></li>   
  <li class = "active" >数据</li> 
</ul>

标准分页

受 Rdio 启发的简单分页，非常适合应用程序和搜索结果。大块很难错过，易于扩展，并提供大点击区域。

<div class = "分页" > 
  <ul>
    <li><a href = "#" >上一页</a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li><a href = "#" >下一个</a></li> 
  </ul>
</div>

选项

禁用和活动状态

链接可针对不同情况进行定制。用于.disabled不可点击的链接并.active指示当前页面。

<div class = "分页" > 
  <ul>
    <li class = "已禁用" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

您可以选择将活动或禁用的锚点换成跨度以删除点击功能，同时保留预期的样式。

<div class = "分页" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "活动" ><span> 1 </span></li> 
    ...
  </ul>
</div>

尺寸

想要更大或更小的分页？添加.pagination-large、.pagination-small或.pagination-mini用于其他尺寸。

<div class = "分页分页-大" > 
  <ul>
    ...
  </ul>
</div>
<div class = "分页" > 
  <ul>
    ...
  </ul>
</div>
<div class = "分页分页-小" > 
  <ul>
    ...
  </ul>
</div>
<div class = "分页分页-mini" > 
  <ul>
    ...
  </ul>
</div>

结盟

添加两个可选类之一以更改分页链接的对齐方式：.pagination-centered和.pagination-right.

<div class = "分页以分页为中心" > 
  ...
</div>

<div class = "分页分页-右" > 
  ...
</div>

寻呼机

带有轻标记和样式的简单分页实现的快速上一个和下一个链接。它非常适合博客或杂志等简单网站。

默认示例

默认情况下，寻呼机将链接居中。

<ul类= “寻呼机” > 
  <li><a href = "#" >上一页</a></li> 
  <li><a href = "#" >下一个</a></li> 
</ul>

对齐的链接

或者，您可以将每个链接对齐到两侧：

<ul类= “寻呼机” > 
  <li class = "上一个" > 
    <a href = "#" > ← 年长的</a> 
  </li>
  <li类= “下一个” > 
    <a href = "#" >较新的 → </a> 
  </li>
</ul>

可选禁用状态

寻呼机链接也使用分页中的通用.disabled实用程序类。

<ul类= “寻呼机” > 
  <li class = "以前的禁用" > 
    <a href = "#" > ← 年长的</a> 
  </li>
  ...
</ul>

标签	标记
默认	`<span class="label">Default</span>`
成功	`<span class="label label-success">Success</span>`
警告	`<span class="label label-warning">Warning</span>`
重要的	`<span class="label label-important">Important</span>`
信息	`<span class="label label-info">Info</span>`
逆	`<span class="label label-inverse">Inverse</span>`

徽章

姓名	例子	标记
默认	1	`<span class="badge">1</span>`
成功	2	`<span class="badge badge-success">2</span>`
警告	4	`<span class="badge badge-warning">4</span>`
重要的	6	`<span class="badge badge-important">6</span>`
信息	8	`<span class="badge badge-info">8</span>`
逆	10	`<span class="badge badge-inverse">10</span>`

易于折叠

:empty为了便于实施，标签和徽章在其中不存在任何内容时将简单地折叠（通过 CSS 的选择器）。

英雄单位

一个轻量级、灵活的组件，用于展示您网站上的关键内容。它适用于营销和内容繁重的网站。

你好世界！

这是一个简单的英雄单位，一个简单的大型超大型组件，用于引起对特色内容或信息的额外关注。

学到更多

<div class = "英雄单位" > 
  <h1>标题</h1>
  <p>标语</p>
  <p>
    <a类= "btn btn-primary btn-large" > 
      学到更多
    </a>
  </p>
</div>

页眉

一个简单的外壳，用于h1适当地分隔和分割页面上的内容部分。它可以利用h1's default small, 元素以及大多数其他组件（带有其他样式）。

<div类= "页眉" > 
  <h1>示例页眉<small>页眉的子文本</small></h1>
</div>

默认缩略图

默认情况下，Bootstrap 的缩略图旨在展示所需标记最少的链接图像。

高度可定制

通过一些额外的标记，可以将任何类型的 HTML 内容（如标题、段落或按钮）添加到缩略图中。

缩略图标签

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

行动行动
缩略图标签

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

行动行动
缩略图标签

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

行动行动

为什么使用缩略图

缩略图（以前.media-grid直到 v1.4）非常适合照片或视频网格、图像搜索结果、零售产品、投资组合等等。它们可以是链接或静态内容。

简单、灵活的标记

缩略图标记很简单——只要ul包含任意数量的li元素即可。它也非常灵活，允许任何类型的内容，只需更多标记即可包装您的内容。

使用网格列大小

最后，缩略图组件使用现有的网格系统类（如.span2或.span3）来控制缩略图尺寸。

标记

如前所述，缩略图所需的标记简单明了。以下是链接图像的默认设置：

<ul类= “缩略图” > 
  <li类= "span4" > 
    <a href = "#"类= "缩略图" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

对于缩略图中的自定义 HTML 内容，标记会略有变化。<a>为了允许任何地方的块级内容，我们将其换成<div>这样的：

<ul类= “缩略图” > 
  <li类= "span4" > 
    <div类= "缩略图" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3>缩略图标签</h3>
      <p>缩略图标题... </p>
    </div>
  </li>
  ...
</ul>

默认警报

将任何文本和可选的关闭按钮包裹起来，.alert以获得基本的警告警报消息。

警告！最好检查一下自己，你看起来不太好。

<div类= "警报" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </按钮>   
  <strong>警告！</strong>最好检查一下自己，你看起来不太好。
</div>

关闭按钮

Mobile Safari 和 Mobile Opera 浏览器除了该data-dismiss="alert"属性外，还需要href="#"在使用<a>标签时解除警报。

<a href = "#" class = "close" data-dismiss = "alert" > × </a>

或者，您可以使用<button>具有 data 属性的元素，我们选择为我们的文档执行此操作。使用时<button>，您必须包含，type="button"否则您的表格可能无法提交。

<button type = "button" class = "close" data-dismiss = "alert" > × </按钮>

通过 JavaScript 关闭警报

使用alerts jQuery 插件可以快速轻松地解除警报。

选项

对于更长的消息，通过添加来增加警报包装器顶部和底部的填充.alert-block。

警告！

最好检查一下自己，你看起来不太好。Nulla vitae elit libero，一个 pharetra augue。Praesent commodo cursus magna、vel scelerisque nisl consectetur 等。

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </按钮>   
  <h4>警告！</h4>
  最好自己检查一下，你不是...
</div>

上下文替代方案

添加可选类以更改警报的内涵。

错误或危险

哦，快！更改一些内容并尝试再次提交。

<div class = "alert alert-error" > 
  ...
</div>

成功

做得好！您已成功阅读此重要警报消息。

<div class = "alert alert-success" > 
  ...
</div>

信息

小心！此警报需要您的注意，但它并不是非常重要。

<div类= "警报警报信息" > 
  ...
</div>

示例和标记

基本的

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

<div类= “进度” > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

有条纹的

使用渐变创建条纹效果。在 IE7-8 中不可用。

<div class = "progress progress-striped" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

动画

添加.active到.progress-striped从右到左为条纹设置动画。并非在所有版本的 IE 中都可用。

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

堆叠的

将多个条放入同一条中.progress以堆叠它们。

<div类= “进度” > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

选项

其他颜色

进度条使用一些相同的按钮和警报类来实现一致的样式。

<div class = "进度进度信息" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "进度进度-成功" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "进度进度警告" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

条纹条

与纯色类似，我们有不同的条纹进度条。

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "进度进度-成功进度-条纹" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

浏览器支持

进度条使用 CSS3 渐变、过渡和动画来实现其所有效果。IE7-9 或更早版本的 Firefox 不支持这些功能。

Internet Explorer 10 和 Opera 12 之前的版本不支持动画。

用于构建各种类型的组件（如博客评论、推文等）的抽象对象样式，这些组件具有左对齐或右对齐的图像以及文本内容。

默认示例

默认媒体允许将媒体对象（图像、视频、音频）浮动到内容块的左侧或右侧。

媒体标题

Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。

媒体标题

<div类= “媒体” > 
  <a class = "pull-left" href = "#" >  
    <img类= "媒体对象" data-src = "holder.js/64x64" >  
  </a>
  <div类= “媒体主体” > 
    <h4 class = "media-heading" >媒体标题</h4> 
    ...
 
    <!-- 嵌套媒体对象 -->
    <div类= “媒体” > 
      ...
    </div>
  </div>
</div>

媒体列表

通过一些额外的标记，您可以在列表中使用媒体（对于评论线程或文章列表很有用）。

媒体标题

Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。

嵌套媒体标题
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。

嵌套媒体标题
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。

嵌套媒体标题
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。
媒体标题
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin commodo。Cras purus odio，前庭在 vulputate，tempus viverra turpis。

<ul类= “媒体列表” > 
  <li class = "媒体" > 
    <a class = "pull-left" href = "#" >  
      <img类= "媒体对象" data-src = "holder.js/64x64" >  
    </a>
    <div类= “媒体主体” > 
      <h4 class = "media-heading" >媒体标题</h4> 
      ...
 
      <!-- 嵌套媒体对象 -->
      <div类= “媒体” > 
        ...
     </div>
    </div>
  </li>
</ul>

威尔斯

将井用作元素上的简单效果，使其具有嵌入效果。

看，我在井里！

<div类= “好” > 
  ...
</div>

选修课

使用两个可选的修饰符类控制填充和圆角。

看，我在井里！

<div class = "好好-大" > 
  ...
</div>

看，我在井里！

<div class = "好-小" > 
  ...
</div>

关闭图标

使用通用关闭图标来关闭模式和警报等内容。

<button class = "close" > × </按钮>

href="#"如果您更愿意使用锚点，iOS 设备需要for click 事件。

<a class = "close" href = "#" > × </a>

助手类

用于小型显示或行为调整的简单、集中的类。

.pull-left

向左浮动一个元素

类= “拉左”

. 拉-左{
  浮动：左；
}

.pull-right

向右浮动元素

类= “拉右”

. 拉-右{
  浮动：对；
}

.静音

将元素的颜色更改为#999

类= “静音”

. 静音{
  颜色：#999； 
}

.clearfix

清除float任何元素上的

类= “清除修复”

. 清除修复{
  *缩放：1 ； 
  &：之前，
  &：在{之后
    显示：表格；
    内容：“” ； 
  }
  &：在{之后
    明确：两者；
  }
}

下拉菜单

例子

标记

选项

对齐菜单

禁用的菜单选项

下拉菜单上的子菜单

按钮组

例子

单键组

多个按钮组

垂直按钮组

复选框和收音机口味

按钮组中的下拉菜单

按钮下拉菜单

概述和示例

适用于所有按钮尺寸

需要 JavaScript

拆分按钮下拉菜单

尺寸

下拉菜单

导航：标签、药丸和列表

轻量级默认值相同的标记，不同的类

基本选项卡

基本丸

禁用状态

组件对齐

可堆叠

堆叠标签

堆叠药丸

下拉菜单

带有下拉菜单的选项卡

带有下拉菜单的药丸

导航列表

示例导航列表

水平分隔线

选项卡导航

可选项卡示例

淡入标签

需要 jQuery 插件

可在任何方向上标记

底部的标签

左侧的选项卡

右侧的选项卡

导航栏

基本导航栏

导航栏组件

牌

导航链接

形式

搜索表格

组件对齐

使用下拉菜单

文本

可选的显示变化

固定在顶部

固定在底部

静态顶部导航栏

响应式导航栏

倒变式

面包屑

例子

分页用于分页内容的两个选项

标准分页

选项

禁用和活动状态

尺寸

结盟

寻呼机

默认示例

对齐的链接

可选禁用状态

标签和徽章

标签

徽章

易于折叠

排版组件

英雄单位

你好世界！

页眉

示例页眉标题的子文本