导航与标签页

有关如何使用 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-fill 使用 a 的例子 <nav>基于…的导航。

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>

使用弹性工具

如果你需要响应式导航变体，可以考虑使用一系列 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>

关于可访问性

如果你使用导航（navs）来提供导航栏，请确保将 role="navigation" 添加到 <ul> 的最合适的父容器，或者在整个导航周围包裹一个 <nav> 元素。不要将角色添加到 <ul> 本身，因为这会阻止辅助技术将其作为实际列表进行宣告。

请注意，即使导航栏在视觉上被样式化为带有 .nav-tabs 类的标签页，也不应赋予 role="tablist"、role="tab" 或 role="tabpanel" 属性。这些属性仅适用于动态标签页界面，如 ARIA 编写实践指南的标签页模式中所述。有关本节中动态标签页界面的示例，请参见 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
})