Bootstrap 5 导航
导航菜单
如果你想创建一个简单的水平菜单，请将 .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-bs-toggle="dropdown" href="#">下拉菜单</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</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-bs-toggle="dropdown" href="#">下拉菜单</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</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 中
示例
<!-- 导航标签 -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">主页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">菜单 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-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-bs-toggle="pill" href="#home">主页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu1">菜单 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-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>
自己尝试一下 »
