导航和选项卡

使用 Bootstrap 中包含的导航组件的文档和示例。

在此页面上

基本导航

Bootstrap 中提供的导航共享通用标记和样式，从基本的 .nav 类到活动和禁用状态。交换修饰符类以在每种样式之间切换。

基本 .nav 组件使用 flexbox 构建，为构建所有类型的导航组件提供了坚实的基础。它包括一些样式覆盖（用于处理列表）、一些链接填充以获得更大的点击区域以及基本的禁用样式。

基本 .nav 组件不包含任何 .active 状态。以下示例包含该类，主要是为了演示此特定类不会触发任何特殊样式。

要将活动状态传达给辅助技术，请使用 aria-current 属性——对当前页面使用 page 值，或对集合中的当前项目使用 true。

html

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

整个过程中都使用了类，因此你的标记可以非常灵活。像上面一样使用 <ul>，如果项目顺序很重要，则使用 <ol>，或使用 <nav> 元素自己滚动。由于 .nav 使用 display: flex，因此导航链接的行为与导航项目的行为相同，但没有额外的标记。

html

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

可用样式

使用修饰符和实用工具更改 .nav 组件的样式。根据需要混合匹配，或构建自己的样式。

水平对齐

使用 flexbox 实用工具更改导航的水平对齐。默认情况下，导航左对齐，但你可以轻松地将它们更改为居中或右对齐。

使用 .justify-content-center 居中

html

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

使用 .justify-content-end 右对齐

html

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

垂直

使用 .flex-column 实用工具更改 flex 项目方向，以堆叠导航。需要在某些视口中堆叠它们，但在其他视口中则不需要？使用响应式版本（例如，.flex-sm-column）。

html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

与往常一样，也可以在没有 <ul> 的情况下实现垂直导航。

html

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

选项卡

从上面获取基本导航，并添加 .nav-tabs 类以生成选项卡式界面。使用它们通过我们的选项卡 JavaScript 插件创建可选项卡的区域。

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

药丸

使用相同的 HTML，但改用 .nav-pills

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

下划线

使用相同的 HTML，但改用 .nav-underline

html

<ul class="nav nav-underline">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

填充和对齐

使用两个修饰符类之一强制你的 .nav 的内容扩展到可用的全部宽度。要使用 .nav-item 按比例填充所有可用空间，请使用 .nav-fill。请注意，所有水平空间都被占用，但并非每个导航项都具有相同的宽度。

html

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

在使用基于 <nav> 的导航时，你可以安全地省略 .nav-item，因为只有 .nav-link 才需要为 <a> 元素设置样式。

html

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

对于等宽元素，请使用 .nav-justified。所有水平空间都将被导航链接占据，但与上方的 .nav-fill 不同，每个导航项都将具有相同的宽度。

html

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

类似于使用基于 <nav> 的导航的 .nav-fill 示例。

html

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

使用 flex 实用程序

如果您需要响应式导航变体，请考虑使用一系列 flexbox 实用程序。虽然更冗长，但这些实用程序在响应式断点中提供了更大的自定义功能。在下面的示例中，我们的导航将在最低断点上堆叠，然后适应从小型断点开始填充可用宽度的水平布局。

html

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

关于可访问性

如果您使用导航来提供导航栏，请务必向 <ul> 的最合乎逻辑的父容器添加 role="navigation"，或用 <nav> 元素包装整个导航。不要将角色添加到 <ul> 本身，因为这会阻止辅助技术将其宣布为实际列表。

请注意，即使使用 .nav-tabs 类以选项卡的形式进行视觉样式化，导航栏也不应赋予 role="tablist"、role="tab" 或 role="tabpanel" 属性。这些仅适用于动态选项卡界面，如 ARIA 创作实践指南选项卡模式中所述。有关此部分中动态选项卡界面的 JavaScript 行为，请参阅 JavaScript 行为以获取示例。在动态选项卡界面中，aria-current 属性不是必需的，因为我们的 JavaScript 通过在活动选项卡上添加 aria-selected="true" 来处理选定状态。

使用下拉菜单

使用一些额外的 HTML 和下拉菜单 JavaScript 插件添加下拉菜单。

带下拉菜单的选项卡

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

带下拉菜单的药片

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

CSS

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，导航现在在 .nav、.nav-tabs 和 .nav-pills 上使用本地 CSS 变量，以增强实时自定义。CSS 变量的值通过 Sass 设置，因此 Sass 自定义仍然受支持。

在 .nav 基本类上

scss/_nav.scss

--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: #{$nav-link-color};
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

在 .nav-tabs 修饰符类上

scss/_nav.scss

--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

关于 .nav-pills 修饰符类

scss/_nav.scss

--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

在 v5.3.0 中添加

关于 .nav-underline 修饰符类

scss/_nav.scss

--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};

Sass 变量

scss/_variables.scss

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           var(--#{$prefix}secondary-color);
$nav-link-focus-box-shadow:         $focus-ring-box-shadow;

$nav-tabs-border-color:             var(--#{$prefix}border-color);
$nav-tabs-border-width:             var(--#{$prefix}border-width);
$nav-tabs-border-radius:            var(--#{$prefix}border-radius);
$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color);
$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg);
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;

$nav-pills-border-radius:           var(--#{$prefix}border-radius);
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

$nav-underline-gap:                 1rem;
$nav-underline-border-width:        .125rem;
$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color);

JavaScript 行为

使用标签 JavaScript 插件（单独包含或通过已编译的 bootstrap.js 文件包含）来扩展我们的导航标签和药丸，以创建本地内容的可切换窗格。

这是 主页标签 关联内容的一些占位符内容。单击另一个标签将切换此标签的可见性。标签 JavaScript 交换类来控制内容可见性和样式。你可以将其与标签、药丸和任何其他 .nav 驱动的导航一起使用。

这是 个人资料标签 关联内容的一些占位符内容。单击另一个标签将切换此标签的可见性。标签 JavaScript 交换类来控制内容可见性和样式。你可以将其与标签、药丸和任何其他 .nav 驱动的导航一起使用。

这是 联系标签 关联内容的一些占位符内容。单击另一个标签将切换此标签的可见性。标签 JavaScript 交换类来控制内容可见性和样式。你可以将其与标签、药丸和任何其他 .nav 驱动的导航一起使用。

这是 已禁用标签 关联内容的一些占位符内容。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

为了满足你的需求，这适用于基于 <ul> 的标记，如上所示，或任何任意的“自己滚动”标记。请注意，如果你正在使用 <nav>，你不应该直接向其添加 role="tablist"，因为这会覆盖元素作为导航地标的本机角色。相反，切换到一个备用元素（在下面的示例中，是一个简单的 <div>）并在其周围包装 <nav>。

这是 已禁用标签 关联内容的一些占位符内容。

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

标签插件也适用于药丸。

这是 已禁用标签 关联内容的一些占位符内容。

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

以及垂直药丸。理想情况下，对于垂直标签，你还应该向标签列表容器添加 aria-orientation="vertical"。

这是 已禁用标签 关联内容的一些占位符内容。

这是 消息标签 关联内容的一些占位符内容。单击其他标签将切换此标签的可见性以显示下一个标签。标签 JavaScript 交换类以控制内容可见性和样式。您可以在标签、药丸和任何其他 .nav 驱动的导航中使用它。

这是 设置标签 关联内容的一些占位符内容。单击其他标签将切换此标签的可见性以显示下一个标签。标签 JavaScript 交换类以控制内容可见性和样式。您可以在标签、药丸和任何其他 .nav 驱动的导航中使用它。

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

辅助功能

动态选项卡界面（如 ARIA 创作实践指南选项卡模式中所述）需要 role="tablist"、role="tab"、role="tabpanel" 和其他 aria- 属性，以便向辅助技术（例如屏幕阅读器）的用户传达其结构、功能和当前状态。作为最佳实践，我们建议为选项卡使用 <button> 元素，因为这些是触发动态更改的控件，而不是导航到新页面或位置的链接。

根据 ARIA 创作实践模式，只有当前处于活动状态的选项卡才会接收键盘焦点。当 JavaScript 插件初始化时，它将在所有非活动选项卡控件上设置 tabindex="-1"。一旦当前处于活动状态的选项卡获得焦点，光标键就会激活上一个/下一个选项卡。Home 和 End 键分别激活第一个和最后一个选项卡。插件将相应地更改移动 tabindex。但是，请注意，在光标键交互方面，JavaScript 插件不会区分水平和垂直选项卡列表：无论选项卡列表的方向如何，向上和向左的光标都会转到上一个选项卡，向下和向右的光标都会转到下一个选项卡。

一般来说，为了方便键盘导航，建议使选项卡面板本身也具有可聚焦性，除非选项卡面板中包含有意义内容的第一个元素已经具有可聚焦性。JavaScript 插件不会尝试处理此方面——在适当的情况下，您需要通过在标记中添加 tabindex="0" 来明确使选项卡面板具有可聚焦性。

选项卡 JavaScript 插件不支持包含下拉菜单的选项卡界面，因为这会导致可用性和辅助功能问题。从可用性的角度来看，当前显示的选项卡的触发元素不可立即看到（因为它位于关闭的下拉菜单中）这一事实可能会引起混乱。从辅助功能的角度来看，目前没有合理的方法将这种结构映射到标准 WAI ARIA 模式，这意味着辅助技术的用户无法轻松理解它。

使用数据属性

只需在元素上指定 data-bs-toggle="tab" 或 data-bs-toggle="pill"，即可激活选项卡或胶囊导航，而无需编写任何 JavaScript。在 .nav-tabs 或 .nav-pills 上使用这些数据属性。

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

通过 JavaScript

通过 JavaScript 启用可选项卡的选项卡（每个选项卡需要单独激活）

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

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

可以通过多种方式激活各个选项卡

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

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

淡入效果

若要使选项卡淡入，请将 .fade 添加到每个 .tab-pane。第一个选项卡窗格还必须具有 .show 才能使初始内容可见。

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

方法

所有 API 方法都是异步的，并启动一个过渡。它们在过渡启动后立即返回给调用者，但在过渡结束之前。此外，将忽略对正在过渡的组件的方法调用。在我们的 JavaScript 文档中了解更多信息。

将您的内容作为选项卡元素激活。

您可以使用构造函数创建一个选项卡实例，例如

const bsTab = new bootstrap.Tab('#myTab')

方法	说明
`dispose`	销毁元素的选项卡。
`getInstance`	静态方法，允许您获取与 DOM 元素关联的选项卡实例，您可以像这样使用它：`bootstrap.Tab.getInstance(element)`。
`getOrCreateInstance`	静态方法，返回与 DOM 元素关联的选项卡实例，或者在未初始化的情况下创建一个新实例。您可以像这样使用它：`bootstrap.Tab.getOrCreateInstance(element)`。
`show`	选择给定的选项卡并显示其关联的窗格。任何先前选中的其他选项卡都将取消选中，其关联的窗格将被隐藏。在选项卡窗格实际显示之前返回给调用者（即在 `shown.bs.tab` 事件发生之前）。

事件

在显示新选项卡时，事件按以下顺序触发

hide.bs.tab（在当前活动选项卡上）
show.bs.tab（在即将显示的选项卡上）
hidden.bs.tab（在以前的活动选项卡上，与 hide.bs.tab 事件相同）
shown.bs.tab（在新激活的刚刚显示的选项卡上，与 show.bs.tab 事件相同）

如果没有选项卡处于活动状态，则不会触发 hide.bs.tab 和 hidden.bs.tab 事件。

事件类型	说明
`hide.bs.tab`	当新标签页显示（因此之前激活的标签页将隐藏）时触发此事件。使用 `event.target` 和 `event.relatedTarget` 分别定位当前激活的标签页和即将激活的新标签页。
`hidden.bs.tab`	当新标签页显示（因此之前激活的标签页将隐藏）后触发此事件。使用 `event.target` 和 `event.relatedTarget` 分别定位之前激活的标签页和新激活的标签页。
`show.bs.tab`	在标签页显示时触发此事件，但新标签页尚未显示。使用 `event.target` 和 `event.relatedTarget` 分别定位激活的标签页和之前激活的标签页（如果可用）。
`shown.bs.tab`	在标签页显示后触发此事件。使用 `event.target` 和 `event.relatedTarget` 分别定位激活的标签页和之前激活的标签页（如果可用）。

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})