Bootstrap - 导航和选项卡

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

基地导航

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

  • 这些项目可以添加到.nav-item类中。

  • 要在项目类中添加链接，请使用.nav-link类。

    • .nav组件中没有.active状态。该类在以下示例中使用，以表明该类没有独特的样式。

    为了传达到屏幕阅读器等辅助技术的活动链接，请使用aria-current属性，其值为当前页面的页面，如果设置了当前项目，则为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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>创建您自己的顺序。导航链接的Behave与导航项类似，因为.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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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组件的样式，如下所示：

    水平对齐

    • 使用Flexbox 实用程序修改导航的水平对齐方式。默认情况下，导航左对齐。导航可以轻松居中或右对齐。

    • 对于居中对齐，请使用 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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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类中的.nav-tab替换为.nav-pills来创建导航药丸菜单。

    例子

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

      <!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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>

    使用 Flex 实用程序

    • 如果您需要响应式导航变化，请使用Flexbox 实用程序。

    • 这些实用程序在所有不同的断点上提供了更多的自定义功能。导航将堆叠在最低断点处，然后切换到从小断点开始跨越整个宽度的水平布局。

    例子

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

      <!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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>

    关于无障碍

    • 对于使用 nav 的导航栏，请将role="navigation"添加到<ul>的父容器或将整个导航包装在<nav>元素中。不要将角色添加到<ul>中，以避免辅助技术将其公布为列表。

    • 样式为.nav-tabs 的导航栏不应具有role="tablist"、role="tab"或role="tabpanel"属性。这特别适用于动态选项卡式界面，如ARIA 创作实践指南的选项卡模式中所述。查看JavaScript Behave部分，获取动态选项卡式界面示例。

    • 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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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 Behave

    使用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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>

    Pills 可以与 tabs 插件一起使用。

    例子

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

      <!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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>