引导选项卡多个 - HTML

在网页设计中，选项卡（Tabs）是一个非常常见且实用的 UI 元素。Bootstrap 是一个流行的开源框架，提供了许多选项卡组件，允许开发者轻松地添加选项卡到他们的网站或应用程序中。在本文中，我们将介绍如何在 Bootstrap 中添加多个选项卡组件。

HTML 代码

首先，让我们看一下如何创建多个选项卡。我们将使用以下 HTML 代码：

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="tab1">This is tab 1.</div>
    <div class="tab-pane" id="tab2">This is tab 2.</div>
    <div class="tab-pane" id="tab3">This is tab 3.</div>
  </div>
</div>

在上面的代码中，我们首先创建了一个包含选项卡标签的 <ul> 元素，并使用 nav 和 nav-tabs 类将其设置为选项卡。然后，我们创建了三个选项卡标签，并通过 href 属性将它们链接到对应的内容区域。data-toggle="tab" 属性告诉 Bootstrap 点击标签时要激活选项卡。最后，我们创建了三个 <div> 元素，将它们作为选项卡内容的容器。我们可以使用 tab-pane 类将它们设置为选项卡面板，并使用 active 类将第一个面板设置为默认显示。

Bootstrap CSS 和 JavaScript

为了使选项卡正常工作，我们还需要包含 Bootstrap 的 CSS 和 JavaScript 文件。在这里，我们可以使用 Bootstrap 的 CDN 来获取这些文件：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

总结

在本文中，我们学习了如何在 Bootstrap 中创建多个选项卡。我们使用了 nav 和 nav-tabs 类来创建选项卡标签，以及 tab-pane 和 active 类来创建选项卡内容。我们还包含了 Bootstrap 的 CSS 和 JavaScript 文件，以确保选项卡正常工作。在实践中，您可以根据自己的需要更改选项卡的样式和内容，并使用 Bootstrap 的其他组件来扩展您的网站或应用程序。