Bootstrap5中的Navs（导航）和 Tabs（选项卡）组件-WP主题随想

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>
<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>
<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>
<ul class="nav flex-column">
  <!-- Nav items -->
</ul>
<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>
<!-- 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>
<!-- 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>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>