Bootstrap5中的Navs（导航） 和 Tabs（选项卡）组件

Navs（导航）

Navs 是 Bootstrap 中的一个组件，用于创建水平或垂直的导航链接组。它可以用于创建主导航、面包屑导航、选项卡导航等。

基本用法

HTML 结构通常包括一个 <ul> 或 <div> 元素，其中包含多个 <li> 或 <a> 元素，每个元素代表一个导航项。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Features</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
</ul>

类名解释

• nav: 用于 <ul> 或 <div> 元素，表示这是一个导航组。
• nav-item: 用于 <li> 元素，表示这是一个导航项。
• nav-link: 用于 <a> 元素，表示这是一个导航链接。
• active: 可选类，用于指示当前活动的导航链接。

垂直导航

要创建垂直导航，你可以添加 flex-column 类到 <ul> 或 <div> 元素上。

<ul class="nav flex-column">
  <!-- Nav items -->
</ul>

Tabs（选项卡）

Tabs 是另一种导航形式，允许用户在不同的内容区域之间切换。在 Bootstrap 5 中，Tabs 组件与 Navs 组件紧密结合，使用相同的 HTML 结构和类名。

基本用法

HTML 结构通常包括一个包含导航链接的 <ul> 或 <div>，以及一个或多个包含选项卡内容的 <div>。

<!-- Navbar with tabs -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#home" data-bs-toggle="tab">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#features" data-bs-toggle="tab">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#pricing" data-bs-toggle="tab">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Tab contents -->
<div class="tab-content">
  <div class="tab-pane active" id="home">
    <!-- Content for Home tab -->
  </div>
  <div class="tab-pane" id="features">
    <!-- Content for Features tab -->
  </div>
  <div class="tab-pane" id="pricing">
    <!-- Content for Pricing tab -->
  </div>
</div>

类名解释

• tab-content: 用于包含所有选项卡内容的 <div> 元素。
• tab-pane: 用于每个选项卡内容的 <div> 元素。
• active: 用于指示哪个选项卡内容应该是默认显示的。

JavaScript 交互

为了使 Tabs 正常工作，你需要引入 Bootstrap 的 JavaScript 插件。

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>

总结

Bootstrap 5 中的 Navs 和 Tabs 提供了灵活且易于使用的工具，以创建各种类型的导航结构。通过简单的 HTML 结构和类名，你可以快速构建出美观且功能丰富的导航和选项卡界面。此外，结合 Bootstrap 的 JavaScript 插件，你可以实现更多高级的交互效果。