可用字形

包括来自 Glyphicon Halflings 集的超过 250 个字体格式的字形。Glyphicons半身人通常不是免费提供的，但它们的创建者已将它们免费提供给 Bootstrap。为了感谢您，我们只要求您尽可能提供返回Glyphicons的链接。

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-信封
glyphicon glyphicon-铅笔
glyphicon glyphicon-glass
glyphicon glyphicon-音乐
glyphicon glyphicon-search
glyphicon glyphicon-心脏
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 文件
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-下载-alt
glyphicon glyphicon-下载
glyphicon glyphicon-上传
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-刷新
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-耳机
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-书签
glyphicon glyphicon-print
glyphicon glyphicon 相机
glyphicon glyphicon-字体
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-文本高度
glyphicon glyphicon-文本宽度
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-视频
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-暂停
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon 快进
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-负号
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-问号
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-睁眼
glyphicon glyphicon-eye-close
glyphicon glyphicon 警告标志
glyphicon glyphicon-plane
glyphicon glyphicon-日历
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-磁铁
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-购物车
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-扩音器
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-扳手
glyphicon glyphicon-tasks
glyphicon glyphicon 过滤器
glyphicon glyphicon-公文包
glyphicon glyphicon-全屏
glyphicon glyphicon-dashboard
glyphicon glyphicon-回形针
glyphicon glyphicon-heart-empty
glyphicon glyphicon-link
glyphicon 字形电话
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon 按字母排序
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-login
glyphicon glyphicon-flash
glyphicon glyphicon-注销
glyphicon glyphicon-新窗口
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-已保存
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-软盘
glyphicon glyphicon-软盘保存
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-软盘保存
glyphicon glyphicon-floppy-open
glyphicon glyphicon-信用卡
glyphicon glyphicon转移
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-耳机
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-视频
glyphicon glyphicon-高清视频
glyphicon glyphicon-字幕
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-下载
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-落叶
glyphicon glyphicon-cd
glyphicon glyphicon-保存文件
glyphicon glyphicon-打开文件
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-婴儿配方
字形字形内容
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-苹果
字形字形擦除
glyphicon glyphicon-沙漏
glyphicon glyphicon-灯
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-比特币
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-卢布
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-冰棒
glyphicon glyphicon-冰棒口味
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 太阳镜
glyphicon glyphicon-文本大小
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 控制台
glyphicon glyphicon-上标
glyphicon glyphicon-下标
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

如何使用

出于性能原因，所有图标都需要一个基类和单独的图标类。要使用，请将以下代码放在几乎任何地方。请务必在图标和文本之间留出空格以进行适当的填充。

不要与其他成分混合

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

仅用于空元素

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

更改图标字体位置

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

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

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

可访问的图标

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

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

如果您要创建没有其他文本的控件（例如<button>仅包含图标的 a），则应始终提供替代内容来识别控件的用途，以便对辅助技术用户有意义。在这种情况下，您可以aria-label在控件本身上添加一个属性。

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

例子

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <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> Star
</button>

警报中使用的图标，用于传达这是一条错误消息，并带有附加.sr-only文本以将此提示传达给辅助技术的用户。

输入一个有效的电子邮件地址

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</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">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</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">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

结盟

默认情况下，下拉菜单会自动 100% 定位在其父级的顶部和左侧。添加.dropdown-menu-right到.dropdown-menu右对齐下拉菜单。

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

标头

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

分频器

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

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

禁用的菜单项

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

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

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

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

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

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

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

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

基本示例

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</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-*到 each .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>

嵌套

当您希望下拉菜单与一系列按钮混合时，将 a.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">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

垂直变化

使一组按钮看起来垂直堆叠而不是水平堆叠。此处不支持拆分按钮下拉菜单。

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

对齐的按钮组

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

处理边界

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

IE8 和边框

Internet Explorer 8 不会在对齐的按钮组中的按钮上呈现边框，无论是打开<a>还是<button>元素。为了解决这个问题，将每个按钮包装在另一个.btn-group.

有关详细信息，请参阅#12476。

有`<a>`元素

只需将一系列.btns 包裹在.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">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

插件依赖

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

单按钮下拉菜单

通过一些基本的标记更改将按钮变成下拉切换。

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

拆分按钮下拉菜单

同样，创建具有相同标记更改的拆分按钮下拉菜单，仅使用单独的按钮。

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</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">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

浆纱

按钮下拉菜单适用于各种尺寸的按钮。

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

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

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

下拉变化

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

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</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">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

通过在任何基于文本的<input>. .input-group与.input-group-addonor一起使用.input-group-btn可将元素添加到单个.form-control.

`<input>`仅限文本

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

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

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

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

不要与其他成分混合

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

始终添加标签

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

要使用的确切技术（可见<label>元素、使用类<label>隐藏的元素或使用、、或属性）以及需要传达的其他信息将根据您正在实现的界面小部件的确切类型而有所不同。本节中的示例提供了一些建议的、特定于案例的方法。.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

基本示例

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

我们不支持单面的多个附加组件 (.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="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" 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="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity 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="Username" 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="Username" 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="Username" 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-addon，您需要使用.input-group-btn来包装按钮。由于无法覆盖默认浏览器样式，因此这是必需的。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</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">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</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">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

分段按钮

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </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">
    <!-- Button and dropdown menu -->
  </div>
</div>

多个按钮

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

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </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">
    <!-- Buttons -->
  </div>
</div>

Bootstrap 中可用的导航具有共享标记，从基.nav类开始，以及共享状态。交换修饰符类以在每种样式之间切换。

将导航用于选项卡面板需要 JavaScript 选项卡插件

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

使用作导航的导航可访问

如果您使用 navs 提供导航栏，请务必将 a 添加role="navigation"到最符合逻辑的父容器中，或者在整个导航周围<ul>包裹一个元素。<nav>不要将角色添加到<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>

有正当理由

使用.nav-justified. 在较小的屏幕上，导航链接是堆叠的。

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

Safari 和响应式合理导航

从 v9.1.2 开始，Safari 存在一个错误，在该错误中，水平调整浏览器的大小会导致对齐导航中的呈现错误，刷新时会清除这些错误。这个错误也显示在合理的导航示例中。

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

禁用的链接

对于任何导航组件（选项卡或药丸），添加.disabled灰色链接和无悬停效果。

链接功能不受影响

这个类只会改变<a>'s 的外观，而不是它的功能。在此处使用自定义 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">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</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="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

将表单内容放置在.navbar-form其中，以便在狭窄的视口中进行正确的垂直对齐和折叠行为。使用对齐选项来决定它在导航栏内容中的位置。

作为提醒，它与via mixin.navbar-form共享其大部分代码。某些表单控件（如输入组）可能需要固定宽度才能在导航栏中正确显示。.form-inline

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

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

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

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

.pull-left这些类是and的混合版本.pull-right，但它们的范围仅限于媒体查询，以便更轻松地处理跨设备大小的导航栏组件。

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

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

需要身体填充物

固定导航栏将覆盖您的其他内容，除非您添加padding到<body>. 尝试您自己的价值观或使用我们下面的代码段。提示：默认情况下，导航栏的高度为 50px。

body { padding-top: 70px; }

确保在核心 Bootstrap CSS之后包含它。

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

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

需要身体填充物

固定导航栏将覆盖您的其他内容，除非您添加padding到<body>. 尝试您自己的价值观或使用我们下面的代码段。提示：默认情况下，导航栏的高度为 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>

面包屑

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

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

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</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>元素中，以将其标识为屏幕阅读器和其他辅助技术的导航部分。此外，由于页面可能已经有多个这样的导航部分（例如标题中的主导航或侧边栏导航），因此建议提供反映其目的的aria-label描述<nav>。例如，如果分页组件用于在一组搜索结果之间导航，则适当的标签可以是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>Example heading <span class="label label-default">New</span></h3>

可用的变体

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

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

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

有很多标签吗？

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

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

收件箱42

<a href="#">Inbox <span class="badge">42</span></a>

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

自塌陷

当没有新的或未读的项目时，如果其中:empty不存在任何内容，则徽章将简单地折叠（通过 CSS 的选择器）。

跨浏览器兼容性

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

适应活跃的导航状态

内置样式用于在药丸导航中将徽章置于活动状态。

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

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

你好世界！

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

学到更多

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

要使 jumbotron 全宽且没有圆角，请将其放在所有.containers 之外，而不是在其中添加一个.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 在 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。

按钮按钮

<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

没有默认类

警报没有默认类，只有基类和修饰类。默认的灰色警报没有太大意义，因此您需要通过上下文类指定类型。从成功、信息、警告或危险中进行选择。

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

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

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

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

<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 属性的<button>元素。data-dismiss="alert"

警报中的链接

使用.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>

带标签

从进度条中删除<span>with.sr-only类以显示可见百分比。

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>

动画

添加.active到.progress-bar-striped从右到左为条纹设置动画。在 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 坐在 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。

媒体标题

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。

嵌套媒体标题

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。

媒体标题

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。

<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">Media heading</h4>
    ...
  </div>
</div>

这些类.pull-left和.pull-right也存在并且以前用作媒体组件的一部分，但从 v3.3.0 开始不推荐使用。它们大致相当于.media-leftand .media-right，除了.media-right应该放在.media-bodyhtml 之后。

媒体对齐

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

顶部对齐的媒体

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。

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 坐在 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。

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 坐在 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。

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">Middle aligned media</h4>
    ...
  </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。

<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">Media heading</h4>
      ...
    </div>
  </li>
</ul>

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

基本示例

最基本的列表组只是一个带有列表项和适当类的无序列表。根据需要使用以下选项或您自己的 CSS 构建它。

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
爱神前庭

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

徽章

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

14Cras justo odio
2Dapibus ac facilisis in
1Morbi 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 爱神前庭

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

残障物品

添加.disabled到 a.list-group-item以将其变灰以显示为禁用。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac 爱神前庭

<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
爱神前庭

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac 爱神前庭

<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 在 eget metus。Maecenas sed diam eget risus varius blandit。

列出组项目标题

Donec id elit non mi porta gravida 在 eget metus。Maecenas sed diam eget risus varius blandit。

列出组项目标题

Donec id elit non mi porta gravida 在 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">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。您还可以包含 any <h1>-<h6>与一个.panel-title类以添加预先设置的标题。<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，一个 pharetra augue。Aenean lacinia bibendum nulla sed consectetur。Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis 前庭。Nullam id dolor id nibh ultricies vehicula ut id elit。

#	名	姓	用户名
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里	鸟	@推特

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

如果没有面板主体，则组件会从面板标题移动到表格而不会中断。

面板标题

#	名	姓	用户名
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里	鸟	@推特

<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，一个 pharetra augue。Aenean lacinia bibendum nulla sed consectetur。Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis 前庭。Nullam id dolor id nibh ultricies vehicula ut id elit。

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
爱神前庭

<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当您想要匹配其他属性的样式时，可以选择使用显式后代类。

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

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

默认井

将井用作元素上的简单效果以赋予其嵌入效果。

看，我在井里！

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

选修课

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

看，我在一个大井里！

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

看，我在一个小井里！

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

成分

字形

可用字形

如何使用

不要与其他成分混合

仅用于空元素

更改图标字体位置

可访问的图标

例子

下拉菜单

例子

结盟

可能需要额外的定位

不推荐使用的.pull-right对齐方式

标头

分频器

禁用的菜单项

按钮组

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

确保正确role并提供标签

基本示例

按钮工具栏

浆纱

嵌套

垂直变化

对齐的按钮组

处理边界

IE8 和边框

有<a>元素

充当按钮的链接

有<button>元素

按钮下拉菜单

插件依赖

单按钮下拉菜单

拆分按钮下拉菜单

浆纱

下拉变化

输入组

<input>仅限文本

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

不要与其他成分混合

始终添加标签

基本示例

浆纱

复选框和收音机插件

按钮插件

带有下拉菜单的按钮

分段按钮

多个按钮

导航

将导航用于选项卡面板需要 JavaScript 选项卡插件

使用作导航的导航可访问

标签

药丸

有正当理由

Safari 和响应式合理导航

禁用的链接

链接功能不受影响

使用下拉菜单

带有下拉菜单的选项卡

带有下拉菜单的药丸

导航栏

默认导航栏

内容溢出

需要 JavaScript 插件

更改折叠的移动导航栏断点

使导航栏可访问

品牌形象

形式

移动设备注意事项

始终添加标签

纽扣

特定于上下文的用法

文本

非导航链接

组件对齐

右对齐多个组件

固定在顶部

需要身体填充物

固定在底部

不推荐使用的`.pull-right`对齐方式

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

有`<a>`元素

有`<button>`元素

`<input>`仅限文本

示例页眉标题的子文本