字型圖示

可用符號

包含 200 個從 Glyphicon Halflings 提供的字型格式符號。Glyphicons Halflings 一般來說不是免費的,但他們的作者允許 Boostrap 能免費的使用。為表示感謝,我們僅希望你盡可能為 Glyphicons 加入一個連結。

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • 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

如何使用

出於效能原因,所有的圖示(icon)都需要一個基礎類別與單獨的圖示類別。要使用時,將下面程式碼放在任何地方。要注意的是,一定要在圖示與文字之間留下適當的內距空間(例如:一個半型空白)。

請勿與其他元件混用

圖示類別無法直接與其他元件混用。他們不應該與其他類別在同一元素使用。正確用法應該是先加入一個 <span>,然後將圖示類別套用到 <span>

僅對空元素使用

圖示元素應該僅使用在未含任何文字內容和無子元素的元素上。

改變圖示字型檔的位置

Bootstrap 3 假設圖示字型檔是位於 ../fonts/ 目錄,相對於已編譯的 CSS 檔案。如果有你有移動或修改字型檔名稱,那麼可以自由選擇下列三種方式的其中一種:

  • 在 Less 原始檔修改 @icon-font-path 和(或) @icon-font-name 變數內容。
  • 利用 Less 編譯器提供的相對 URL 選項
  • 修改已編譯 CSS 檔案中的 url() 路徑。

使用任何一個合適於你的開發環境選項即可。

譯者註

一般我們會選擇修改 CSS 檔案。但請注意,以筆者的經驗,直接修改 bootstrap.cssbootstrap.min.css 是不明智的。因為 Bootstrap 框架更新不算太慢,更新框架後非常可能會覆蓋原先你所修改的設置。你應該使用 CSS 的繼承來覆寫 Bootstrap 的設置。

無障礙圖示

現代化版本的輔助技術將能傳達 CSS 產生的內容,以及特定的 Unicode 字元。為避免在螢幕閱讀器出現意外或令人困惑的輸出內容(特別是指圖示只是純粹用於裝飾),我們使用 aria-hidden="true" 屬性來隱藏它們。

如果你使用圖示來傳達意義(不只是作為裝飾元素),確保輔助技術傳達了這個意思 - 例如,包含使用 .sr-only 類別進行視覺隱藏的額外內容。

如果你建立的控制項沒有其他文字內容(例如,<button> 僅含有圖示),你總是應該提供替代內容以確定控制項的目的,以便讓它在使用者的輔助技術上是有意義的。這在種情況下,你可以在控制項裡加入 aria-label 屬性。

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

範例

可以在按鈕、工具列的按鈕群組、巡覽列或表單 input 元素之前使用他們。

<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 外掛讓它具有互動性。

將下拉選單的觸發器(trigger)與下拉選單包裝在 .dropdown 類別裡,或是另外宣告一個 position: relative; 屬性的元素。然後加入選單相關 HTML。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

預設情況,下拉選單會自動沿著父元素的 topleft 屬性定位為 100% 的寬度。將 .dropdown-menu-right 加入 .dropdown-menu 類別,使下拉選單向右(right)對齊。

可能需要額外的定位

在正常的文件流動(flow)之中,下拉選單會自動透過 CSS 來定位。這意味著下拉選單可能因為父元素包含 overflow 屬性而產生被裁切或超出可視區域(viewport)的呈現範圍。如果出現這種問題,你必須自己解決。

不推薦使用 .pull-right 對齊

從 v3.1.0 版開始,我們不推薦在下拉選單使用 .pull-right 類別。如果需要向右對齊選單,請改用 .dropdown-menu-right 類別。在巡覽列中向右對齊巡覽元件,請使用 .pull-right 的 mixin 版本以自動對齊選單。如果需要向左對齊,請使用 .dropdown-menu-left 類別。

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

可以給任何下拉選單加入標題以標示一組動作。

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

加入一條分隔線來區隔每個系列的下拉選單的連結。

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

.disabled 類別加入選單中的 <li> 以禁用連結。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

按鈕群組

透過按鈕群組的容器把一系列的 <button> 元素放置於同一行之中。透過我們的 JavaScript button 外掛可加入選擇性的 radio 和 checkbox 樣式行為。

在按鈕群組的工具提示與彈出視窗需要特別設置

當你在 .btn-group 中的元素使用工具提示(Tooltips)或彈出提示(popovers),必須指定 container: 'body' 選項,以避免不必要的副作用(例如,工具提示或彈出視窗被觸發時,會讓元素變寬和(或)失去圓角效果)。

確保正確的 role 與提供標籤

為了輔助技術 - 像是螢幕閱讀器 - 能夠傳達一系列群組化按鈕的意思,應該提供合適的 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>

大小

為群組內每個 button 套用大小作用類別的替代作法,僅需要在 .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-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="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> 元素。為避免此問題,把每一個按鈕放入另一個 .btn-group

查看 #12476 瞭解更多訊息。

關於 <a> 元素

只需要把一系列的 .btn 放入 .btn-group.btn-group-justified 的容器中。

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

作為按鈕的連結

如果 <a> 元素被用來充當按鈕 - 觸發頁面內的功能,而不是巡覽至其他文件或當前頁面的其他章節 - 那他們應該給於一個合適的 role="button" 設置。

關於 <button> 元素

若要在 <button> 元素中使用平均寬度的按鈕群組,你必須把每一個 <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 之內,並且提供適當的選單標籤,即可讓 button 作為下拉式選單的觸發器。

外掛相依性

按鈕下拉選單需依賴 下拉選單外掛,請包含在你使用的 Bootstrap 版本中。

單一按鈕下拉選單

只需一些基本標籤的改變,就能把 <button> 元素轉換為下拉選單的切換開關。

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

分割按鈕下拉選單

相似地,建立分割 <button> 下拉選單也必須進行一些標籤的改變,僅是多了一個分割的 <button>

<!-- 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-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li 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-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

input 群組

透過在基於文字的 input 元素之前、之後或兩邊加入文字或 button 以擴充 form 控制項。為 .input-group 加入 .input-group-addon 類別,可以讓 .form-control 的前面或後面額外加入其他元素。

文字僅使用 <input>

避免在這裡使用 <select>,因為 WebKit 瀏覽器不能完全呈現它的樣式。

避免在這裡使用 <textarea> 元素,因為在某些情況下不會尊重他們 rows 屬性。

在 input 群組的工具提示與彈出視窗需要特別設置

當你在 .input-group 中的元素使用工具提示(Tooltips)或彈出視窗(popovers),必須指定 container: 'body' 選項,以避免不必要的副作用(例如,工具提示或彈出視窗被觸發時,會讓元素變寬和(或)失去圓角效果)。

請勿與其他元件混用

請勿把 input 群組和 form 群組或格線類別直接混用。正確的用法,應該是將 input 群組放置在 form 群組或格線相關元素之內。

基本範例

input 的任意一邊附加元素或 button。你也能在 input的兩邊同時加入。

我們不支援在單一邊加入多個附加元素。

我們不支援在單一 input 群組加入多個 form 控制項。

@

.00

$ .00
<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

大小

.input-group 加入對應的 form 大小類別,包含的元素會自動調整大小。不需要為 form 控制項的每個元素設置大小類別。

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

附加 Checkboxe 和 radio 元素

放置 checkbox 或 radio 選項到 input 群組,以替代文字。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

附加按鈕元素

在 input 群組加入 button 有些不同,需要進行一些額外巢狀結構的套用。注意,你必須使用 .input-group-btn 來替代 .input-group-addon 來包覆 button。這是由於預設瀏覽器的樣式無法被覆寫,所以才必需這樣做。

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

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

譯者註

帶有按鈕下拉選單,就是把 按鈕下拉選單放入 input 群組之中。原文文件就沒有多加解釋。

巡覽

巡覽在 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>

藥片樣式(Pill)也能垂直堆疊佈局。僅需加入 .nav-stacked 類別。

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

在大於 768px 的螢幕上,透過加入 .nav-justified 很容易讓頁籤或藥片樣式以等寬的樣式來呈現。另外在小螢幕上,巡覽連結會以堆疊方式呈現。

等寬巡覽列的巡覽連結目前還未支援。

Safari 和自適應等寬巡覽

從 v8.0 開始,Safari 有個臭蟲,對於等寬巡覽樣式,水平改變瀏覽器的大小將會造成呈現上的錯誤。此臭串可以在等寬巡覽範例重現。

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

對於任何巡覽元件(頁籤或藥片樣式)都可以加入 .disabled 類別以呈現 灰色連結和無移入(hover)效果

連結功能不受影響

此類別僅僅改變 <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-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="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-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

巡覽列

巡覽列是提供你的應用程式或網站巡覽標題的自適應基礎元件。它們在行動設備的可視區域是以折疊呈現(可切換開關),在可視區域的寬度漸漸增加時(大於行動設備的判斷點時)會轉為水平佈局呈現。

等寬巡覽列的巡覽連結目前還未支援。

溢出的內容

由於 Bootstrap 不知道你的巡覽列的內容需要使用多少寬度空間,你可以會碰到巡覽列被佈局系統安排成兩個行(兩個 row)的問題。解決這個問題,你可以:

  1. 減少巡覽列項目的數量或寬度。
  2. 在某些螢幕大小上使用 自適應工具類別 來隱藏巡覽列項目。
  3. 修改觸發巡覽列折疊和水平佈局的判斷點。可自定義 @grid-float-breakpoint 變數值或加入你自己的媒體查詢。

依賴 JavaScript 外掛

如果 JavaScript 是被禁用且可視區域(viewport)夠窄的話,那麼巡覽列將會折疊起來,巡覽列將不能被展開且 .navbar-collapse 類別所包含的內容將不可見。

自適應巡覽列依賴於折疊外掛,請包含在你使用的 Bootstrap 版本中。

修改行動設備巡覽列折疊行為判斷點

當可視區域(viewport)的寬度小於 @grid-float-breakpoint 變數值時,巡覽列將會折疊起來,以垂直佈局方式(行動設備)呈現。當可視區域的寬度大於 @grid-float-breakpoint 變數值時,巡覽列將會展開,以水平佈局方式(非行動設備)呈現。可調整 Less 原始碼的 @grid-float-breakpoint 變數值以控制巡覽列的折疊/展開行為。預設值是 768px (小螢幕設備或平板電腦)。

增加無障礙

請確保每個巡覽列都有加上 role="navigation" 屬性,以提供無障礙的輔助。

<nav class="navbar navbar-default" role="navigation">
  <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">
        <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-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <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>
      <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-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li 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" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

將表單內容放置在 .navbar-form 類別之內,它能讓表單以適當的垂置方式對齊和在較窄的可視區域中進行折疊。使用對齊選項,可以決定巡覽內容出現的位置。

提醒,.navbar-form 與經過 Less mixin 的 .form-inline 共享許多它的程式碼。一些 form 控制項,例如,input 群組,可能需要固定寬度以正確地在巡覽列上呈現。

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

行設設備注意事項

有一些關於在行動裝置上在固定元素內的使用 form 控制項注意事項。請參考 我們的瀏覽器支援文件

總是加入標籤

如果你沒在 input 包含 label 標籤,螢幕閱讀器將會在你的 form 元素上碰到麻煩。對於行內巡覽列的表單,你可以使用 .sr-only 類別來隱藏 label 元素。

對於位置不在 <form> 中的 <button> 元素,加入 .navbar-btn 類別以在巡覽列裡垂直置中佈局。

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

特定情境的用法

類似標準 button 類別.navbar-btn 能使用在 <a><input>元素上。不過,.navbar-btn 也不是標準的 button 類別,應該在 .navbar-nav 中使用 <a> 元素。

把文字包裝在 .navbar-text 類別之中時,通常會使用 <p> 標籤以取得正確的行距與顏色。

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

如果希望在標準巡覽元件之外加入標準的連結,使用 .navbar-link 類別能讓連結有合適的顏色和反向顏色巡覽列選項。 s.

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

譯者註

反向顏色巡覽列選項在此段落最後一小節。

使用 .navbar-left.navbar-right 工具類別能讓巡覽列的連結、表單、按鈕、文字進行對齊。兩個類別都會使用 CSS 的 float 屬性來指定方向。例如,要對齊巡覽連結,要把它們放入一個單獨的 <ul> 元素中並且應用各自的工具類別。

這些類別是 .pull-left.pull-right 的 mixin 版本,但它們都被限定在媒體查詢(media queries)之中,這可以讓它們容易在不同螢幕大小的設備去處理巡覽列元件。

靠右對齊多個元件

巡覽列目前在多個 .navbar-right 類別的使用有限制。為了讓內容之間有合適的空間,我們在 .navbar-right 的最一個元素使用負的 margin 值。當有多個元素使用此類別時,它們的 margin 將無法如預期工作。

當 v4 版本重寫此元件時,我們會重新檢視此功能。

加入 .navbar-fixed-top 類別可以讓巡覽列固定至頂端,包含 .container.container-fluid 類別讓巡覽列內容置中對齊和左右加入 padding 設置。

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

body 需設置 padding

固定巡覽列會覆蓋掉你頁面上其他的內容,除非你加入 padding 設置到 <body> 之上。你可以嘗試自己的設定值或使用我們的程式碼片段。提示:預設巡覽列的高度是 50px。

body { padding-top: 70px; }

確認包含此設置的 CSS 是放在核心 Bootstrap CSS 之後

加入 .navbar-fixed-bottom 類別可以讓巡覽列固定至底端,包含 .container.container-fluid 類別讓巡覽列內容置中對齊和左右加入 padding 設置。

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

body 需設置 padding

固定巡覽列會覆蓋掉你頁面上其他的內容,除非你加入 padding 設置到 <body> 之上。你可以嘗試自己的設定值或使用我們的程式碼片段。提示:預設巡覽列的高度是 50px。

body { padding-bottom: 70px; }

確認包含此設置的 CSS 是放在核心 Bootstrap CSS 之後

譯者註

固定至頂端與底端,看文件說明(或範例)比較不易理解。也就是說,當網頁上下滑動時,巡覽列並不會從畫面上消失,而是固定在頂端或底端跟著畫面移動,就像是「固定」在那裡一樣。

加入 .navbar-static-top 類別可以建立一個 100% 寬度的巡覽列,它會隨著頁面向下滑動而消失。包含 .container.container-fluid 類別讓巡覽列內容置中對齊和左右加入 padding 設置。

不同於 .navbar-fixed-* 類別,你不需要在 body 上進行任何 padding 屬性設置。

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

加入 .navbar-inverse 類別以修改巡覽最的外觀。

<nav class="navbar navbar-inverse" role="navigation">
  ...
</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,非常合適 App 和搜尋結果。大區塊不易搞錯,而且容易擴展,還有大的可點擊區域。

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

禁止與啟用狀態

可依不同情境自訂連結。使用 .disabled 指明不能點擊的連結,使用 .active 指明這是當前頁面。

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

你還能選擇使用 <span> 元素替代 <a> 元素,這樣就能移除點擊功能又能保有原有樣式。

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

大小

想要更大或更小的分頁? 加入 .pagination-lg.pagination-sm 類別就可以改變分頁尺寸。

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

換頁

用少量標記和樣式就可快速提供前一頁與下一頁的分頁連結。這非常合適簡單的網站,例如部落格或雜誌網站。

預設範例

預設情況,換頁連結會置中對齊。

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

對齊連結

另外,你也可以將連結向兩端對齊:

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

自我隱藏

當沒有新的或未讀息訊項目,也就是提示標誌不存在內容時會自動隱藏(透過 CSS 的 :empty 選擇器)。

跨瀏覽器相容性

提示標誌在 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>

頁面標題

h1 加上簡單的外形,這可以增加適當空間並與頁面其他內容中分離出來。也可以在 h1 裡加入 small 元素,這就像其他元件一樣(需要額外樣式)。

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

縮圖

透過縮圖元件擴充 Bootstrap 的 格線系統,很容易展示格線樣式的圖示、影片、文字等內容。

預設範例

預設情況下,Bootstrap 的縮圖被設計僅需用最少標記來展示帶有連結的圖片。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" 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 data-src="holder.js/300x300" 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 警告外掛

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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 屬性。

基本範例

預設進度條樣式。

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 類別,以顯示進度的百分比。考慮到低百分比的情況,建議加上 min-width 屬性以確保所有標籤文字能完全顯示出來。

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>

低百分比

進度條會顯示低的個位數字百分比,包含 0% 的情況。為了清楚表示低百分比的進度,建議加入一個 min-width: 20px; 的設置。

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="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>

條紋樣式

使用 CSS3 的 gradient 屬性建立條紋效果。不支援 IE8。

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>

動畫樣式

.active 加入 .progress-bar-striped 類別,以呈現由右向左的條紋動畫效果。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-bar)放置於同一個 .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 訊息等)的抽象物件樣式,這些元件都有著在原文內容的左邊或右邊對齊的圖片。

預設媒體

預設的媒體樣式允許在一個內容區塊的左邊或右邊浮動一個媒體物件(圖片、影片、音訊等)。

Generic placeholder image

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.
Generic placeholder image

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.
Generic placeholder image

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.
Generic placeholder image
Generic placeholder image

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.
Generic placeholder image
<div class="media">
  <a class="media-left" href="#">
    <img src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

.pull-left.pull-right 類別還是存在並且還是媒體元件的一部分,但從 v3.3.0 開始不推薦使用。它們相當於 .media-left.media-right,除了 .media-right 應該要放置於 HTML 的 .media-body 之後。

媒體對齊

圖片或其住媒體都能置頂對齊、置中對齊、置底對齊。預設是置頂對齊。

Generic placeholder image

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.

Generic placeholder image

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.

Generic placeholder image

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">
  <a class="media-left media-middle" href="#">
    <img data-src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

媒體清單

僅需一些額外的標記,你就能在清單裡使用媒體物件(這在留言或文章清單非常有用)。

  • Generic placeholder image

    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.

    Generic placeholder image

    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.
    Generic placeholder image

    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.
    Generic placeholder image

    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">
    <a class="media-left" href="#">
      <img src="..." alt="...">
    </a>
    <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> 元素,可連結化的清單群組項目(這也意味著父元素要使用 <div> 替代 <ul>)。不需要為每個元素都加入一個單獨的父元素。

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

禁用項目

加入 .disabled.list-group-item 讓項目呈現灰色被禁用的效果。

<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 類別很容易加入標題容器到你的面板之中。你也可以在任何 <h1>-<h6> 內包含 .panel-title 類別,以加入預先設計好的標題樣式。

為了給連結合適的顏色,請確保將連結放置在含 .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-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>

隨著清單群組

很容易包含 100% 寬度的 list groups 到任何面板裡。

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>

自適應嵌入內容

基於包含它們的容器區塊建立一個內部比率,允許瀏覽器決定影片或投影片的大小,以能正確地在任何設備上進行縮放。

此規則直接套用在 <iframe><embed><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 樣式能給元素加入一個簡單的嵌入(inset)效果。

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

選擇性類別

由兩個選擇性修飾類別來控制內距和圓角。

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>