前端必知必会-Bootstrap 5 Navs导航菜单

---

Bootstrap 5 Navs导航菜单

导航菜单

如果您想要创建一个简单的水平菜单，请将 .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" 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 类以创建垂直导航：

示例

<ul class="nav 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>

Pills

使用 .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>

对齐标签/pills

使用 .nav-justified 类（等宽）对齐标签/pills：

示例

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

带下拉菜单的pills

示例

<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>

可切换/动态选项卡

要使选项卡可切换，请向每个链接添加 data-toggle=“tab” 属性。然后为每个选项卡添加一个具有唯一 ID 的 .tab-pane 类，并将它们包装在具有 .tab-content 类的

元素中。

如果您希望标签在点击时淡入淡出，请将 .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 容器active" id="home">...</div> <div class="tab-pane container fade" id="menu1">...</div> <div class="tab-pane container fade" id="menu2">...</div> </div> 

可切换/动态 Pills

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 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 5 Navs导航菜单的使用，如有问题欢迎私信和评论