bootstrap知識筆記

時間  2019-12-14
標籤 bootstrap 知識 筆記 欄目 Bootstarp 简体版
原文   原文鏈接

下拉菜單

用於顯示連接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具備了交互性。css

將下拉菜單觸發器和下拉菜單都包裹在 .dropdown 裏，或者另外一個聲明瞭 position: relative; 的元素。而後加入組成菜單的 HTML 代碼。html

Copy 
<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 類，可讓菜單向上彈出（默認是向下彈出的）。ios

Copy 
<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 類可讓菜單右對齊。css3

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

在正常的文檔流中，經過 CSS 爲下拉菜單進行定位。這就意味着下拉菜單可能會因爲設置了 overflow 屬性的父元素而被部分遮擋或超出視口（viewport）的顯示範圍。若是出現這種問題，請自行解決。git

不建議使用 .pull-right

從 v3.1.0 版本開始，咱們再也不建議對下拉菜單使用 .pull-right 類。如需將菜單右對齊，請使用 .dropdown-menu-right 類。導航條中如需添加右對齊的導航（nav）組件，請使用 .pull-right 的 mixin 版本，能夠自動對齊菜單。如需左對齊，請使用 .dropdown-menu-left 類。github

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

在任何下拉菜單中都可經過添加標題來標明一組動做。web

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

爲下拉菜單添加一條分割線，用於將多個連接分組。bootstrap

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

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

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

Copy 
<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"> 中就能夠作成更復雜的組件。

Copy 
<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-* 類，就省去爲按鈕組中的每一個按鈕都賦予尺寸類了，若是包含了多個按鈕組時也適用。




Copy 
<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 中。

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

垂直排列

讓一組按鈕垂直堆疊排列顯示而不是水平排列。分列式按鈕下拉菜單不支持這種方式。

Copy 
<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 中便可。

Left Middle Right

Left Middle
Dropdown
Copy 
<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> 元素上，可是，因爲咱們支持按鈕式下拉菜單，咱們能夠解決這個問題。

Copy 
<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 版本中。

單按鈕下拉菜單

只要改變一些基本的標記，就能把按鈕變成下拉菜單的開關。

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

分裂式按鈕下拉菜單

類似地，分裂式按鈕下拉菜單也須要一樣的改變一些標記，但只是多一個分開的按鈕。

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

尺寸

按鈕式下拉菜單適用全部尺寸的按鈕。

Copy 
<!-- 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 類就能使觸發的下拉菜單朝上方打開。

Copy 
<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/
Copy 
<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 添加相應的尺寸類，其內部包含的元素將自動調整自身的尺寸。不須要爲輸入框組中的每一個元素重複地添加控制尺寸的類。

@

@

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

做爲額外元素的多選框和單選框

能夠將多選框或單選框做爲額外元素添加到輸入框組中。

Copy 
<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 來包裹按鈕元素。因爲不一樣瀏覽器的默認樣式沒法被統一的從新賦值，因此才須要這樣作。

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

做爲額外元素的按鈕式下拉菜單

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

做爲額外元素的分裂式按鈕下拉菜單

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

 
Copy 
<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 基類。

Copy 
<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 類：

Copy 
<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 類。

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

在大於 768px 的屏幕上，經過 .nav-justified 類能夠很容易的讓標籤頁或膠囊式標籤呈現出同等寬度。在小屏幕上，導航連接呈現堆疊樣式。

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

Safari 和響應式兩端對齊導航

從 v9.1.2 版本開始，Safari 有一個bug：對於兩端對齊的導航，水平改變瀏覽器大小將引發繪製錯誤。此bug能夠在兩端對齊的導航實例中獲得重現。


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

對任何導航組件（標籤頁、膠囊式標籤頁），均可以添加 .disabled 類，從而實現連接爲灰色且沒有鼠標懸停效果。

連接功能不受到影響

這個類只改變 <a> 的外觀，不改變功能。能夠本身寫 JavaScript 禁用這裏的連接。

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

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

帶下拉菜單的標籤頁

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

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

Copy 
<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" 屬性，這樣可以讓使用輔助設備的用戶明確知道這是一個導航區域。

Brand
Copy 
<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 代碼從而覆蓋默認設置。

Brand
Copy 
<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。 某些表單組件，例如輸入框組，可能須要設置一個固定寬度，從而在導航條內有合適的展示。

Brand
Copy 
<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-label、aria-labelledby 或者 title 屬性。若是這些方法都沒有，屏幕閱讀器將使用 placeholder 屬性（若是這個屬性存在的話），可是請注意，使用 placeholder 代替其餘識別標籤的方式是不推薦的。

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

基於情境的用法

就像標準的 按鈕類 同樣，.navbar-btn 能夠被用在 <a> 和 <input> 元素上。然而，在 .navbar-nav 內，.navbar-btn 和標準的按鈕類都不該該被用在 <a> 元素上。

文本

把文本包裹在 .navbar-text中時，爲了有正確的行距和顏色，一般使用 <p> 標籤。

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

或許你但願在標準的導航組件以外添加標準連接，那麼，使用 .navbar-link 類可讓連接有正確的默認顏色和反色設置。

Brand
Copy 
<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）。

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

須要爲 body 元素設置內補（padding）

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

Copy 
body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

添加 .navbar-fixed-bottom 類可讓導航條固定在底部，而且還能夠包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內補（padding）。

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

須要爲 body 元素設置內補（padding）

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

Copy 
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）。

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

經過添加 .navbar-inverse 類能夠改變導航條的外觀。

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

路徑導航

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

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

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data
Copy 
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

分頁

爲您的網站或應用提供帶有展現頁碼的分頁組件，或者可使用簡單的翻頁組件。

默認分頁

受 Rdio 的啓發，咱們提供了這個簡單的分頁組件，用在應用或搜索結果中超級棒。組件中的每一個部分都很大，優勢是容易點擊、易縮放、點擊區域大。

Copy 
<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 類。

Copy 
<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> 標籤，這樣就可讓其保持須要的樣式而不能被點擊。

Copy 
<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 類提供了額外可供選擇的尺寸。

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

翻頁

用簡單的標記和樣式，就能作個上一頁和下一頁的簡單翻頁。用在像博客和雜誌這樣的簡單站點上棒極了。

默認實例

在默認的翻頁中，連接居中對齊。

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

對齊連接

你還能夠把連接向兩端對齊：

Copy 
<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 類也可用於翻頁中的連接。

Copy 
<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
Copy 
<h3>Example heading <span class="label label-default">New</span></h3>

可用的變體

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

Default Primary Success Info Warning Danger
Copy 
<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

Copy 
<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 提供了內置的樣式，讓膠囊式導航內處於激活狀態的元素所包含的徽章展現相匹配的樣式。

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

Copy 
<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 元素。

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

頁頭

頁頭組件可以爲 h1 標籤增長適當的空間，而且與頁面的其餘部分造成必定的分隔。它支持 h1 標籤內內嵌 small 元素的默認效果，還支持大部分其餘組件（須要增長一些額外的樣式）。

Example page header Subtext for header

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

縮略圖

經過縮略圖組件擴展 Bootstrap 的 柵格系統，能夠很容易地展現柵格樣式的圖像、視頻、文本等內容。

若是你想實現一個相似 Pinterest 的頁面效果（不一樣高度和/寬度的縮略圖順序排列）的話，你須要使用一個第三方插件，好比 Masonry、Isotope 或 Salvattore。

默認樣式的實例

Boostrap 縮略圖的默認設計僅需最少的標籤就能展現帶連接的圖片。

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

自定義內容

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

100%x200

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

100%x200

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

100%x200

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

Copy 
<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），表明不一樣的警告信息。

沒有默認類

警告框沒有默認類，只有基類和修飾類。默認的灰色警告框並無多少意義。因此您要使用一種有意義的警告類。目前提供了成功、消息、警告或危險。

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Copy 
<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 警告框插件。

Warning! Better check yourself, you're not looking too good.
Copy 
<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 工具類，能夠爲連接設置與當前警告框相符的顏色。

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Copy 
<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
Copy 
<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%
Copy 
<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%
Copy 
<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)
Copy 
<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)
Copy 
<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
Copy 
<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)
Copy 
<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 消息等）。

默認樣式

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

64x64

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.
64x64

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.
64x64

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.
64x64
64x64

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.
64x64
Copy 
<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 的後面。

對齊

圖片或其餘媒體類型能夠頂部、中部或底部對齊。默認是頂部對齊。

64x64

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.

64x64

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.

64x64

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.

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

媒體對象列表

用一點點額外的標記，就能在列表內使用媒體對象組件（對評論或文章列表頗有用）。

  • 64x64

    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.

    64x64

    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.
    64x64

    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.
    64x64

    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.
Copy 
<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
Copy 
<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
Copy 
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

連接

用 <a> 標籤代替 <li> 標籤能夠組成一個所有是連接的列表組（還要注意的是，咱們須要將 <ul> 標籤替換爲 <div> 標籤）。不必給列表組中的每一個元素都加一個父元素。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
Copy 
<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 類！

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

被禁用的條目

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

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

情境類

爲列表中的條目添加情境類，默認樣式或連接列表均可以。還能夠爲列表中的條目設置 .active 狀態。

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

List group item heading

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

List group item heading

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

List group item heading

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

Copy 
<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
Copy 
<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
Copy 
<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
Panel footer
Copy 
<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
Copy 
<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
Copy 
<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
Copy 
<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
Copy 
<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" 屬性，由於咱們已經替你這樣作了！

Copy 
<!-- 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!
Copy 
<div class="well">...</div>

可選類/樣式

經過這兩種可選修飾類，能夠控制此組件的內補（padding）和圓角的設置。

Look, I'm in a large well!
Copy 
<div class="well well-lg">...</div>
Look, I'm in a small well!
Copy 
<div class="well well-sm">...</div>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程