菜單
大部分的網頁都有某種菜單的。
在HTML中，菜單無序列表通常被定義<ul>事後風格），就像這樣：
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> 如果你想創建上面列表的水平菜單，添加.list-inline類<ul>
<ul class="list-inline"> 試一試» 或者你也可以顯示上面菜單Bootstraps' Tabs and Pills （見下文）。
注意：請參閱此頁面上的最後一個例子 ，找出如何使標籤和丸可切換/動態。
標籤
標籤與創建<ul class="nav nav-tabs"> ：
提示：也標誌著在當前頁面<li class="active"> 。
下面的示例創建導航標籤：
例
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
試一試» 卡口與下拉菜單
標籤也可以按住下拉菜單。
下面的示例添加一個下拉菜單，“菜單1”：
例
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
試一試» Pills
丸與創建<ul class="nav nav-pills"> 。 也標誌著在當前頁面<li class="active"> ：
例
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> 試一試» 垂直Pills
Pills也可垂直顯示。 只需添加.nav-stacked類：
例
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
試一試» 垂直Pills在一排
文本...
文本...
文本...
下面的示例將在最後一列內的垂直丸菜單。 因此，在大屏幕上的菜單將被顯示在右邊。 但是在小屏幕上，內容將自動調整為單柱佈局：
例
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> 試一試» Pills隨著下拉菜單
Pills也可以按住下拉菜單。
下面的示例添加一個下拉菜單，“菜單1”：
例
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
試一試» 中心的Tabs and Pills
以中心/證明標籤和pills ，使用.nav-justified類。
請注意，那些比768px較小的屏幕，列表項堆疊（內容將保持居中）：
例
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
試一試» 可切換/動態Tabs
家
Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。
為了使標籤可切換，添加data-toggle="tab"屬性的每一個環節。 然後添加一個.tab-pane類為每個標籤的唯一ID，敷他們裡面<div>與類元素.tab-content 。
如果你想在選項卡淡入和淡出他們點擊的時候，添加.fade類.tab-pane ：
例
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
試一試» 可切換/動態Pills
相同的代碼適用於pills ; 只更改數據切換屬性data-toggle="pill" ：
例
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
試一試» 自測練習用！
完成Bootstrap導航參考
對於所有的導航類的完整參考，請訪問我們的完整引導的導航參考 。
有關所有選項卡選項，方法和事件的完整參考，請訪問我們的引導JS標籤參考 。