Bootstrap .list-inline
菜单
大多数网页都有某种菜单。
在 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 的选项卡和药丸显示上面的菜单（见下文）。
笔记：请参阅最后一个例子在此页面上了解如何使选项卡和药丸可切换/动态。
选项卡
选项卡是用以下命令创建的<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>
亲自试一试 »
带有下拉菜单的选项卡
选项卡还可以包含下拉菜单。
以下示例将下拉菜单添加到"Menu 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>
亲自试一试 »
药丸
药丸是用<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>
亲自试一试 »
立式药丸
药丸也可以垂直展示。只需添加.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>
亲自试一试 »
连续垂直药丸
文本...
文本...
文本...
以下示例将垂直药丸菜单放置在最后一列内。因此，在大屏幕上，菜单将显示在右侧。但在小屏幕上，内容会自动调整为单列布局：
示例
<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>
亲自试一试 »
带有下拉菜单的药丸
药丸还可以保存下拉菜单。
以下示例将下拉菜单添加到"Menu 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>
亲自试一试 »
居中的药片和药丸
要使标签和药丸居中/对齐，请使用.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>
亲自试一试 »
可切换/动态选项卡
家
Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna 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>
亲自试一试 »
可切换/动态药丸
相同的代码适用于药丸；只需将 data-toggle 属性更改为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 导航参考
有关所有导航类的完整参考，请访问我们的完整Bootstrap 导航参考。
有关所有选项卡选项、方法和事件的完整参考，请访问我们的Bootstrap JS 选项卡参考。