Glyphicons 字體圖標

所有可用的圖標

包括250多個來自 Glyphicon Halflings 的字體圖標。Glyphicons Halflings 一般是收費的,但是他們的作者允許 Bootstrap 免費使用。為了表示感謝,希望你在使用時盡量為 Glyphicons 添加一個友情鏈接。

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

如何使用

出于性能的考慮,所有圖標都需要一個基類和對應每個圖標的類。把下面的代碼放在任何地方都可以正常使用。注意,為了設置正確的內補(padding),務必在圖標和文本之間添加一個空格。

不要和其他組件混合使用

圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的 <span> 標簽,并將圖標類應用到這個 <span> 標簽上。

只對內容為空的元素起作用

圖標類只能應用在不包含任何文本內容或子元素的元素上。

改變圖標字體文件的位置

Bootstrap 假定所有的圖標字體文件全部位于 ../fonts/ 目錄內,相對于預編譯版 CSS 文件的目錄。如果你修改了圖標字體文件的位置,那么,你需要通過下面列出的任何一種方式來更新 CSS 文件:

  • 在 Less 源碼文件中修改 @icon-font-path 和/或 @icon-font-name 變量。
  • 利用 Less 編譯器提供的 相對 URL 地址選項
  • 修改預編譯 CSS 文件中的 url() 地址。

根據你自身的情況選擇一種方式即可。

圖標的可訪問性

現代的輔助技術能夠識別并朗讀由 CSS 生成的內容和特定的 Unicode 字符。為了避免 屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容(尤其是當圖標純粹作為裝飾用途時),我們為這些圖標設置了 aria-hidden="true" 屬性。

如果你使用圖標是為了表達某些含義(不僅僅是為了裝飾用),請確保你所要表達的意思能夠通過被輔助設備識別,例如,包含額外的內容并通過 .sr-only 類讓其在視覺上表現出隱藏的效果。

如果你所創建的組件不包含任何文本內容(例如, <button> 內只包含了一個圖標),你應當提供其他的內容來表示這個控件的意圖,這樣就能讓使用輔助設備的用戶知道其作用了。這種情況下,你可以為控件添加 aria-label 屬性。

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

實例

可以把它們應用到按鈕、工具條中的按鈕組、導航或輸入框等地方。

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

alert 組件中所包含的圖標是用來表示這是一條錯誤消息的,通過添加額外的 .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>

B默認情況下,下拉菜單自動沿著父元素的上沿和左側被定位為 100% 寬度。 為 .dropdown-menu 添加 .dropdown-menu-right 類可以讓菜單右對齊。

可能需要額外的定位May require additional positioning

在正常的文檔流中,通過 CSS 為下拉菜單進行定位。這就意味著下拉菜單可能會由于設置了 overflow 屬性的父元素而被部分遮擋或超出視口(viewport)的顯示范圍。如果出現這種問題,請自行解決。

不建議使用 .pull-right

從 v3.1.0 版本開始,我們不再建議對下拉菜單使用 .pull-right 類。如需將菜單右對齊,請使用 .dropdown-menu-right 類。導航條中如需添加右對齊的導航(nav)組件,請使用 .pull-right 的 mixin 版本,可以自動對齊菜單。如需左對齊,請使用 .dropdown-menu-left 類。

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

為下拉菜單中的 <li> 元素添加 .disabled 類,從而禁用相應的菜單項。

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

按鈕組

通過按鈕組容器把一組按鈕放在同一行里。通過與按鈕插件聯合使用,可以設置為單選框或多選框的樣式和行為。

按鈕組中的工具提示和彈出框需要特別的設置

當為 .btn-group 中的元素應用工具提示或彈出框時,必須指定 container: 'body' 選項,這樣可以避免不必要的副作用(例如工具提示或彈出框觸發時,會讓頁面元素變寬和/或失去圓角)。

確保設置正確的 role 屬性并提供一個 label 標簽

為了向使用輔助技術 - 如屏幕閱讀器 - 的用戶正確傳達一正確的按鈕分組,需要提供一個合適的 role 屬性。對于按鈕組合,應該是 role="group",對于toolbar(工具欄)應該是 role="toolbar"

一個例外是按鈕組合只包含一個單一的控制元素或一個下拉菜單(比如實際情況,<button> 元素組成的兩端對齊排列的按鈕組 )或下拉菜單。

此外,按鈕組和工具欄應給定一個明確的label標簽,盡管設置了正確的 role 屬性,但是大多數輔助技術將不會正確的識讀他們。在這里提供的實例中,我們使用 aria-label,但是, aria-labelledby 也可以使用。

基本實例

Wrap a series of buttons with .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 加上 .btn-group-* 類,就省去為按鈕組中的每個按鈕都賦予尺寸類了,如果包含了多個按鈕組時也適用。




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

嵌套

想要把下拉菜單混合到一系列按鈕中,只須把 .btn-group 放入另一個 .btn-group 中。

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

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      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>

兩端對齊排列的按鈕組

讓一組按鈕拉長為相同的尺寸,填滿父元素的寬度。對于按鈕組中的按鈕式下拉菜單也同樣適用。

關于邊框的處理

由于對兩端對齊的按鈕組使用了特定的 HTML 和 CSS (即 display: table-cell),兩個按鈕之間的邊框疊加在了一起。在普通的按鈕組中,margin-left: -1px 用于將邊框重疊,而沒有刪除任何一個按鈕的邊框。然而,margin 屬性不支持 display: table-cell。因此,根據你對 Bootstrap 的定制,你可以刪除或重新為按鈕的邊框設置顏色。

IE8 和邊框

Internet Explorer 8 不支持在兩端對齊的按鈕組中繪制邊框,無論是 <a><button> 元素。為了照顧 IE8,把每個按鈕放入另一個 .btn-group 中即可。

參見 #12476 獲取詳細信息。

關于 <a> 元素

只須將一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。

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

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

關于 <button> 元素

為了將 <button> 元素用于兩端對齊的按鈕組中,必須將每個按鈕包裹進一個按鈕組中you must wrap each button in a button group。大部分的瀏覽器不能將我們的 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 中,然后加入適當的菜單標簽,就可以讓按鈕作為菜單的觸發器了。

插件依賴

按鈕式下拉菜單依賴下拉菜單插件 ,因此需要將此插件包含在你所使用的 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-addon.input-group-btn 類,可以給 .form-control 的前面或后面添加額外的元素。

只支持文本輸入框 <input>

這里請避免使用 <select> 元素,因為 WebKit 瀏覽器不能完全繪制它的樣式。

避免使用 <textarea> 元素,由于它們的 rows 屬性在某些情況下不被支持。

輸入框組中的工具提示和彈出框需要特別的設置

.input-group 中所包含的元素應用工具提示(tooltip)或popover(彈出框)時,必須設置 container: 'body' 參數,為的是避免意外的副作用(例如,工具提示或彈出框被激活后,可能會讓當前元素變得更寬或/和變得失去其圓角)。

不要和其他組件混用

不要將表單組或柵格列(column)類直接和輸入框組混合使用。而是將輸入框組嵌套到表單組或柵格相關元素的內部。

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

The exact technique to be used (visible <label> elements, <label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.

基本實例

在輸入框的任意一側添加額外元素或按鈕。你還可以在輸入框的兩側同時添加額外元素。

我們不支持在輸入框的單獨一側添加多個額外元素(.input-group-addon.input-group-btn)。

我們不支持在單個輸入框組中添加多個表單控件。

@

@example.com

$ .00

https://example.com/users/
<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>

Multiple buttons

While you can only have one add-on per side, you can have multiple buttons inside a single .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 屬性 – 詳細信息請參考該插件的 實例

確保導航組件的可訪問性

如果你在使用導航組件實現導航條功能,務必在 <ul> 的最外側的邏輯父元素上添加 role="navigation" 屬性,或者用一個 <nav> 元素包裹整個導航組件。不要將 role 屬性添加到 <ul> 上,因為這樣可以被輔助設備(殘疾人用的)上被識別為一個真正的列表。

注意 .nav-tabs 類依賴 .nav 基類。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

HTML 標記相同,但使用 .nav-pills 類:

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

膠囊是標簽頁也是可以垂直方向堆疊排列的。只需添加 .nav-stacked 類。

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

在大于 768px 的屏幕上,通過 .nav-justified 類可以很容易的讓標簽頁或膠囊式標簽呈現出同等寬度。在小屏幕上,導航鏈接呈現堆疊樣式。

兩端對齊的導航條導航鏈接已經被棄用了。

Safari 和響應式兩端對齊導航

從 v9.1.2 版本開始,Safari 有一個bug:對于兩端對齊的導航,水平改變瀏覽器大小將引起繪制錯誤。此bug可以在兩端對齊的導航實例中得到重現。

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

對任何導航組件(標簽頁、膠囊式標簽頁),都可以添加 .disabled 類,從而實現鏈接為灰色且沒有鼠標懸停效果

鏈接功能不受到影響

這個類只改變 <a> 的外觀,不改變功能。可以自己寫 JavaScript 禁用這里的鏈接。

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

用一點點額外 HTML 代碼并加入下拉菜單插件的 JavaScript 插件即可。

帶下拉菜單的標簽頁

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

帶下拉菜單的膠囊式標簽頁

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

導航條

導航條是在您的應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊(并且可開可關),且在視口(viewport)寬度增加時逐漸變為水平展開模式。

兩端對齊的導航條導航鏈接已經被棄用了。

導航條內所包含元素溢出

由于 Bootstrap 并不知道你在導航條內放置的元素需要占據多寬的空間,你可能會遇到導航條中的內容折行的情況(也就是導航條占據兩行)。解決辦法如下:

  1. 減少導航條內所有元素所占據的寬度。
  2. 在某些尺寸的屏幕上(利用 響應式工具類)隱藏導航條內的一些元素。
  3. 修改導航條在水平排列和折疊排列互相轉化時,觸發這個轉化的最小屏幕寬度值。可以通過修改 @grid-float-breakpoint 變量實現,或者自己重寫相關的媒體查詢代碼,覆蓋 Bootstrap 的默認值。

依賴 JavaScript 插件

如果 JavaScript 被禁用,并且視口(viewport)足夠窄,致使導航條折疊起來,導航條將不能被打開,.navbar-collapse 內所包含的內容也將不可見。

響應式導航條依賴 collapse 插件,定制 Bootstrap 的話時候必將其包含。

修改視口的閾值,從而影響導航條的排列模式

當瀏覽器視口(viewport)的寬度小于 @grid-float-breakpoint 值時,導航條內部的元素變為折疊排列,也就是變現為移動設備展現模式;當瀏覽器視口(viewport)的寬度大于 @grid-float-breakpoint 值時,導航條內部的元素變為水平排列,也就是變現為非移動設備展現模式。通過調整源碼中的這個值,就可以控制導航條何時堆疊排列,何時水平排列。默認值是 768px (小屏幕 -- 或者說是平板 --的最小值,或者說是平板)。

導航條的可訪問性

務必使用 <nav> 元素,或者,如果使用的是通用的 <div> 元素的話,務必為導航條設置 role="navigation" 屬性,這樣能夠讓使用輔助設備的用戶明確知道這是一個導航區域。

<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 已經被設置了內補(padding)和高度(height),你需要根據自己的情況添加一些 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 之內可以呈現很好的垂直對齊,并在較窄的視口(viewport)中呈現折疊狀態。 使用對齊選項可以規定其在導航條上出現的位置。

注意,.navbar-form.form-inline 的大部分代碼都一樣,內部實現使用了 mixin。 某些表單組件,例如輸入框組,可能需要設置一個固定寬度,從而在導航條內有合適的展現。

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

移動設備上的注意事項

在移動設備上,對于在 fixed 定位的元素內使用表單控件的情況有一些注意事項。請參考我們提供的瀏覽器支持情況相關的文檔

為輸入框添加 label 標簽

如果你沒有為輸入框添加 label 標簽,屏幕閱讀器將會遇到問題。對于導航條內的表單,可以通過添加 .sr-only 類隱藏 label 標簽。

對于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn 后,可以讓它在導航條里垂直居中。有一些對于為輔助設備提供可識別標簽的方法,例如, aria-labelaria-labelledby 或者 title 屬性。如果這些方法都沒有,屏幕閱讀器將使用 placeholder 屬性(如果這個屬性存在的話),但是請注意,使用 placeholder 代替其他識別標簽的方式是不推薦的。

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

基于情境的用法

就像標準的 按鈕類 一樣,.navbar-btn 可以被用在 <a><input> 元素上。然而,在 .navbar-nav 內,.navbar-btn 和標準的按鈕類都不應該被用在 <a> 元素上。

把文本包裹在 .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.pull-right 的 mixin 版本,但是他們被限定在了媒體查詢(media query)中,這樣可以更容易的在各種尺寸的屏幕上處理導航條組件。

向右側對齊多個組件

導航條目前不支持多個 .navbar-right 類。為了讓內容之間有合適的空隙,我們為最后一個 .navbar-right 元素使用負邊距(margin)。如果有多個元素使用這個類,它們的邊距(margin)將不能按照你的預期正常展現。

我們將在 v4 版本中重寫這個組件時重新審視這個功能。

添加 .navbar-fixed-top 類可以讓導航條固定在頂部,還可包含一個 .container.container-fluid 容器,從而讓導航條居中,并在兩側添加內補(padding)。

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

需要為 body 元素設置內補(padding)

這個固定的導航條會遮住頁面上的其它內容,除非你給 <body> 元素底部設置了 padding。用你自己的值,或用下面給出的代碼都可以。提示:導航條的默認高度是 50px。

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

添加 .navbar-fixed-bottom 類可以讓導航條固定在底部,并且還可以包含一個 .container.container-fluid 容器,從而讓導航條居中,并在兩側添加內補(padding)。

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

需要為 body 元素設置內補(padding)

這個固定的導航條會遮住頁面上的其它內容,除非你給 <body> 元素底部設置了 padding。用你自己的值,或用下面給出的代碼都可以。提示:導航條的默認高度是 50px。

body { padding-bottom: 70px; }

Make sure to include this after the core Bootstrap CSS.

通過添加 .navbar-static-top 類即可創建一個與頁面等寬度的導航條,它會隨著頁面向下滾動而消失。還可以包含一個 .container.container-fluid 容器,用于將導航條居中對齊并在兩側添加內補(padding)。

.navbar-fixed-* 類不同的是,你不用給 body 添加任何內補(padding)。

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

通過添加 .navbar-inverse 類可以改變導航條的外觀。

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

路徑導航

在一個帶有層次的導航結構中標明當前頁面的位置。

各路徑間的分隔符已經自動通過 CSS 的 :beforecontent 屬性添加了。

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

Labelling the pagination component

The pagination component should be wrapped in a <nav> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive aria-label for the <nav> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be 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>

我們建議將 active 或 disabled 狀態的鏈接(即 <a> 標簽)替換為 <span> 標簽,或者在向前/向后的箭頭處省略<a> 標簽,這樣就可以讓其保持需要的樣式而不能被點擊。

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

標簽

實例

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h3>Example heading <span class="label label-default">New</span></h3>

可用的變體

用下面的任何一個類即可改變標簽的外觀。

Default Primary Success Info Warning Danger
<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 屬性的標簽全部放在一個較窄的容器元素內,在頁面上展示這些標簽就會出現問題,每個標簽就會有自己的一個 inline-block 元素(就像圖標一樣)。解決的辦法是為每個標簽都設置為 display: inline-block; 屬性。關于這個問題以及實例,請參考 #13219

徽章

給鏈接、導航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未讀的信息條目。

Inbox 42

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

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

Self collapsing

如果沒有新的或未讀的信息條目,也就是說不包含任何內容,徽章組件能夠自動隱藏(通過CSS的 :empty 選擇符實現) 。

跨瀏覽器兼容性

徽章組件在 Internet Explorer 8 瀏覽器中不會自動消失,因為 IE8 不支持 :empty 選擇符。

適配導航元素的激活狀態

Bootstrap 提供了內置的樣式,讓膠囊式導航內處于激活狀態的元素所包含的徽章展示相匹配的樣式。

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

巨幕

這是一個輕量、靈活的組件,它能延伸至整個瀏覽器視口來展示網站上的關鍵內容。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

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

如果需要讓巨幕組件的寬度與瀏覽器寬度一致并且沒有圓角,請把此組件放在所有 .container 元素的外面,并在組件內部添加一個 .container 元素。

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

頁頭

頁頭組件能夠為 h1 標簽增加適當的空間,并且與頁面的其他部分形成一定的分隔。它支持 h1 標簽內內嵌 small 元素的默認效果,還支持大部分其他組件(需要增加一些額外的樣式)。

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

縮略圖

通過縮略圖組件擴展 Bootstrap 的 柵格系統,可以很容易地展示柵格樣式的圖像、視頻、文本等內容。

如果你想實現一個類似 Pinterest 的頁面效果(不同高度和/寬度的縮略圖順序排列)的話,你需要使用一個第三方插件,比如 MasonryIsotopeSalvattore

默認樣式的實例

Boostrap 縮略圖的默認設計僅需最少的標簽就能展示帶鏈接的圖片。

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

自定義內容

添加一點點額外的標簽,就可以把任何類型的 HTML 內容,例如標題、段落或按鈕,加入縮略圖組件內。

Generic placeholder thumbnail

Thumbnail label

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

Button Button

Generic placeholder thumbnail

Thumbnail label

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

Button Button

Generic placeholder thumbnail

Thumbnail label

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

Button Button

<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 類是必須要設置的,另外我們還提供了有特殊意義的4個類(例如,.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 插件

如果需要為警告框組件提供關閉功能,請使用 jQuery 警告框插件

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

確保在所有設備上的正確行為

務必給 <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 的 transition 和 animation 屬性來完成一些特效。這些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中沒有被支持。Opera 12 不支持 animation 屬性。

Content Security Policy (CSP) compatibility

If your website has a Content Security Policy (CSP) which doesn't allow style-src 'unsafe-inline', then you won't be able to use inline style attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets element.style.width) or using custom CSS classes.

基本實例

默認樣式的進度條

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

帶有提示標簽的進度條

將設置了 .sr-only 類的 <span> 標簽從進度條組件中移除 類,從而讓當前進度顯示出來。

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

在展示很低的百分比時,如果需要讓文本提示能夠清晰可見,可以為進度條設置 min-width 屬性。

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

根據情境變化效果

進度條組件使用與按鈕和警告框相同的類,根據不同情境展現相應的效果。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<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 及更低版本不支持。

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

動畫效果

.progress-bar-striped 添加 .active 類,使其呈現出由右向左運動的動畫效果。IE9 及更低版本的瀏覽器不支持。

45% Complete
<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 中,使它們呈現堆疊的效果。

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<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>

媒體對象

這是一個抽象的樣式,用以構建不同類型的組件,這些組件都具有在文本內容的左或右側對齊的圖片(就像博客評論或 Twitter 消息等)。

默認樣式

默認樣式的媒體對象組件允許在一個內容塊的左邊或右邊展示一個多媒體內容(圖像、視頻、音頻)。

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

.pull-left.pull-right 這兩個類以前也曾經被用在了媒體組件上,但是,從 v3.3.0 版本開始,他們就不再被建議使用了。.media-left.media-right 替代了他們,不同之處是,在 html 結構中, .media-right 應當放在 .media-body 的后面。

對齊

圖片或其他媒體類型可以頂部、中部或底部對齊。默認是頂部對齊。

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

媒體對象列表

用一點點額外的標記,就能在列表內使用媒體對象組件(對評論或文章列表很有用)。

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

列表組

列表組是靈活又強大的組件,不僅能用于顯示一組簡單的元素,還能用于復雜的定制的內容。

基本實例

最簡單的列表組僅僅是一個帶有多個列表條目的無序列表,另外還需要設置適當的類。我們提供了一些預定義的樣式,你可以根據自身的需求通過 CSS 自己定制。

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

徽章

給列表組加入徽章組件,它會自動被放在右邊。

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

鏈接

<a> 標簽代替 <li> 標簽可以組成一個全部是鏈接的列表組(還要注意的是,我們需要將 <ul> 標簽替換為 <div> 標簽)。沒必要給列表組中的每個元素都加一個父元素。

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

按鈕

列表組中的元素也可以直接就是按鈕(也同時意味著父元素必須是 <div> 而不能用 <ul> 了),并且無需為每個按鈕單獨包裹一個父元素。注意不要使用標準的 .btn 類!

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

被禁用的條目

.list-group-item 添加 .disabled 類可以讓單個條目顯示為灰色,表現出被禁用的效果。

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

情境類

為列表中的條目添加情境類,默認樣式或鏈接列表都可以。還可以為列表中的條目設置 .active 狀態。

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
<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 內容,甚至是像下面的帶鏈接的列表組。

<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 組件所做的只是設置基本的邊框(border)和內補(padding)來包含內容。

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

帶標題的面版

通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過添加設置了 .panel-title 類的 <h1>-<h6> 標簽,添加一個預定義樣式的標題。不過,<h1>-<h6> 標簽的字體大小將被 .panel-heading 的樣式所覆蓋。

為了給鏈接設置合適的顏色,務必將鏈接放到帶有 .panel-title 類的標題標簽內。

Panel heading without title
Panel content

Panel title

Panel content
<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 容器內。注意面版的腳注不會從情境效果中繼承顏色,因為他們并不是主要內容。

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

情境效果

像其他組件一樣,可以簡單地通過加入有情境效果的狀態類,給特定的內容使用更針對特定情境的面版。

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<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 的面板,我們為表格的上方添加一個邊框,看上去有分隔效果。

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

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

如果沒有 .panel-body ,面版標題會和表格連接起來,沒有空隙。

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

帶列表組的面版

可以簡單地在任何面版中加入具有最大寬度的列表組

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

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

具有響應式特性的嵌入內容

根據被嵌入內容的外部容器的寬度,自動創建一個固定的比例,從而讓瀏覽器自動確定視頻或 slideshow 的尺寸,能夠在各種設備上縮放。

這些規則被直接應用在 <iframe><embed><video><object> 元素上。如果你希望讓最終樣式與其他屬性相匹配,還可以明確地使用一個派生出來的 .embed-responsive-item 類。

超級提示: 不需要為 <iframe> 元素設置 frameborder="0" 屬性,因為我們已經替你這樣做了!

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

Well

默認效果

把 Well 用在元素上,就能有嵌入(inset)的簡單效果。

Look, I'm in a well!
<div class="well">...</div>

可選類/樣式

通過這兩種可選修飾類,可以控制此組件的內補(padding)和圓角的設置。

Look, I'm in a large well!
<div class="well well-lg">...</div>
Look, I'm in a small well!
<div class="well well-sm">...</div>