成分

Bootstrap 中内置了许多可重用的组件，以提供导航、警报、弹出框等等。

按钮组

使用按钮组将多个按钮连接在一起作为一个复合组件。用一系列<a>或<button>元素构建它们。

最佳实践

对于使用按钮组和工具栏，我们建议遵循以下准则：

始终在单个按钮组中使用相同的元素，<a>或<button>.
不要在同一个按钮组中混用不同颜色的按钮。
使用图标作为文本的补充或替代，但请确保在适当的情况下包含 alt 和标题文本。

带有下拉菜单的相关按钮组（见下文）应单独调用，并始终包含一个下拉插入符号以指示预期行为。

默认示例

以下是 HTML 如何查找使用锚标记按钮构建的标准按钮组：

剩下中间正确的

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

工具栏示例

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

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

复选框和收音机口味

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

获取 JavaScript »

小心

按钮组的 CSS 位于单独的文件 button-groups.less 中。

按钮下拉菜单

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

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

示例标记

与按钮组类似，我们的标记使用常规按钮标记，但添加了一些改进样式并支持 Bootstrap 的下拉 jQuery 插件。

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

拆分按钮下拉菜单

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

示例标记

我们扩展了普通按钮下拉菜单，以提供第二个按钮操作，该操作作为单独的下拉触发器操作。

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

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

强大的基类

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

何时使用

标签和药丸非常适合内容部分或在相关内容页面之间导航。

组件对齐

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

基本选项卡

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

<ul class = "nav 导航标签" > 
  <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>

可堆叠使标签或药丸垂直

如何堆叠它们

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

堆叠标签

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

堆叠药丸

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

高级导航组件的下拉菜单

丰富的菜单变得简单

Bootstrap 选项卡和药丸中的下拉菜单非常简单，只需要一点额外的 HTML 和一个轻量级的 jQuery 插件。

前往 Javascript 页面阅读有关在 Bootstrap中初始化下拉菜单的文档。

带有下拉菜单的选项卡

<ul class = "nav 导航标签" > 
  <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 等侧边栏。

从结构上讲，它们与标签和药丸建立在相同的核心导航样式上，因此使用和定制很简单。

带图标

导航列表也很容易配备图标。使用类添加适当的<i>标签，您就可以设置了。

示例导航列表

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

<ul类= “导航导航列表” > 
  <li类= “导航标题” > 
    列表标题
  </li>
  <li class = "活动" > 
    <a href = "#" >主页</a> 
  </li>
  <li>
    <a href = "#" >库</a> 
  </li>
  ...
</ul>

带有图标的示例

相同的示例，但带有<i>图标标签。

<ul类= “导航导航列表” > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      图书馆
    </a>
  </li>
  ...
</ul>

Tabbable nav通过 javascript 使标签栩栩如生

包括什么

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

在它们之间进行更改很容易，只需要更改很少的标记。

可选项卡示例

要使选项卡可选项卡，请.nav-tabs使用 class 将 div 包装在另一个 div 中.tabbable。

我在第一节。

你好，我在第 2 部分。

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

自定义 jQuery 插件

所有可选项卡都由我们的轻量级 jQuery 插件提供支持。在 javascript 文档页面上阅读更多关于如何将可选项卡变为现实的信息。

获取 javascript →

直截了当的标记

使用可选项卡需要一个包装 div、一组选项卡和一组可选项卡的内容窗格。

<div类= “可选项卡” > 
  <ul class = "nav 导航标签" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" >第 1 节</a></li>   
    <li><a href = "#2" data-toggle = "tab" >第 2 节</a></li>  
  </ul>
  <div类= "标签内容" > 
    <div class = "选项卡窗格活动" id = "1" >  
      <p>我在第 1 部分。</p>
    </div>
    <div类= “选项卡窗格” id = “2” >  
      <p>你好，我在第 2 部分。</p>
    </div>
  </div>
</div>

可在任何方向上标记

底部的标签

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

我在A区。

你好，我在 B 区。

怎么了女孩，这是C区。

<div class = "tabable tabs-below" > 
  <div类= "标签内容" > 
    ...
  </div>
  <ul class = "nav 导航标签" > 
    ...
  </ul>
</div>

左侧的选项卡

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

我在A区。

你好，我在 B 区。

怎么了女孩，这是C区。

<div class = "tabable tabs-left" > 
  <ul class = "nav 导航标签" > 
    ...
  </ul>
  <div类= "标签内容" > 
    ...
  </div>
</div>

右侧的选项卡

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

我在A区。

你好，我在 B 区。

怎么了女孩，这是C区。

<div class = "tabable tabs-right" > 
  <ul class = "nav 导航标签" > 
    ...
  </ul>
  <div类= "标签内容" > 
    ...
  </div>
</div>

静态导航栏示例

带有项目名称、导航和搜索表单的静态（不固定在顶部）导航栏示例。

导航栏脚手架

导航栏只需要几个 div 就可以很好地为静态或固定显示构建它。

<div类= "导航栏" > 
  <div类= “导航栏内部” > 
    <div类= “容器” > 
      ...
    </div>
  </div>
</div>

固定导航栏

要将导航栏固定在视口的顶部，请添加.navbar-fixed-top到最外层的 div .navbar，.

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

在您的 CSS 中，您还需要通过在<body>. 请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

品牌

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

<a类= "品牌" href = "#" >  
  项目名称
</a>

搜索表格

搜索表单在.navbar-search类的导航栏中接收自定义样式。包括.pull-left或.pull-right以form对齐它。

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

可选的响应变化

根据顶部栏中的内容量，您可能希望实现响应式选项。为此，请将您的导航内容包装在包含 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类= “导航折叠” > 
        <!-- .nav、.navbar-search、.navbar-form 等 -->
      </div>
 
    </div>
  </div>
</div>

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

导航链接

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

<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>

组件对齐

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

添加下拉菜单

向导航添加下拉菜单非常简单，但确实需要使用我们的 javascript 插件。

<ul类= “导航” > 
  <li class = "下拉菜单" > 
    <a href = "#" 
          类= “下拉切换”
          数据切换= “下拉” >
          帐户
          <b类= "插入符号" ></b> 
    </a>
    <ul class = "下拉菜单" > 
      ...
    </ul>
  </li>
</ul>

获取 javascript →

为什么使用它们

面包屑导航用于向用户显示他们在应用程序或网站中的位置，但不适用于主导航。保持它们的使用稀疏和简洁是最有效的。

例子

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

标记

HTML 是带有链接的标准无序列表。

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

多页面分页

何时使用

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

有状态的页面链接

链接是可定制的，并且可以在多种情况下使用正确的类。.disabled对于不可点击的链接和.active当前页面。

灵活对齐

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

例子

默认的分页组件是灵活的，并且可以在许多变体中工作。

标记

包裹在一个<div>，分页只是一个<ul>。

<div类= “分页” > 
  <ul>
    <li><a href = "#" >上一页</a></li> 
    <li class = "活动" > 
      <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 = "#" >下一个</a></li> 
  </ul>
</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>

标签	标记
默认	`<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>`

英雄单位

Bootstrap 提供了一个轻量级、灵活的组件，称为英雄单元，用于在您的网站上展示内容。它适用于营销和内容密集的网站。

标记

将您的内容包装成div这样：

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

你好世界！

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

学到更多

页眉

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

<div class = "page-haeder" > 
  <h1>示例页眉</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。

行动行动

为什么使用缩略图

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

简单、灵活的标记

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

使用网格列大小

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

标记

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

<ul类= “缩略图” > 
  <li类= "span3" > 
    <a href = "#"类= "缩略图" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul类= “缩略图” > 
  <li类= "span3" > 
    <div类= "缩略图" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5>缩略图标签</h5>
      <p>缩略图标题就在这里...... </p>
    </div>
  </li>
  ...
</ul>

轻量级默认值

重写基类

在 Bootstrap 2 中，我们简化了基类：.alert而不是.alert-message. 我们还减少了所需的最低标记——<p>默认情况下不需要，只需要外部<div>.

单个警报消息

对于代码更少、更耐用的组件，我们删除了块警报、带有更多填充和通常更多文本的消息的差异化外观。班级也已更改为.alert-block.

非常适合使用 javascript

Bootstrap 带有一个很棒的 jQuery 插件，它支持警报消息，可以快速轻松地解除它们。

获取插件 »

示例警报

用简单的类将您的消息和可选的关闭图标包装在一个 div 中。

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

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

使用两个可选类轻松扩展标准警报消息：.alert-block更多填充和文本控件以及.alert-heading匹配标题。

警告！

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

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

上下文替代项添加可选类以更改警报的内涵

错误或危险

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

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

成功

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

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

信息

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

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

示例和标记

基本的

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

<div类= “进度” > 
  <div类= “酒吧” 
       样式= "宽度: 60 %; " ></div> 
</div>

有条纹的

使用渐变创建条纹效果。

<div class = "进度进度信息 
     进度条" >
  <div类= “酒吧” 
       样式= "宽度: 20 %; " ></div> 
</div>

动画

采用条纹示例并为其设置动画。

<div class = "进度进度-危险 
     进度条活跃" >
  <div类= “酒吧” 
       样式= "宽度: 40 %; " ></div> 
</div>

选项和浏览器支持

其他颜色

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

.progress-info
.progress-success
.progress-danger

或者，您可以自定义 LESS 文件并滚动您自己的颜色和大小。

行为

进度条使用 CSS3 过渡，因此如果您通过 javascript 动态调整宽度，它将平滑调整大小。

如果您使用.active该类，您的.progress-striped进度条将从左到右为条纹设置动画。

浏览器支持

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

Opera 目前不支持动画。

威尔斯

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

看，我在井里！

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

徽章

在元素上使用徽章来获取未读计数或作为简单的指示器。

<span class = "徽章" > 3 </div>

关闭图标

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

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

按钮组加入按钮以获得更多类似工具栏的功能

按钮组

最佳实践

默认示例

工具栏示例

复选框和收音机口味

小心

按钮下拉菜单 基于按钮组的上下文下拉菜单

按钮下拉菜单

示例标记

拆分按钮下拉菜单

示例标记

导航、标签和药丸高度可定制的列表式导航

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

强大的基类

何时使用

组件对齐

基本选项卡

基本丸

可堆叠使标签或药丸垂直

如何堆叠它们

堆叠标签

堆叠药丸

高级导航组件的下拉菜单

丰富的菜单变得简单

带有下拉菜单的选项卡

带有下拉菜单的药丸

导航列表构建简单的堆叠导航，非常适合侧边栏

应用式导航

带图标

示例导航列表

带有图标的示例

Tabbable nav通过 javascript 使标签栩栩如生

包括什么

可选项卡示例

自定义 jQuery 插件

直截了当的标记

可在任何方向上标记

底部的标签

左侧的选项卡

右侧的选项卡

导航栏

静态导航栏示例

导航栏脚手架

固定导航栏

品牌

搜索表格

可选的响应变化

导航链接

组件对齐

添加下拉菜单

面包屑

为什么使用它们

例子

标记

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

多页面分页

何时使用

有状态的页面链接

灵活对齐

例子

标记

寻呼机用于快速上一个和下一个链接

关于寻呼机

默认示例

对齐的链接

内联标签标签和注释文本

排版组件用于分割内容的页眉和英雄单元

英雄单位

标记

你好世界！

页眉

图片、视频、文本等的缩略图网格

默认缩略图

高度可定制

缩略图标签

缩略图标签

为什么使用缩略图

简单、灵活的标记

使用网格列大小

按钮下拉菜单基于按钮组的上下文下拉菜单