菜单
大部分的网页都有某种菜单的。
在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标签参考 。