可用字形

包括來自 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-信封
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-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-暫停
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>

導航欄是響應式元組件，可用作應用程序或站點的導航標題。它們在移動視圖中開始折疊（並且可以切換）並隨著可用視口寬度的增加而變為水平。

當前不支持對齊的導航欄導航鏈接。

內容溢出

由於 Bootstrap 不知道導航欄中的內容需要多少空間，因此您可能會遇到將內容包裝到第二行的問題。要解決此問題，您可以：

減少導航欄項目的數量或寬度。
使用響應式實用程序類在某些屏幕尺寸下隱藏某些導航欄項目。
更改導航欄在折疊模式和水平模式之間切換的點。自定義@grid-float-breakpoint變量或添加您自己的媒體查詢。

<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>`僅限文本

示例頁眉標題的子文本