Bootstrap 4 导航
导航菜单
如果您想创建一个简单的水平菜单，请将 .nav 类添加到 <ul> 元素，然后为每个 <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> 元素中。
如果您希望在点击时标签页淡入淡出，请将 .fade 类添加到 .tab-pane。
示例
<!-- Nav tabs -->
<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>
<!-- Tab panes -->
<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>
<!-- Tab panes -->
<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 标签参考。
