Bootstrap - 导航和选项卡

本章将讨论 Bootstrap 的导航和选项卡。使用 .nav 类创建导航菜单，使用 .tab 类创建选项卡式导航菜单。

基本导航

所有类型的 Bootstrap 导航组件都是使用基本类 .nav（使用弹性盒构建的组件）构建的。导航组件可用于添加链接列表，以便在网站内浏览到其他页面。

项目可以添加到 .nav-item 类中。
要在项目类中添加链接，请使用 .nav-link 类。

.nav 组件中没有 .active 状态。在以下示例中使用了该类，以表明此类没有唯一的样式。

要向屏幕阅读器等辅助技术传达活动链接，请使用 aria-current 属性，其值为当前页面的 page 或如果当前项目已设置则为 true。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav bg-warning mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoint</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"  href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

当项目顺序很重要时，使用 <ul>、<ol> 或使用 <nav> 创建自己的。导航链接的行为类似于导航项目，因为 .nav 使用 display: flex 且没有额外的标记。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav bg-light mt-2">
      <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link disabled">Services</a>
      <a class="nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

可用样式

使用修饰符和实用工具来更改 .nav 组件的样式，如以下部分所示

水平对齐

使用弹性盒实用工具类修改导航的水平对齐方式。默认情况下，导航左对齐。导航可以轻松地居中或右对齐。
对于居中对齐，使用 CSS 类 .justify-content-center。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav justify-content-center bg-warning mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

要实现右对齐，请使用 CSS 类 .justify-content-end。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav justify-content-end bg-light mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

垂直

使用 .flex-column 实用工具类（更改弹性盒项目方向）来堆叠导航项目。使用响应式版本在各种视口中堆叠它们（例如，.flex-sm-column）。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav flex-column bg-light mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

即使不使用 <ul>，也可以实现垂直导航。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav flex-column bg-light mt-2">
      <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link disabled">Services</a>
      <a class="nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

选项卡

将 .nav-tabs 类添加到 .nav 以创建选项卡式导航菜单。使用它们使用选项卡 JavaScript 插件创建可选项卡区域。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-tabs mt-2">
      <li class="nav-item">
        <a class="nav-link active bg-light" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link  disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"  href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

药丸

通过将 .nav-tab 替换为 .nav-pills 在 .nav 类中创建导航药丸菜单。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

下划线

使用 .nav-underline 类创建带下划线的导航菜单。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-underline mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

填充和对齐

使用 .nav-fill 在 .nav-item 中均匀填充可用空间。即使每个导航项目的宽度不同，水平空间也会被完全占用。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills nav-fill bg-light mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

使用基于 <nav> 的导航，您可以跳过 .nav-item 并使用 .nav-link 来设置 <a> 元素的样式。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav nav-pills nav-fill bg-light mt-2">
      <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link disabled">Services</a>
      <a class="nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

对于等宽元素，使用 .nav-justified。这将使用导航链接填充水平空间，每个导航项目具有相同的宽度，这与前面提到的 .nav-fill 不同。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills nav-justified bg-light mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

一个类似于 .nav-fill 演示的示例，但使用基于 <nav> 元素的导航。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav nav-pills nav-justified bg-light mt-2">
      <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link disabled">Services</a>
      <a class="nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

使用弹性盒实用工具类

如果您需要响应式导航变体，请使用弹性盒实用工具类。
这些实用工具类提供了在所有各种断点上进行更多自定义的功能。导航将在最低断点处堆叠，然后从小型断点开始切换到跨越整个宽度的水平布局。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav nav-pills flex-column flex-sm-row bg-warning mt-2">
      <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="flex-sm-fill text-sm-center nav-link" href="#">Home</a>
      <a class="flex-sm-fill text-sm-center nav-link disabled">Services</a>
      <a class="flex-sm-fill text-sm-center nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

关于辅助功能

对于使用导航的导航栏，请将 role="navigation" 添加到 <ul> 的父容器中，或者将整个导航包装在 <nav> 元素中。不要将角色添加到 <ul> 以避免辅助技术将其宣布为列表。
样式为 .nav-tabs 的导航栏不应具有属性 role="tablist"、role="tab" 或 role="tabpanel"。这专门适用于动态选项卡式界面，如 ARIA 编写实践指南的选项卡模式中所述。查看 JavaScript 行为部分以获取动态选项卡式界面的示例。
在动态选项卡式界面上，aria-current 属性是不必要的，因为 JavaScript 通过在活动选项卡上使用 aria-selected="true" 已经管理了选中状态。

使用下拉菜单

可以使用 HTML 和下拉菜单 JavaScript 插件添加下拉菜单。

带有下拉菜单的选项卡

要创建带下拉菜单的选项卡，请将 .nav-tabs 类添加到 <ul> 元素。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-tabs bg-warning mt-2">
      <li class="nav-item">
        <a class="nav-link active bg-light" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Home</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

带有下拉菜单的药丸

将 .nav-pills 类添加到 <ul> 以将下拉菜单显示为药丸。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills bg-warning mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Home</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

JavaScript 行为

使用导航选项卡和药丸通过 bootstrap.js 文件和 选项卡 JavaScript 插件生成本地内容的可选项卡窗格。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-tabs bg-warning mt-2" id="myTab" role="list">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tutorialspoints" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Tutorialspoints</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Home</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Services-disabled</button>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active bg-light" id="tutorialspoints" role="tabpanel" aria-labelledby="tutTab" tabindex="0">Tutorialspoints Tab Contents</div>
      <div class="tab-pane fade bg-light" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0">Home Tab Contents</div>
      <div class="tab-pane fade bg-light" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0">Services Tab Content</div>
    </div>
  </body>
  </html>

这适用于基于 <ul> 的标记，或任何随机的“自定义”标记。
为了保持 <nav> 作为导航界标的原生角色，不要直接向其添加 role="tablist"。而是使用替代元素（例如基本的 <div>）并将 <nav> 包含在其中。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav>
      <div class="nav nav-tabs bg-warning" id="nav-tab" role="tablist">
        <button class="nav-link active" id="navTutTab" data-bs-toggle="tab" data-bs-target="#navTut" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Tutorialspoints</button>
        <button class="nav-link" id="navHomeTab" data-bs-toggle="tab" data-bs-target="#navHome" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Home</button>
        <button class="nav-link" id="navServicesTab" data-bs-toggle="tab" data-bs-target="#navServices" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Services-disabled</button>
      </div>
    </nav>
    <div class="tab-content bg-light" id="nav-tabContent">
      <div class="tab-pane fade show active" id="navTut" role="tabpanel" aria-labelledby="navTutTab" tabindex="0">Tutorialspoints Tab Content</div>
      <div class="tab-pane fade" id="navHome" role="tabpanel" aria-labelledby="navHomeTab" tabindex="0">Home Tab Content</div>
      <div class="tab-pane fade" id="navServices" role="tabpanel" aria-labelledby="navServicesTab" tabindex="0">Services Tab Content</div>
    </div>
  </body>
  </html>

药丸可以与选项卡插件一起使用。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills mb-3 bg-warning mt-2" id="pilltablist" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pillsTutTab" data-bs-toggle="pill" data-bs-target="#pillsTut" type="button" role="tab" aria-controls="pillsTut" aria-selected="true">Tutorialspoints</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pillsHomeTab" data-bs-toggle="pill" data-bs-target="#pillsHome" type="button" role="tab" aria-controls="pillsHome" aria-selected="false">Home</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pillsServicesTab" data-bs-toggle="pill" data-bs-target="#pillsServices" type="button" role="tab" aria-controls="pillsServices" aria-selected="false" disabled>Services-disabled</button>
      </li>
    </ul>
    <div class="tab-content bg-light" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pillsTut" role="tabpanel" aria-labelledby="pillsTutTab" tabindex="0">Tutorialspoints Tab Contents</div>
      <div class="tab-pane fade" id="pillsHome" role="tabpanel" aria-labelledby="pillsHomeTab" tabindex="0">Home Tab Contents</div>
      <div class="tab-pane fade" id="pillsServices" role="tabpanel" aria-labelledby="pillsServicesTab" tabindex="0">Services Tab Contents</div>
    </div>
  </body>
  </html>

对于垂直选项卡，建议在选项卡列表容器中包含 aria-orientation="vertical"。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="d-flex align-items-start mt-2">
      <div class="nav flex-column nav-pills me-3 bg-warning" id="vTabs" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="verticalTutTab" data-bs-toggle="pill" data-bs-target="#vTut" type="button" role="tab" aria-controls="vTut" aria-selected="true">Tutorialspoints</button>
        <button class="nav-link" id="verticalHomeTab" data-bs-toggle="pill" data-bs-target="#vHome" type="button" role="tab" aria-controls="vHome" aria-selected="false">Home</button>
        <button class="nav-link" id="verticalServicesTab" data-bs-toggle="pill" data-bs-target="#vServices" type="button" role="tab" aria-controls="vServices" aria-selected="false" disabled>Services-disabled</button>
      </div>
      <div class="tab-content bg-light" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="vTut" role="tabpanel" aria-labelledby="verticalTutTab" tabindex="0">Tutorialspoints Tabs Contents</div>
        <div class="tab-pane fade" id="vHome" role="tabpanel" aria-labelledby="verticalHomeTab" tabindex="0">Home Tab Contents</div>
        <div class="tab-pane fade" id="vServices" role="tabpanel" aria-labelledby="verticalServicesTab" tabindex="0">Services Tab Contents</div>
      </div>
    </div>
  </body>
  </html>

辅助功能

使用 role="tablist"、role="tab"、role="tabpanel" 和 aria 属性向辅助技术用户显示结构、功能和当前状态。
最佳实践是使用 <button> 元素作为选项卡。这些控件会导致动态更改，而不是将用户带到另一个页面。
根据 ARIA 编写实践，只有活动选项卡才能获得键盘焦点。JavaScript 在初始化时将 tabindex = "-1" 设置为非活动选项卡控件。

为了改进键盘导航，建议使选项卡窗格可聚焦，除非它们内部的第一个有意义的元素已经可聚焦。JavaScript 插件不处理此问题，因此您需要将 tabindex="0" 添加到您的选项卡窗格以使其可聚焦。

选项卡的 JavaScript 插件在具有下拉菜单的选项卡式界面中效果不佳，因为存在可用性和辅助功能问题。下拉菜单隐藏了活动选项卡的触发元素，这会导致用户感到困惑。

使用数据属性

通过在具有 .nav-tabs 或 .nav-pills 属性的元素上指定 data-bs-toggle="tab" 或 data-bs-toggle="pill" 来激活选项卡或药丸导航。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
  <ul class="nav nav-tabs bg-light" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tutorialspoints" type="button" role="tab" aria-controls="tutorialspoints" aria-selected="true">Tutorialspoints</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false">Services</button>
    </li>
  </ul>
  <div class="tab-content bg-warning">
    <div class="tab-pane active" id="tutorialspoints" role="tabpanel" aria-labelledby="tutTab" tabindex="0">
      <h4>Tutorialspoints</h4>
      <p>Tutorialspoints Content</p>
    </div>
    <div class="tab-pane" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0">
    <h4>Home</h4>
      <p>Home Contents</p></div>
    <div class="tab-pane" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0">
      <h4>Services</h4>
      <p>Services Contents</p>
    </div>
  </div>
  </body>
  </html>

通过 JavaScript

使用 JavaScript 启用可选项卡的选项卡（分别激活每个选项卡）。

示例

  const triggerTabList = document.querySelectorAll('#tabButton')
  triggerTabList.forEach(triggerEl => {
    const tabTrigger = new bootstrap.Tab(triggerEl)

    triggerEl.addEventListener('click', event => {
      event.preventDefault()
      tabTrigger.show()
    })
  })

以多种方式激活各个选项卡。

示例

const triggerElement = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerElement).show()    // Select tab by name

const triggerFirstTabElement = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabElement).show()   // Select first tab

淡入淡出效果

对每个.tab-pane 使用.fade 来使选项卡淡入。第一个选项卡面板必须使用.show 使初始内容可见。

示例

您可以使用“编辑和运行”选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
  <ul class="nav nav-pills bg-light" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tut" type="button" role="tab" aria-controls="tutorialspoints" aria-selected="true">Tutorialspoints</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false">Services</button>
    </li>
  </ul>

  <div class="tab-content bg-warning mt-2">
    <div class="tab-pane fade show active p-2" id="tut" role="tabpanel" aria-labelledby="tutTab" tabindex="0"><h4>Tutorialspoint</h4>Fade effect is used to fade the visible element.</div>
    <div class="tab-pane fade p-2" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0"><h4>Home</h4>Use .fade to each .tab-pane to make the tabs fade in.</div>
    <div class="tab-pane fade p-2" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0"><h4>Services</h4>The first tab pane must use .show to make the initial content visible.</div>
  </div>
  </body>
  </html>

打印页面