Bootstrap 4 导航
导航菜单
如果你想创建一个简单的水平菜单，在 `<ul>` 元素中添加 `.nav` 类，然后为每个 `<li>` 添加 `.nav-item` 类，并为它们的链接添加 `.nav-link` 类
示例
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
尝试一下 »
对齐导航
添加 `.justify-content-center` 类来居中导航，添加 `.justify-content-end` 类来右对齐导航。
示例
<!-- 居中导航 -->
<ul class="nav justify-content-center">
<!-- 右对齐导航 -->
<ul class="nav justify-content-end">
尝试一下 »
垂直导航
添加 `.flex-column` 类来创建一个垂直导航
选项卡
使用 `.nav-tabs` 类将导航菜单转换为导航选项卡。在活动/当前链接中添加 `.active` 类。如果要使选项卡可切换，请参见本页最后一个示例。
示例
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
尝试一下 »
药丸
使用 `.nav-pills` 类将导航菜单转换为导航药丸。如果要使药丸可切换，请参见本页最后一个示例。
示例
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
尝试一下 »
对齐选项卡/药丸
使用 `.nav-justified` 类（等宽）对齐选项卡/药丸
示例
<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
尝试一下 »
带下拉菜单的药丸
示例
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉菜单</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">链接 1</a>
<a class="dropdown-item" href="#">链接 2</a>
<a class="dropdown-item" href="#">链接 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
尝试一下 »
带下拉菜单的选项卡
示例
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉菜单</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">链接 1</a>
<a class="dropdown-item" href="#">链接 2</a>
<a class="dropdown-item" href="#">链接 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</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>` 元素中。
如果要使选项卡在点击时淡入淡出，请在 `.tab-pane` 中添加 ` .fade` 类
示例
<!-- 导航选项卡 -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">菜单 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">菜单 2</a>
</li>
</ul>
<!-- 选项卡面板 -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
尝试一下 »
可切换/动态药丸
首页
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
相同的代码适用于药丸；只需将 data-toggle 属性更改为 `data-toggle="pill"`
示例
<!-- 导航药丸 -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">菜单 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">菜单 2</a>
</li>
</ul>
<!-- 选项卡面板 -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
尝试一下 »
完整的 Bootstrap 4 导航参考
有关所有选项卡选项、方法和事件的完整参考，请访问我们的 Bootstrap 4 JS 选项卡参考.
