Bootstrap5 中的标签页 - HTML

Bootstrap是一种流行的前端框架，可以通过HTML、CSS和JavaScript快速构建响应式和移动优先的网站和应用程序。

Bootstrap5中的标签页是用于在页面中呈现多个板块内容的常用UI组件。标签页通常用于在单个页面上组织相关内容，并使用户可以轻松地切换各个选项卡。

创建HTML标签页

使用Bootstrap5中的标签页，首先需要导入Bootstrap5的CSS和JavaScript文件。

<!-- CSS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">

<!-- JavaScript files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

要创建标签页，必须使用HTML中的特殊结构。每个标签页都由一个单独的标签定义。标签页通常嵌套在一个由<div>标签定义的容器中。以下是创建两个标签页的示例HTML代码：

<div class="container">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#tab1">标签页1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#tab2">标签页2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane fade show active">
      <h3>标签页1内容</h3>
      <p>这是标签页1的内容。</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h3>标签页2内容</h3>
      <p>这是标签页2的内容。</p>
    </div>
  </div>
</div>

在这个示例中，<div>标签是标签页的容器，并具有container类。<ul>标签用于定义标签栏，其中包含两个单独的标签页，每个标签页都是一个<li>元素。还有一个nav-link active类，用于标识默认选定的标签页。

标签页的内容是通过<div class="tab-content">定义的。每个标签页都是一个单独的<div>元素，具有tab-pane fade类，其中id属性对应于标签页的目标链接。

自定义标签页样式

Bootstrap5提供了许多内置的选项卡样式，可以应用于任何标签页元素。可以使用以下样式：

| 样式名称 | 描述 | | --- | --- | | nav-tabs | 标准标签样式 | | nav-pills | 胶囊样式的标记 | | nav-fill | 标签平均占用可用宽度 | | nav-justified | 标签占满整个容器 |

<!-- 导航选项卡使用样式和 `nav-fill` 和 nav-justified`类 -->
<ul class="nav nav-tabs nav-fill nav-justified">
  <!-- tabs -->
</ul>

<!-- 胶囊选项卡使用样式和`nav-pills`类 -->
<ul class="nav nav-pills">
  <!-- tabs -->
</ul>

结论

在Bootstrap5中，标签页是一个方便的UI组件，用于在同一页面上呈现多个区块内容。使用Bootstrap5，可以轻松创建各种选项卡样式和布局，以适应不同的设计需求。