可用图标

包含来自 Glyphicon Halflings 集的超过 250 个字体格式的图标。Glyphicons Halflings 通常不是免费提供的，但它们的创建者已免费为 Bootstrap 提供。作为感谢，我们只要求您在可能的情况下包含指向 Glyphicons 的链接。

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-heart
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-gift
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-left
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-heart-empty
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-saved
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-oil
glyphicon glyphicon-grain
glyphicon glyphicon-sunglasses
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

使用方法

出于性能原因，所有图标都需要一个基础类和单个图标类。要使用，只需在任何地方放置以下代码。确保在图标和文本之间留出空间以获得适当的内边距。

不要与其他组件混合使用

图标类不能直接与其他组件组合使用。它们不应与同一元素上的其他类一起使用。相反，添加一个嵌套的 <span> 并将图标类应用到该 <span> 上。

仅用于空元素

图标类应仅用于不包含文本内容且没有子元素的元素。

更改图标字体位置

Bootstrap 假设图标字体文件将位于相对于编译后的 CSS 文件的 ../fonts/ 目录中。移动或重命名这些字体文件意味着通过以下三种方式之一更新 CSS：

在源 Less 文件中更改 @icon-font-path 和/或 @icon-font-name 变量。
利用 Less 编译器提供的相对 URL 选项。
在编译后的 CSS 中更改 url() 路径。

使用最适合您特定开发设置的选项。

可访问的图标

现代版本的辅助技术会宣布 CSS 生成的内容以及特定的 Unicode 字符。为避免屏幕阅读器中出现意外和令人困惑的输出（特别是当图标仅用于装饰时），我们使用 aria-hidden="true" 属性隐藏它们。

如果您使用图标来传达含义（而不仅仅是作为装饰元素），请确保这种含义也传达给辅助技术——例如，包含额外的内容，使用 .sr-only 类在视觉上隐藏。

如果您创建的控件没有其他文本（例如只包含图标的 <button>），您应该始终提供替代内容来标识控件的用途，以便辅助技术的用户能够理解。在这种情况下，您可以在控件本身上添加 aria-label 属性。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

示例

在按钮、工具栏的按钮组、导航或前置表单输入中使用它们。

<button type="button" class="btn btn-default" aria-label="左对齐">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 星标
</button>

在警告框中使用的图标，用于传达它是错误消息，并带有额外的 .sr-only 文本，向辅助技术的用户传达此提示。

请输入有效的电子邮件地址

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">错误：</span>
  请输入有效的电子邮件地址
</div>

可切换的上下文菜单，用于显示链接列表。通过下拉菜单 JavaScript 插件实现交互功能。

示例

将下拉菜单的触发器和下拉菜单包装在 .dropdown 或其他声明了 position: relative; 的元素中。然后添加菜单的 HTML。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">操作</a></li>
    <li><a href="#">另一项操作</a></li>
    <li><a href="#">其他内容</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">分隔链接</a></li>
  </ul>
</div>

通过向父元素添加 .dropup，可以将下拉菜单更改为向上展开（而不是向下）。

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    上拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">操作</a></li>
    <li><a href="#">另一项操作</a></li>
    <li><a href="#">其他内容</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">分隔链接</a></li>
  </ul>
</div>

对齐

默认情况下，下拉菜单会自动定位在其父元素的顶部下方 100% 并沿左侧对齐。向 .dropdown-menu 添加 .dropdown-menu-right 可以右对齐下拉菜单。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

标题

在任何下拉菜单中添加标题，以标记操作的各个部分。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">下拉菜单标题</li>
  ...
</ul>

分隔线

添加分隔线以分隔下拉菜单中的一系列链接。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

禁用的菜单项

向下拉菜单中的 <li> 添加 .disabled 以禁用链接。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">普通链接</a></li>
  <li class="disabled"><a href="#">禁用的链接</a></li>
  <li><a href="#">另一项链接</a></li>
</ul>

使用按钮组将一系列按钮组合在同一行上。通过我们的按钮插件添加可选的 JavaScript 单选按钮和复选框样式行为。

按钮组中的工具提示和弹出框需要特殊设置

在 .btn-group 内的元素上使用工具提示或弹出框时，您必须指定 container: 'body' 选项，以避免意外的副作用（例如，当触发工具提示或弹出框时，元素变宽和/或失去圆角）。

确保正确的 `role` 并提供标签

为了让辅助技术（如屏幕阅读器）传达一系列按钮是分组的，需要提供适当的 role 属性。对于按钮组，这应该是 role="group"，而工具栏应该有 role="toolbar"。

一个例外是只包含单个控件的组（例如带有 <button> 元素的两端对齐的按钮组）或下拉菜单。

此外，组和工具栏应该有明确的标签，因为尽管存在正确的 role 属性，大多数辅助技术仍不会宣布它们。在这里提供的示例中，我们使用 aria-label，但也可以使用其他替代方案，如 aria-labelledby。

基本示例

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">左</button>
  <button type="button" class="btn btn-default">中</button>
  <button type="button" class="btn btn-default">右</button>
</div>

将多组 <div class="btn-group"> 组合到 <div class="btn-toolbar"> 中，以创建更复杂的组件。

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

尺寸

不要将按钮尺寸类应用到组中的每个按钮，只需将 .btn-group-* 添加到每个 .btn-group，包括嵌套多个组时。

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

嵌套

当您希望下拉菜单与一系列按钮混合时，将一个 .btn-group 放置在另一个 .btn-group 内。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      下拉菜单
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接</a></li>
      <li><a href="#">下拉链接</a></li>
    </ul>
  </div>
</div>

垂直变体

使一组按钮垂直堆叠而不是水平排列。此处不支持分裂式按钮下拉菜单。

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

两端对齐的按钮组

使一组按钮以相等的大小拉伸，以跨越其父容器的整个宽度。也适用于按钮组内的按钮下拉菜单。

处理边框

由于用于对齐按钮的特定 HTML 和 CSS（即 display: table-cell），按钮之间的边框是双倍的。在常规按钮组中，使用 margin-left: -1px 来堆叠边框而不是移除它们。然而，margin 不适用于 display: table-cell。因此，根据您对 Bootstrap 的自定义，您可能希望移除或重新着色边框。

IE8 和边框

Internet Explorer 8 不会在两端对齐的按钮组中的按钮上渲染边框，无论是在 <a> 还是 <button> 元素上。要解决这个问题，请将每个按钮包装在另一个 .btn-group 中。

有关更多信息，请参阅 #12476。

使用 `<a>` 元素

只需将一系列 .btn 包装在 .btn-group.btn-group-justified 中。

左中右

左中

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

作为按钮的链接

如果 <a> 元素用于充当按钮（触发页面内功能，而不是导航到另一个文档或当前页面的部分），它们也应该被赋予适当的 role="button"。

使用 `<button>` 元素

要使用带有 <button> 元素的两端对齐按钮组，您必须将每个按钮包装在按钮组中。大多数浏览器不会正确应用我们的对齐 CSS 到 <button> 元素，但由于我们支持按钮下拉菜单，我们可以解决这个问题。

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">左</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">中</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">右</button>
  </div>
</div>

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

插件依赖

按钮下拉菜单需要在您的 Bootstrap 版本中包含下拉插件。

单按钮下拉菜单

通过一些基本的标记更改，将按钮转换为下拉切换按钮。

<!-- 单按钮 -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    操作 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">操作</a></li>
    <li><a href="#">另一项操作</a></li>
    <li><a href="#">其他内容</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">分隔链接</a></li>
  </ul>
</div>

分裂式按钮下拉菜单

类似地，使用相同的标记更改创建分裂式按钮下拉菜单，只是使用单独的按钮。

<!-- 分裂式按钮 -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">操作</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">切换下拉菜单</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">操作</a></li>
    <li><a href="#">另一项操作</a></li>
    <li><a href="#">其他内容</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">分隔链接</a></li>
  </ul>
</div>

尺寸

按钮下拉菜单适用于所有尺寸的按钮。

<!-- 大型按钮组 -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    大型按钮 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- 小型按钮组 -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    小型按钮 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- 超小型按钮组 -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    超小型按钮 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

上拉菜单变体

通过向父元素添加 .dropup 来在元素上方触发下拉菜单。

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">上拉</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">切换下拉菜单</span>
  </button>
  <ul class="dropdown-menu">
    <!-- 下拉菜单链接 -->
  </ul>
</div>

通过在任何基于文本的 <input> 之前、之后或两侧添加文本或按钮来扩展表单控件。使用 .input-group 和 .input-group-addon 或 .input-group-btn 来向前缀或后缀单个 .form-control 添加元素。

仅支持文本 `<input>`

避免在此处使用 <select> 元素，因为它们在 WebKit 浏览器中无法完全设置样式。

避免在此处使用 <textarea> 元素，因为在某些情况下它们的 rows 属性不会被尊重。

输入组中的工具提示和弹出框需要特殊设置

在 .input-group 内的元素上使用工具提示或弹出框时，您必须指定 container: 'body' 选项，以避免意外的副作用（例如，当触发工具提示或弹出框时，元素变宽和/或失去圆角）。

不要与其他组件混合使用

不要将表单组或网格列类直接与输入组混合使用。相反，将输入组嵌套在表单组或网格相关元素内。

始终添加标签

如果不为每个输入添加标签，屏幕阅读器将难以处理您的表单。对于这些输入组，请确保任何额外的标签或功能都能传达给辅助技术。

要使用的确切技术（可见的 <label> 元素、使用 .sr-only 类隐藏的 <label> 元素，或使用 aria-label、aria-labelledby、aria-describedby、title 或 placeholder 属性）以及需要传达的其他信息将根据您实现的确切类型的界面小部件而有所不同。本节中的示例提供了一些建议的、针对具体情况的方法。

基本示例

在输入的任一侧放置一个附加组件或按钮。您也可以在输入的两侧各放置一个。

我们不支持在单一侧使用多个附加组件（.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" placeholder="用户名" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="收件人的用户名" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="金额（精确到美元）">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">您的个人 URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

尺寸

将相对表单尺寸类添加到 .input-group 本身，内部内容将自动调整大小——无需在每个元素上重复表单控件尺寸类。

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-describedby="sizing-addon3">
</div>

复选框和单选按钮附加组件

在输入组的附加组件中放置任何复选框或单选按钮选项，而不是文本。

<div class="row">
  <div class="col-lg-6">
    <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 -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

按钮附加组件

输入组中的按钮略有不同，需要额外的嵌套级别。您需要使用 .input-group-btn 来包装按钮，而不是 .input-group-addon。这是由于无法覆盖的默认浏览器样式所必需的。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">搜索！</button>
      </span>
      <input type="text" class="form-control" placeholder="搜索...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="搜索...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">搜索！</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

带下拉菜单的按钮

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">操作 <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">操作</a></li>
          <li><a href="#">另一项操作</a></li>
          <li><a href="#">其他内容</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">分隔链接</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">操作 <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">操作</a></li>
          <li><a href="#">另一项操作</a></li>
          <li><a href="#">其他内容</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">分隔链接</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

分段按钮

<div class="input-group">
  <div class="input-group-btn">
    <!-- 按钮和下拉菜单 -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- 按钮和下拉菜单 -->
  </div>
</div>

多个按钮

虽然每侧只能有一个附加组件，但您可以在单个 .input-group-btn 内有多个按钮。

<div class="input-group">
  <div class="input-group-btn">
    <!-- 按钮 -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- 按钮 -->
  </div>
</div>

Bootstrap 中可用的导航组件具有共享的标记结构，从基础的 .nav 类开始，以及共享的状态。通过交换修饰类可以在不同样式之间切换。

使用导航作为选项卡面板需要 JavaScript 选项卡插件

对于带有可切换区域的选项卡，您必须使用选项卡 JavaScript 插件。标记还需要额外的 role 和 ARIA 属性 - 有关更多详细信息，请参阅插件的示例标记。

确保用作导航的组件可访问

如果您使用导航组件来提供导航栏，请确保向 <ul> 最合理的父容器添加 role="navigation"，或者在整个导航周围包裹一个 <nav> 元素。不要将该角色添加到 <ul> 本身，因为这会阻止辅助技术将其宣布为实际列表。

选项卡

请注意，.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">
  <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>

胶囊式导航也可以垂直堆叠。只需添加 .nav-stacked。

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

两端对齐导航

在屏幕宽度大于 768px 时，使用 .nav-justified 可以轻松使选项卡或胶囊式导航与其父容器等宽。在较小的屏幕上，导航链接会堆叠显示。

当前不支持两端对齐的导航栏导航链接。

Safari 和响应式两端对齐导航

从 v9.1.2 开始，Safari 存在一个 bug，当水平调整浏览器大小时，两端对齐导航会出现渲染错误，刷新后会清除这些错误。此 bug 也在两端对齐导航示例中显示。

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

禁用的链接

对于任何导航组件（选项卡或胶囊式），添加 .disabled 类可以获得 灰色链接且无悬停效果。

链接功能不受影响

此类只会更改 <a> 的外观，不会更改其功能。请使用自定义 JavaScript 在此处禁用链接。

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

使用下拉菜单

添加一些额外的 HTML 和下拉菜单 JavaScript 插件来创建下拉菜单。

带下拉菜单的选项卡

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

带下拉菜单的胶囊式导航

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

导航栏是响应式的元组件，作为您的应用程序或网站的导航头部。在移动视图中它们开始是折叠的（可切换的），随着视口宽度的增加变为水平布局。

当前不支持两端对齐的导航栏导航链接。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 品牌和切换按钮组合在一起以获得更好的移动显示 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">品牌</a>
    </div>

    <!-- 收集用于切换的导航链接、表单和其他内容 -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">链接 <span class="sr-only">(当前)</span></a></li>
        <li><a href="#">链接</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">操作</a></li>
            <li><a href="#">另一操作</a></li>
            <li><a href="#">其他内容</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">分离的链接</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">另一个分离的链接</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="搜索">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">链接</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">操作</a></li>
            <li><a href="#">另一操作</a></li>
            <li><a href="#">其他内容</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">分离的链接</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

通过将文本替换为 <img> 来用您自己的图像替换导航栏品牌。由于 .navbar-brand 有自己的内边距和高度，根据您的图像可能需要覆盖一些 CSS。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="品牌" src="...">
      </a>
    </div>
  </div>
</nav>

将表单内容放在 .navbar-form 内，以在窄视口中实现适当的垂直对齐和折叠行为。使用对齐选项来决定它位于导航栏内容中的位置。

需要注意的是，.navbar-form 通过 mixin 与 .form-inline 共享大量代码。某些表单控件，如输入组，可能需要固定宽度才能在导航栏中正确显示。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="搜索">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

将 .navbar-btn 类添加到不在 <form> 中的 <button> 元素，以在导航栏中垂直居中它们。

<button type="button" class="btn btn-default navbar-btn">登录</button>

将文本字符串包装在带有 .navbar-text 的元素中，通常在 <p> 标签上以获得适当的行高和颜色。

<p class="navbar-text">以 Mark Otto 身份登录</p>

对于使用不在常规导航栏导航组件中的标准链接的用户，使用 .navbar-link 类为默认和反色导航栏选项添加适当的颜色。

<p class="navbar-text navbar-right">以 <a href="#" class="navbar-link">Mark Otto</a> 身份登录</p>

使用 .navbar-left 或 .navbar-right 工具类对齐导航链接、表单、按钮或文本。这两个类都会在指定方向添加 CSS 浮动。例如，要对齐导航链接，将它们放在一个单独的 <ul> 中，并应用相应的工具类。

这些类是 .pull-left 和 .pull-right 的 mixin 版本，但它们在媒体查询范围内，以便更容易地处理跨设备尺寸的导航栏组件。

添加 .navbar-fixed-top 并包含 .container 或 .container-fluid 以居中并填充导航栏内容。

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

需要 body 内边距

固定导航栏会覆盖您的其他内容，除非您在 <body> 顶部添加 padding。尝试使用您自己的值或使用下面的代码片段。提示：默认情况下，导航栏高 50px。

body { padding-top: 70px; }

确保在核心 Bootstrap CSS 之后包含此代码。

添加 .navbar-fixed-bottom 并包含 .container 或 .container-fluid 以居中并填充导航栏内容。

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

需要 body 内边距

固定导航栏会覆盖您的其他内容，除非您在 <body> 底部添加 padding。尝试使用您自己的值或使用下面的代码片段。提示：默认情况下，导航栏高 50px。

body { padding-bottom: 70px; }

确保在核心 Bootstrap CSS 之后包含此代码。

通过添加 .navbar-static-top 并包含 .container 或 .container-fluid 来创建一个全宽导航栏，它会随着页面滚动而滚动。

与 .navbar-fixed-* 类不同，您不需要更改 body 上的任何内边距。

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

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

<nav class="navbar navbar-inverse">
  ...
</nav>

面包屑导航

在导航层次结构中指示当前页面的位置。

分隔符通过 CSS 中的 :before 和 content 自动添加。

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">图书馆</a></li>
  <li class="active">数据</li>
</ol>

分页

使用多页分页组件或更简单的分页器替代方案为您的网站或应用提供分页链接。

默认分页

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

为分页组件添加标签

分页组件应该包装在 <nav> 元素中，以便屏幕阅读器和其他辅助技术将其识别为导航部分。此外，由于页面可能已经有多个这样的导航部分（例如标题中的主导航或侧边栏导航），建议为 <nav> 提供描述性的 aria-label 以反映其用途。例如，如果分页组件用于在一组搜索结果之间导航，适当的标签可以是 aria-label="Search results pages"。

禁用和活动状态

链接可以根据不同情况进行自定义。使用 .disabled 表示不可点击的链接，使用 .active 表示当前页面。

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

我们建议您将活动或禁用的锚点替换为 <span>，或者在前后箭头的情况下省略锚点，以移除点击功能同时保留预期样式。

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

尺寸

想要更大或更小的分页？添加 .pagination-lg 或 .pagination-sm 以获得额外的尺寸。

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

分页器

使用轻量级标记和样式实现简单分页的快速前后链接。非常适合博客或杂志等简单网站。

默认示例

默认情况下，分页器将链接居中。

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

对齐链接

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

可选的禁用状态

分页器链接也使用分页中的通用 .disabled 实用类。

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

示例

示例标题新

<h3>示例标题 <span class="label label-default">新</span></h3>

可用变体

添加以下任何修饰符类来更改标签的外观。

默认主要成功信息警告危险

<span class="label label-default">默认</span>
<span class="label label-primary">主要</span>
<span class="label label-success">成功</span>
<span class="label label-info">信息</span>
<span class="label label-warning">警告</span>
<span class="label label-danger">危险</span>

有很多标签？

当您在狭窄的容器中有几十个内联标签，每个标签都包含自己的 inline-block 元素（如图标）时，可能会出现渲染问题。解决方法是设置 display: inline-block;。有关上下文和示例，请参阅 #13219。

通过向链接、Bootstrap 导航等元素添加 <span class="badge"> 来轻松突出显示新的或未读的项目。

收件箱 42

<a href="#">收件箱 <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  消息 <span class="badge">4</span>
</button>

自动折叠

当没有新的或未读的项目时，如果徽章内容为空，它会自动折叠（通过 CSS 的 :empty 选择器）。

跨浏览器兼容性

徽章在 Internet Explorer 8 中不会自动折叠，因为它不支持 :empty 选择器。

适配活动导航状态

内置样式包含了在胶囊式导航的活动状态中放置徽章的样式。

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">首页 <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">个人资料</a></li>
  <li role="presentation"><a href="#">消息 <span class="badge">3</span></a></li>
</ul>

一个轻量级、灵活的组件，可以选择扩展整个视口以展示您网站上的关键内容。

你好，世界！

这是一个简单的英雄单元，一个简单的巨幕风格组件，用于特别突出显示特色内容或信息。

了解更多

<div class="jumbotron">
  <h1>你好，世界！</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
</div>

要使巨幕全宽且没有圆角，请将其放在所有 .container 之外，而是在内部添加一个 .container。

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

一个简单的容器，用于 h1 元素，以便在页面上适当分隔和分段内容。它可以使用 h1 的默认 small 元素，以及大多数其他组件（带有额外样式）。

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

使用缩略图组件扩展 Bootstrap 的网格系统，轻松显示图像、视频、文本等内容的网格。

如果您正在寻找类似 Pinterest 的展示方式，用于显示不同高度和/或宽度的缩略图，您需要使用第三方插件，如 Masonry、Isotope 或 Salvattore。

默认示例

默认情况下，Bootstrap 的缩略图设计用于展示链接图像，所需标记最少。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

自定义内容

通过添加一些额外的标记，可以在缩略图中添加任何类型的 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.

按钮按钮

缩略图标签

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.

按钮按钮

缩略图标签

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.

按钮按钮

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

使用几种可用的灵活警告消息为典型用户操作提供上下文反馈。

示例

将任何文本和可选的关闭按钮包装在 .alert 和四个上下文类之一（例如，.alert-success）中，以创建基本警告消息。

无默认类

警告框没有默认类，只有基础和修饰类。默认的灰色警告框没有太大意义，因此您需要通过上下文类指定类型。选择 success、info、warning 或 danger。

做得好！ 您成功阅读了这条重要的警告消息。

注意！ 此警告需要您的注意，但不是特别重要。

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

哦，糟糕！ 更改一些内容并重试提交。

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

可关闭的警告框

通过添加可选的 .alert-dismissible 和关闭按钮来构建任何警告框。

需要 JavaScript 警告框插件

要使用完全功能的可关闭警告框，您必须使用警告框 JavaScript 插件。

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

确保在所有设备上的正确行为

请确保使用带有 data-dismiss="alert" 数据属性的 <button> 元素。

警告框中的链接

使用 .alert-link 实用类在任何警告框中快速提供匹配颜色的链接。

做得好！ 您成功阅读了这条重要的警告消息。

注意！ 此警告需要您的注意，但不是特别重要。

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

哦，糟糕！ 更改一些内容并重试提交。

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

使用简单而灵活的进度条为工作流或操作的进度提供实时反馈。

跨浏览器兼容性

进度条使用 CSS3 过渡和动画来实现某些效果。这些功能在 Internet Explorer 9 及以下版本或旧版 Firefox 中不受支持。Opera 12 不支持动画。

内容安全策略 (CSP) 兼容性

如果您的网站有内容安全策略 (CSP)，不允许 style-src 'unsafe-inline'，那么您将无法使用内联 style 属性来设置进度条宽度，如下面的示例所示。与严格的 CSP 兼容的设置宽度的替代方法包括使用一点自定义 JavaScript（设置 element.style.width）或使用自定义 CSS 类。

基本示例

默认进度条。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

带标签的进度条

从进度条中移除带有 .sr-only 类的 <span> 以显示可见的百分比。

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

为确保标签文本即使在低百分比时也保持清晰可读，考虑为进度条添加 min-width。

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

上下文变体

进度条使用一些与按钮和警告相同的类来保持样式一致。

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

条纹进度条

使用渐变创建条纹效果。在 IE9 及以下版本中不可用。

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

动画进度条

向 .progress-bar-striped 添加 .active 以从右到左为条纹添加动画效果。在 IE9 及以下版本中不可用。

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

堆叠进度条

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

抽象对象样式，用于构建各种类型的组件（如博客评论、推文等），这些组件的特点是在文本内容旁边显示左对齐或右对齐的图像。

默认媒体

默认媒体在内容块的左侧或右侧显示媒体对象（图像、视频、音频）。

媒体标题

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

媒体标题

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

嵌套媒体标题

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

媒体标题

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.

媒体标题

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.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">媒体标题</h4>
    ...
  </div>
</div>

类 .pull-left 和 .pull-right 也存在，并且以前曾作为媒体组件的一部分使用，但从 v3.3.0 开始已弃用该用途。它们大致相当于 .media-left 和 .media-right，只是 .media-right 应该放在 HTML 中的 .media-body 之后。

媒体对齐

图像或其他媒体可以顶部、中间或底部对齐。默认是顶部对齐。

顶部对齐媒体

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

中间对齐媒体

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

底部对齐媒体

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">中间对齐媒体</h4>
    ...
  </div>
</div>

媒体列表

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

媒体标题

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.

嵌套媒体标题
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.

嵌套媒体标题
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.

嵌套媒体标题
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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      ...
    </div>
  </li>
</ul>

列表组是一个灵活而强大的组件，不仅可以显示简单的元素列表，还可以显示带有自定义内容的复杂列表。

基本示例

最基本的列表组只是一个带有列表项和适当类的无序列表。根据需要使用后续选项或自己的 CSS 对其进行扩展。

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

徽章

向任何列表组项添加徽章组件，它将自动定位在右侧。

14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

链接项

通过使用锚标签而不是列表项来创建可点击的列表组项（这也意味着使用父 <div> 而不是 <ul>）。不需要在每个元素周围使用单独的父元素。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

按钮项

列表组项可以是按钮而不是列表项（这也意味着使用父 <div> 而不是 <ul>）。不需要在每个元素周围使用单独的父元素。不要在此处使用标准的 .btn 类。

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

禁用的项

向 .list-group-item 添加 .disabled 使其变灰以显示为禁用状态。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

上下文类

使用上下文类来设置列表项的样式，无论是默认的还是链接的。还包括 .active 状态。

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

自定义内容

可以在其中添加几乎任何 HTML，甚至是如下所示的链接列表组。

列表组项标题

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

列表组项标题

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

列表组项标题

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">列表组项标题</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

虽然并非总是必要，但有时您需要将 DOM 内容放在一个盒子里。对于这些情况，请尝试使用面板组件。

基本示例

默认情况下，.panel 只是应用一些基本的边框和内边距来容纳内容。

基本面板示例

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

带标题的面板

使用 .panel-heading 轻松向面板添加标题容器。您还可以包含任何带有 .panel-title 类的 <h1>-<h6> 来添加预样式化的标题。但是，<h1>-<h6> 的字体大小会被 .panel-heading 覆盖。

为了获得正确的链接颜色，请确保将链接放在 .panel-title 内的标题中。

无标题的面板标题

面板内容

面板标题

面板内容

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

带页脚的面板

将按钮或次要文本包装在 .panel-footer 中。请注意，当使用上下文变体时，面板页脚不会继承颜色和边框，因为它们不应该在前景中。

面板内容

面板页脚

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

上下文变体

与其他组件一样，通过添加任何上下文状态类，可以轻松使面板对特定上下文更有意义。

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

面板标题

面板内容

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

带表格的面板

在面板中添加任何无边框的 .table 以获得无缝设计。如果有 .panel-body，我们会在表格顶部添加一个额外的边框以进行分隔。

面板标题

这里是一些默认的面板内容。Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

如果没有面板主体，组件会从面板标题直接过渡到表格，没有中断。

面板标题

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

带列表组的面板

轻松在任何面板中包含全宽的列表组。

面板标题

这里是一些默认的面板内容。Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

通过创建一个内在比例，让浏览器根据其包含块的宽度来确定视频或幻灯片的尺寸，以便在任何设备上正确缩放。

规则直接应用于 <iframe>、<embed>、<video> 和 <object> 元素；当您想要匹配其他属性的样式时，可选择使用显式的子元素类 .embed-responsive-item。

专业提示！ 您不需要在 <iframe> 中包含 frameborder="0"，因为我们会为您覆盖它。

<!-- 16:9 宽高比 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 宽高比 -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

默认 well

使用 well 作为元素上的简单效果，为其提供内嵌效果。

看，我在 well 里！

<div class="well">...</div>

可选类

使用两个可选的修饰类来控制内边距和圆角。

看，我在一个大 well 里！

<div class="well well-lg">...</div>

看，我在一个小 well 里！

<div class="well well-sm">...</div>

组件

图标

可用图标

使用方法

不要与其他组件混合使用

仅用于空元素

更改图标字体位置

可访问的图标

示例

下拉菜单

示例

对齐

可能需要额外定位

已弃用的 .pull-right 对齐

标题

分隔线

禁用的菜单项

按钮组

按钮组中的工具提示和弹出框需要特殊设置

确保正确的 role 并提供标签

基本示例

按钮工具栏

尺寸

嵌套

垂直变体

两端对齐的按钮组

处理边框

IE8 和边框

使用 <a> 元素

作为按钮的链接

使用 <button> 元素

按钮下拉菜单

插件依赖

单按钮下拉菜单

分裂式按钮下拉菜单

尺寸

上拉菜单变体

输入组

仅支持文本 <input>

输入组中的工具提示和弹出框需要特殊设置

不要与其他组件混合使用

始终添加标签

基本示例

尺寸

复选框和单选按钮附加组件

按钮附加组件

带下拉菜单的按钮

分段按钮

多个按钮

导航

使用导航作为选项卡面板需要 JavaScript 选项卡插件

确保用作导航的组件可访问

选项卡

胶囊式导航

两端对齐导航

Safari 和响应式两端对齐导航

禁用的链接

链接功能不受影响

使用下拉菜单

带下拉菜单的选项卡

带下拉菜单的胶囊式导航

导航栏

默认导航栏

溢出内容

需要 JavaScript 插件

更改折叠移动导航栏断点

使导航栏可访问

品牌图像

表单

移动设备注意事项

始终添加标签

按钮

上下文特定用法

文本

非导航链接

组件对齐

右对齐多个组件

固定在顶部

需要 body 内边距

固定在底部

已弃用的 `.pull-right` 对齐

确保正确的 `role` 并提供标签

使用 `<a>` 元素

使用 `<button>` 元素

仅支持文本 `<input>`

示例标题新

示例标题新

示例标题新

示例标题新

示例标题新

示例标题新

示例页面标题标题副标题