Bootstrap 标签和药丸
菜单
大多数网页都有一些菜单。
在 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>主页</h3>
<p>一些内容。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>菜单 1 中的一些内容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜单 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>主页</h3>
<p>一些内容。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>菜单 1 中的一些内容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜单 2</h3>
<p>菜单 2 中的一些内容。</p>
</div>
</div>
自己尝试 »
Bootstrap 导航完整参考
有关所有导航类的完整参考，请访问我们的完整 Bootstrap 导航参考。
有关所有标签选项、方法和事件的完整参考，请访问我们的 Bootstrap JS 标签参考。
