Bootstrap 中的導航組件都依賴同一個 .nav 類，狀態(tài)類也是共用的。改變修飾類可以改變樣式。

在標簽頁上使用導航需要依賴 JavaScript 標簽頁插件

由于標簽頁需要控制內(nèi)容區(qū)的展示，因此，你必須使用 標簽頁組件的 JavaScript 插件。另外還要添加 role 和 ARIA 屬性 – 詳細信息請參考該插件的 實例。

確保導航組件的可訪問性

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

標簽頁

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

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

膠囊式標簽頁

HTML 標記相同，但使用 .nav-pills 類：

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

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

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

兩端對齊的標簽頁

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

兩端對齊的導航條導航鏈接已經(jīng)被棄用了。

Safari 和響應式兩端對齊導航

從 v8.0 版本開始，Safari 有一個 bug：對于兩端對齊的導航，水平改變?yōu)g覽器大小將引起繪制錯誤。此 bug 可以在兩端對齊的導航實例中得到重現(xiàn)。

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

禁用的鏈接

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

鏈接功能不受到影響

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

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

添加下拉菜單

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

帶下拉菜單的標簽頁

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

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

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