Bootstrap V5.3 : Navs & tabs 导航和标签页中文翻译版

有关如何使用 Bootstrap 包含的导航组件的文档和示例。

基本导航

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

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

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

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

积极
链接
链接
禁用

[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>

类贯穿始终，因此您的标记可以非常灵活。如果物品的顺序很重要，请像上面一样使用 s，或者用元素滚动您自己的 s。因为用途，导航链接的行为与导航项相同，但没有额外的标记。<ul><ol><nav>.navdisplay: 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>

可用样式

使用修饰符和实用程序更改 s 组件的样式。根据需要混合搭配，或构建自己的。.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-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>

与往常一样，垂直导航也可以在没有 s 的情况下进行。<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>

制表符

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

积极
链接
链接
禁用

[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>

填写和对齐

使用两个修饰符类之一强制您的内容扩展整个可用宽度。要用 s 按比例填充所有可用空间，请使用。请注意，所有水平空间都被占用，但并非每个导航项都具有相同的宽度。.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<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>

使用 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>

关于可访问性

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

请注意，导航栏，即使在视觉上样式为类的选项卡，也不应该给出或属性。这些仅适用于动态选项卡式界面，如 ARIA 创作实践指南选项卡模式中所述。有关示例，请参阅本节中动态选项卡式界面的 JavaScript 行为。该属性在动态选项卡式界面上不是必需的，因为我们的 JavaScript 通过添加活动选项卡来处理所选状态。.nav-tabsrole="tablist"role="tab"role="tabpanel"aria-currentaria-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 变量方法的一部分，导航现在在、和上使用本地 CSS 变量来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。.nav.nav-tabs.nav-pills

在基类上：.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

This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other -powered navigation..nav

This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other -powered navigation..nav

This is some placeholder content the Disabled tab’s associated content.

<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>

This is some placeholder content the Disabled tab’s associated content.

<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>

tabs 插件也适用于药丸。

This is some placeholder content the Disabled tab’s associated content.

<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"

This is some placeholder content the Disabled tab’s associated content.

This is some placeholder content the Messages tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other -powered navigation..nav

This is some placeholder content the Settings tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other -powered navigation..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 插件时，它将在所有非活动选项卡控件上设置。当前活动选项卡具有焦点后，光标键将激活上一个/下一个选项卡。和键分别激活第一个和最后一个选项卡。该插件将相应地更改流动选项卡索引。但是，请注意，在光标键交互方面，JavaScript 插件不区分水平和垂直选项卡列表：无论选项卡列表的方向如何，向上和向左光标都会转到上一个选项卡，向下和向右光标都会转到下一个选项卡。tabindex="-1"HomeEnd

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

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

使用数据属性

只需在元素上指定或即可激活选项卡或药丸导航，而无需编写任何 JavaScript。在或上使用这些数据属性。data-bs-toggle="tab"data-bs-toggle="pill".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`	Static 方法，允许您获取与 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

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

事件类型	描述
`hide.bs.tab`	当要显示新选项卡时，将触发此事件（因此将隐藏上一个活动选项卡）。使用和分别定位当前活动选项卡和即将激活的新选项卡。`event.targetevent.relatedTarget`
`hidden.bs.tab`	此事件在显示新选项卡后触发（因此隐藏了上一个活动选项卡）。使用和分别定位上一个活动选项卡和新的活动选项卡。`event.targetevent.relatedTarget`
`show.bs.tab`	此事件在选项卡显示时触发，但在显示新选项卡之前。使用和分别定位活动选项卡和上一个活动选项卡（如果可用）。`event.targetevent.relatedTarget`
`shown.bs.tab`	此事件在显示选项卡后在选项卡显示时触发。使用和分别定位活动选项卡和上一个活动选项卡（如果可用）。`event.targetevent.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
})

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Navs & tabs 导航和标签页

基本导航

可用样式

水平对齐

垂直

制表符

药

下划线

填写和对齐

使用 flex 实用程序

关于可访问性

使用下拉菜单

带有下拉列表的选项卡

带下拉菜单的药丸

CSS系统

变量

Sass 变量

JavaScript 行为

可及性

使用数据属性

通过 JavaScript

淡入淡出效果

方法

事件