Bootstrap 標籤頁和膠囊元件
Menus
大多數網頁都有某種選單。
在 HTML 中，選單通常在無序列表 <ul> 中定義（之後再進行樣式設定），如下所示：
<ul>
<li><a href="#">主頁</a></li>
<li><a href="#">選單 1</a></li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
如果您想建立上述列表的水平選單，請將 .list-inline 類新增到 <ul> 中。
<ul class="list-inline">
自己動手試一試 »
或者，您可以使用 Bootstrap 的標籤頁和膠囊元件（見下文）來顯示上面的選單。
注意：請參閱本頁的最後一個示例，瞭解如何使標籤頁和膠囊元件可切換/動態。
標籤頁
標籤頁使用 <ul class="nav nav-tabs"> 建立。
提示：用 <li class="active"> 標記當前頁面。
以下示例建立了導航標籤頁。
示例
<ul class="nav nav-tabs">
<li class="active"><a href="#">主頁</a></li>
<li><a href="#">選單 1</a></li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
自己動手試一試 »
帶下拉選單的標籤頁
標籤頁也可以包含下拉選單。
以下示例將下拉選單新增到“選單 1”。
示例
<ul class="nav nav-tabs">
<li class="active"><a href="#">主頁</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">選單 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">子選單 1-1</a></li>
<li><a href="#">子選單 1-2</a></li>
<li><a href="#">子選單 1-3</a></li>
</ul>
</li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
自己動手試一試 »
膠囊元件
膠囊元件使用 <ul class="nav nav-pills"> 建立。用 <li class="active"> 標記當前頁面。
示例
<ul class="nav nav-pills">
<li class="active"><a href="#">主頁</a></li>
<li><a href="#">選單 1</a></li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
自己動手試一試 »
垂直膠囊元件
膠囊元件也可以垂直顯示。只需新增 .nav-stacked 類。
示例
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">主頁</a></li>
<li><a href="#">選單 1</a></li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
自己動手試一試 »
排成一行的垂直膠囊元件
文字...
文字...
文字...
以下示例將垂直膠囊選單放置在最後一個列中。因此，在大螢幕上，選單將顯示在右側。但在小螢幕上，內容會自動調整為單列布局。
示例
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">主頁</a></li>
<li><a href="#">選單 1</a></li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
</div>
自己動手試一試 »
帶下拉選單的膠囊元件
膠囊元件也可以包含下拉選單。
以下示例將下拉選單新增到“選單 1”。
示例
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">主頁</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">選單 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">子選單 1-1</a></li>
<li><a href="#">子選單 1-2</a></li>
<li><a href="#">子選單 1-3</a></li>
</ul>
</li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
自己動手試一試 »
居中文字標籤頁和膠囊元件
要居中文字/調整標籤頁和膠囊元件的寬度，請使用 .nav-justified 類。
請注意，在螢幕小於 768 畫素時，列表項會堆疊（內容將保持居中）。
示例
<!-- 居中文字標籤頁 -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">主頁</a></li>
<li><a href="#">選單 1</a></li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
<!-- 居中文字膠囊元件 -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">主頁</a></li>
<li><a href="#">選單 1</a></li>
<li><a href="#">選單 2</a></li>
<li><a href="#">選單 3</a></li>
</ul>
自己動手試一試 »
可切換/動態標籤頁
主頁
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
要使標籤頁可切換，請將 data-toggle="tab" 屬性新增到每個連結。然後為每個標籤頁新增一個帶有唯一 ID 的 .tab-pane 類，並將它們包裝在一個類為 .tab-content 的 <div> 元素中。
如果您希望在點選時標籤頁淡入淡出，請將 .fade 類新增到 .tab-pane。
示例
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">主頁</a></li>
<li><a data-toggle="tab" href="#menu1">選單 1</a></li>
<li><a data-toggle="tab" href="#menu2">選單 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>一些內容。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>選單 1 中的一些內容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>選單 2 中的一些內容。</p>
</div>
</div>
自己動手試一試 »
可切換/動態膠囊元件
相同的程式碼適用於膠囊元件；只需將 data-toggle 屬性更改為 data-toggle="pill"。
示例
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">主頁</a></li>
<li><a data-toggle="pill" href="#menu1">選單 1</a></li>
<li><a data-toggle="pill" href="#menu2">選單 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>一些內容。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>選單 1 中的一些內容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>選單 2 中的一些內容。</p>
</div>
</div>
自己動手試一試 »
完整的 Bootstrap 導航參考
有關所有導航類的完整參考，請訪問我們的完整 Bootstrap 導航參考。
有關所有標籤頁選項、方法和事件的完整參考，請訪問我們的 Bootstrap JS 標籤頁參考。
