Bootstrap 标签页学习笔记

Bootstrap 是前端界非常流行的一个开源框架，其中的标签页功能也得到了广泛应用。在本文中，我们将会学习使用 Bootstrap 创建标签页。

创建标签页

要创建标签页，需要按照以下步骤进行操作：

创建一个带有导航菜单的 HTML 页面。
使用 Bootstrap 的标签页组件创建标签页。

步骤 1：创建 HTML 页面

首先，我们需要创建一个 HTML 页面，包含导航菜单。可以使用以下代码作为起点：

htmlCopy Code
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Bootstrap 标签页学习笔记</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1">菜单 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2">菜单 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu3">菜单 3</a>
      </li>
    </ul>
  </nav>

  <div class="tab-content">
    <div id="home" class="tab-pane fade show active">
      <h3>首页内容</h3>
      <p>欢迎来到 Bootstrap 标签页学习笔记！</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>菜单 1 内容</h3>
      <p>这是菜单 1 的内容。</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>菜单 2 内容</h3>
      <p>这是菜单 2 的内容。</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>菜单 3 内容</h3>
      <p>这是菜单 3 的内容。</p>
    </div>
  </div>
</body>

</html>

在上述代码中，我们使用了 Bootstrap 的导航菜单和标签页组件。需要注意的是，我们在导航菜单中设置了 data-toggle="tab" 属性，并将 href 属性值设置为标签页的 ID。这样，当用户点击导航菜单中的链接时，页面会切换到对应的标签页。

步骤 2：使用 Bootstrap 的标签页组件

在 HTML 页面中添加标签页组件代码，如下所示：

htmlCopy Code
<div class="tab-content">
  <div id="home" class="tab-pane fade show active">
    <h3>首页内容</h3>
    <p>欢迎来到 Bootstrap 标签页学习笔记！</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>菜单 1 内容</h3>
    <p>这是菜单 1 的内容。</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>菜单 2 内容</h3>
    <p>这是菜单 2 的内容。</p>
  </div>
  <div id="menu3" class="tab-pane fade">
    <h3>菜单 3 内容</h3>
    <p>这是菜单 3 的内容。</p>
  </div>
</div>

在上述代码中，我们定义了四个标签页，并分别设置了 ID 和内容。其中，show active 类指定了默认显示的标签页。

实例演示

可以查看以下实例页面，体验 Bootstrap 标签页的效果：Bootstrap 标签页实例

希望这篇 Bootstrap 标签页学习笔记能够对你有所帮助！