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 标签页参考。
