引导选项卡 - HTML

在网站或应用程序中，选项卡是一种常见的导航元素，可以让用户访问不同的页面或内容。Bootstrap 是一个流行的前端框架，提供了一些选项卡组件，使它们很容易添加到你的页面中。

Bootstrap 选项卡组件

Bootstrap 提供了两种选项卡组件：基本的选项卡和旋转选项卡。基本的选项卡通常用于显示相对稳定的内容，而旋转选项卡用于显示正在加载的内容。我们将讨论如何使用这两个组件。

基本的选项卡

要创建一个基本的选项卡，我们需要使用以下 HTML 结构：

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">Home content</div>
  <div class="tab-pane" id="profile" role="tabpanel">Profile content</div>
  <div class="tab-pane" id="messages" role="tabpanel">Messages content</div>
  <div class="tab-pane" id="settings" role="tabpanel">Settings content</div>
</div>

这将创建四个选项卡，每个选项卡都有自己的 ID 和内容区域。要使这些选项卡正常工作，需要包含 Bootstrap 的 JavaScript 文件，并在选项卡上使用 data-toggle 属性。

旋转选项卡

旋转选项卡类似于基本选项卡，但用于显示正在加载的内容。它们可以使用户知道正在发生某些事情，并提供一种有趣的界面反馈。

要创建一个旋转选项卡，我们需要使用以下 HTML 结构：

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">Home content</div>
  <div class="tab-pane" id="profile" role="tabpanel">Profile content</div>
  <div class="tab-pane" id="messages" role="tabpanel">
    <div class="spinner-border" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
  <div class="tab-pane" id="settings" role="tabpanel">
    <div class="spinner-border" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>

在此示例中，我们添加了两个旋转选项卡：消息和设置。它们的内容区域包含一个旋转动画，告诉用户正在加载某个内容。

总结

选项卡是网站和应用程序中常见的导航元素之一。Bootstrap 提供了两个选项卡组件：基本选项卡和旋转选项卡。使用这些组件，你可以轻松地创建精美的选项卡，以增强用户体验。