導航欄是一個很好的功能，是 Bootstrap 網站的一個突出特點。導航欄在您的應用或網站中作為導航頁頭的響應式基礎元件。導航欄在移動裝置的檢視中是摺疊的，隨著可用視口寬度的增加，導航欄也會水平展開。在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式。

基本的標籤頁

1. <ulclass="nav nav-tabs">
2. <liclass="active">
3. <ahref="#">首頁</a>
4. </li>
5. <li><ahref="#">...</a></li>
6. <li><a
   href="#">...</a></li>
7. </ul>

1. <ulclass="nav nav-pills">
2. <liclass="active">
3. <ahref="#">Home</a>
4. </li>
5. <li><ahref="#">...</a></li>
6. <li><ahref="#">...</a></li>
7. </ul>

不可用狀態

在任何的導航元件(標籤, 圓角或列表)新增 .disabled, 連結將變成灰色

1. <ulclass="nav nav-pills">
2. ...
3. <liclass="disabled"><ahref="#">Home</a></li>
4. ...
5. </ul>

疊放式導航 豎直排放標籤和圓角連結

預設情況下標籤和圓角連結是水平排放的，使用 .nav-stacked 就可以將其變成豎直疊放。

1. <ulclass="nav nav-tabs nav-stacked">
2. ...
3. </ul>

下拉選單 改良的導航元件

1. <ulclass="nav nav-tabs">
2. <liclass="dropdown">
3. <aclass="dropdown-toggle"
4. data-toggle="dropdown"
5. href="#">
6. Dropdown
7. <bclass="caret"></b>
8. </a>
9. <ulclass="dropdown-menu">
10. <!-- links -->
11. </ul>
12. </li>
13. </ul

導航列表 構建簡單的疊放式導航，適用於側邊欄

導航列表可以便捷地建立帶有標頭(可選)的導航連結組，非常適合用做側邊欄（與OS X中的Finder類似）。

導航列表例子

對存放一組連結的列表使用 class="nav nav-list" :

水平分隔符

標籤頁切換導航 通過javascript讓標籤生動起來

我們使用一個簡單的外掛切換標籤頁對應的內容，從而讓標籤頁變得生動。 Bootstrap 提供了四種樣式的標籤頁：置頂(預設)，居右，置底，居左。應用時只需修改很少的標記。

標籤頁切換的例子

讓標籤可切換, 需在.tab-content裡建立.tab-pane, 並對每個標籤設定一個唯一的ID.

1. <divclass="tabbable"><!-- Only required for left/right tabs -->
2. <ulclass="nav nav-tabs">
3. <liclass="active"><ahref="#tab1"data-toggle="tab">Section 1</a></li>
4. <li><ahref="#tab2"data-toggle="tab">Section 2</a></li>
5. </ul>
6. <divclass="tab-content">
7. <divclass="tab-pane active"id="tab1">
8. <p>I'm in Section 1.</p>
9. </div>
10. <divclass="tab-pane"id="tab2">
11. <p>Howdy, I'm in Section 2.</p>
12. </div>
13. </div>
14. </div>

淡入

要讓內容淡入, 需在每個.tab-pane新增.fade .

各個方向的標籤

底部

反轉HTML的順序，用 .tabs-below 將標籤居底。

左邊

，用 .tabs-left 將標籤居底。

右邊

使用 .tabs-right 將標籤居右。