浅谈Bootstrap5中滑动导航组件的使用方法

1. 引言

Bootstrap是前端开发中常用的框架之一，提供了许多实用的组件，可以加速网页开发的进程。在Bootstrap5中，滑动导航组件成为了最新的加入的组件之一，可以让网页看起来更加专业和流畅。本文将讨论滑动导航组件的使用方法，希望可以对前端开发者有所帮助。

2. 滑动导航组件的介绍

滑动导航组件是一个可以渐进式地显示选项卡的组件。当用户向左或向右滑动时，网页上的选项卡将通过渐进增加或减少的方式显示出来。该组件可以用于网页的导航栏，可以在页面上方或侧边栏中显示。

滑动导航组件主要由3个部分组成：导航、内容和控制按钮。以下是一个基本的例子：

<nav>
  <div class="nav nav-tabs" role="tablist">
    <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab">Home</a>
    <a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab">Profile</a>
    <a class="nav-link" data-bs-toggle="tab" href="#messages" role="tab">Messages</a>
    <a class="nav-link" data-bs-toggle="tab" href="#settings" role="tab">Settings</a>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#nav-scroller-example" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#nav-scroller-example" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</nav>

2.1 导航

导航是滑动导航组件的第一部分，它主要由顶部或侧边的按钮组成。你可以用任何带有 .nav 的 HTML 元素来创建导航。

对于滑动导航组件，class 概念是 .nav-tabs 类（使用选项卡样式）或 .nav-pills 类（使用胶囊式样式）。class 属性用于附加样式和设置布局。

以下是红色选项卡和蓝色胶囊样式的示例:

<div class="nav nav-tabs" role="tablist">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link2</a>
  <a class="nav-item nav-link" href="#">Link3</a>
</div>
<div class="nav nav-pills" role="tablist">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link2</a>
  <a class="nav-item nav-link" href="#">Link3</a>
</div>

2.2 内容

内容是滑动导航组件的第二部分，它显示与上面导航的选项对应的内容。

每个选项卡都包含在 .tab-pane 类中，并通过 data-bs-target 属性与导航组件的选项卡相连接。.active 类用于指示显示哪个选项卡，即使所有选项卡都应具有 .tab-pane 和 .fade 类。

以下是两个选项卡的示例:

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
</div>

2.3 控制按钮

最后一部分包括用于控制滑动导航组件的按钮。通过 data-bs-target 和 data-bs-slide 属性来控制导航内容的滑动。

以下是控制按钮的例子:

<button class="carousel-control-prev" type="button" data-bs-target="#nav-scroller-example" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#nav-scroller-example" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

3. 如何使用滑动导航组件

3.1 安装 Bootstrap5

在使用滑动导航组件之前，需要在你的项目中引入 Bootstrap5。你可以通过以下方式下载和安装 Bootstrap5：

从 官方网站 下载 Bootstrap5 。

通过 npm 安装 Bootstrap5。

在安装完成后，需要在你的 HTML 文件中引入文件。以下是一个例子:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-EcTHzSekZdvwJq/yiGqshm7pFwXbBlUc8vN3pze6RMDtRgrim3AW7868Bu/iCSy3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-wi7oDddy7Rg7mXPgYHlub70Lfz5qAwmN3lXf+RtjBsbNf/TKjQaspMUqk8uss9hB" crossorigin="anonymous"></script>

3.2 创建滑动导航

创建滑动导航需要使用标准的 HTML 元素和 Bootstrap5 的类。以下是一个基本的示例:

<nav>
  <div class="nav nav-tabs" role="tablist">
    <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab">Home</a>
    <a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab">Profile</a>
    <a class="nav-link" data-bs-toggle="tab" href="#messages" role="tab">Messages</a>
    <a class="nav-link" data-bs-toggle="tab" href="#settings" role="tab">Settings</a>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#nav-scroller-example" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#nav-scroller-example" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</nav>

3.3 设置选项卡位置

滑动导航可以在任何位置显示在网页中。以下是一个例子:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#messages" role="tab">Messages</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#settings" role="tab">Settings</a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#nav-scroller-example" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#nav-scroller-example" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</nav>

3.4 自定义滑动导航样式

你可以使用 Bootstrap5的自定义工具类和样式表去修改滑动导航的样式。以下是一些基本的例子:

.nav-tabs-dark 标签的深色选项卡。

.nav-pills-outline 胶囊风格选项卡。

.nav-tabs-justified 将选项卡填充到容器的全宽度。

.nav-tabs-vertical 垂直对齐选项卡（按列）。

以下是一个自定义主题的例子: