Bootstrap 标签页 - 程序员自由职业

在 Bootstrap 中，标签页（Tabs）是一种用于组织和切换内容的组件。标签页通常用于在同一页面上显示多个相关的内容区域，用户可以通过点击标签来切换内容。以下是一个简单的 Bootstrap 标签页的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Bootstrap 标签页示例</title>
  <!-- 引入 Bootstrap 样式表 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>

  <div class="container mt-4">
    <!-- 标签导航 -->
    <ul class="nav nav-tabs" id="myTabs">
      <li class="nav-item">
        <a class="nav-link active" id="tab1-tab" data-bs-toggle="tab" href="#tab1">标签 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="tab2-tab" data-bs-toggle="tab" href="#tab2">标签 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="tab3-tab" data-bs-toggle="tab" href="#tab3">标签 3</a>
      </li>
    </ul>

    <!-- 标签页内容 -->
    <div class="tab-content mt-2">
      <div class="tab-pane fade show active" id="tab1">
        <h3>标签页 1 的内容</h3>
        <p>这是标签页 1 的内容。</p>
      </div>
      <div class="tab-pane fade" id="tab2">
        <h3>标签页 2 的内容</h3>
        <p>这是标签页 2 的内容。</p>
      </div>
      <div class="tab-pane fade" id="tab3">
        <h3>标签页 3 的内容</h3>
        <p>这是标签页 3 的内容。</p>
      </div>
    </div>
  </div>

  <!-- 引入 Bootstrap 的 JavaScript 文件（需要在文档末尾引入） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在这个例子中，我们使用了 Bootstrap 提供的 nav-tabs 和 tab-content 类，分别用于标签导航和标签页内容的外层容器。每个标签页都有一个唯一的 ID（例如，tab1、tab2、tab3），并且导航栏中的链接使用这些 ID 来指向相应的标签页。

点击标签页会触发 Bootstrap 的 JavaScript，实现内容的切换。fade 类用于添加淡入淡出的过渡效果，你可以根据需要选择是否使用。

你可以根据具体的需求自定义标签页的样式和结构，同时可以查阅 Bootstrap 文档了解更多关于标签页的选项和用法。

转载请注明出处：http://www.zyzy.cn/article/detail/12634/Bootstrap