Navs and tabs导航和选项卡

~~Documentation and examples for how to use Bootstrap’s included navigation components.~~有关如何使用Bootstrap附带的导航组件的文档和示例。

~~On this page~~本页内容

Base nav基本导航

~~Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states.~~ Bootstrap中可用的导航共享常规标记和样式，从基本.nav类到活动和禁用状态。~~Swap modifier classes to switch between each style.~~交换修改器类以在每个样式之间切换。

~~The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components.~~ 基本.nav组件是用弹性盒构建的，为构建所有类型的导航组件提供了坚实的基础。~~It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.~~它包括一些样式替代（用于处理列表）、一些链接填充（用于较大的点击区域）和基本禁用样式。

~~The base .nav component does not include any .active state.~~ 基本.nav组件不包括任何.active状态。~~The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.~~下面的示例包括该类，主要是为了证明该特定类不会触发任何特殊样式。

~~To convey the active state to assistive technologies, use the aria-current attribute — using the page value for current page, or true for the current item in a set.~~要将活动状态传递给辅助技术，请使用aria-current属性-使用当前页面的page值，或在集合中当前项上使用true。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

~~Classes are used throughout, so your markup can be super flexible.~~ 类在整个过程中使用，因此您的标记可以非常灵活。~~Use <ul>s like above, <ol> if the order of your items is important, or roll your own with a <nav> element.~~ 如上所示使用<ul>，但如果项的顺序很重要，则使用<ol>，或使用<nav>元素手动滚动。~~Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.~~因为.nav使用display:flex，所以导航链接的行为与导航项相同，但没有额外的标记。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Available styles可用样式

~~Change the style of .navs component with modifiers and utilities.~~ 使用修改器和实用程序更改.nav组件的样式。~~Mix and match as needed, or build your own.~~根据需要混合搭配，或打造自己的产品。

Horizontal alignment水平对齐

~~Change the horizontal alignment of your nav with flexbox utilities.~~ 使用弹性盒实用程序更改导航的水平对齐方式。~~By default, navs are left-aligned, but you can easily change them to center or right aligned.~~默认情况下，导航是左对齐的，但您可以轻松地将其更改为居中或右对齐。

~~Centered with .justify-content-center:~~使用.justify-content-center居中。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

~~Right-aligned with .justify-content-end:~~使用.justify-content-end向右对齐：

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

Vertical垂直的

~~Stack your navigation by changing the flex item direction with the .flex-column utility.~~ 通过使用.flex-column实用程序更改弹性项的方向来堆叠导航。~~Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).~~需要将它们堆叠在某些视口上，而不是其他视口上？使用响应版本（例如.flex-sm-column）。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

~~As always, vertical navigation is possible without <ul>s, too.~~与往常一样，垂直导航可以没有<ul>。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Tabs选项卡

~~Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.~~ 从上面获取基本导航并添加.nav-tabs类以生成选项卡式界面。~~Use them to create tabbable regions with our tab JavaScript plugin.~~使用它们来使用我们的选项卡JavaScript插件创建选项卡区域。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

Pills胶囊

~~Take that same HTML, but use .nav-pills instead:~~使用相同的HTML，但改用.nav-pills：

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

Fill and justify填充和行内对齐

~~Force your .nav’s contents to extend the full available width one of two modifier classes.~~ 强制.nav的内容扩展两个修饰符类之一的全部可用宽度。~~To proportionately fill all available space with your .nav-items, use .nav-fill.~~ 要用.nav-item按比例填充所有可用空间，请使用.nav-fill。~~Notice that all horizontal space is occupied, but not every nav item has the same width.~~请注意，所有水平空间都已被占用，但并非每个导航项目都具有相同的宽度。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

~~When using a <nav>-based navigation, you can safely omit .nav-item as only .nav-link is required for styling <a> elements.~~使用基于<nav>的导航时，您可以安全地忽略.nav-item，因为只有.nav-link是样式化<a>元素所必需的。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

~~For equal-width elements, use .nav-justified.~~ 对于等宽元素，请使用.nav-justified。~~All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.~~所有水平空间将被导航链接占用，但与上面的.nav-fill不同，每个导航项的宽度都相同。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

~~Similar to the .nav-fill example using a <nav>-based navigation.~~使用基于<nav>的导航与使用.nav-fill的示例类似。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Working with flex utilities使用flex实用程序

~~If you need responsive nav variations, consider using a series of flexbox utilities.~~ 如果您需要响应性的导航变化，考虑使用一系列弹性盒实用工具。~~While more verbose, these utilities offer greater customization across responsive breakpoints.~~ 虽然更详细，但这些实用程序跨响应断点提供了更大的自定义。~~In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.~~在下面的示例中，我们的导航将堆叠在最低的断点上，然后适应水平布局，从小断点开始填充可用宽度。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Regarding accessibility关于无障碍

~~If you’re using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation.~~ 如果您使用navs提供导航栏，请确保添加role="navigation"到<ul>的最符合逻辑的父容器，或包裹一个<nav>元素围绕整个导航。~~Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.~~不要将角色添加到<ul>它本身，因为这将阻止它被辅助技术宣布为一个实际的列表。

~~Note that navigation bars, even if visually styled as tabs with the .nav-tabs class, should not be given role="tablist", role="tab" or role="tabpanel" attributes.~~ 请注意，即使导航栏在视觉上被设计为带有.nav-tabs类的选项卡，也不应被赋予role="tablist"、role="tab"或role="tabpanel"属性。~~These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices.~~ 这些仅适用于动态选项卡式界面，如WAI ARIA创作实践中所述。~~See JavaScript behavior for dynamic tabbed interfaces in this section for an example.~~ 有关示例，请参阅本节中动态选项卡式界面的JavaScript行为。~~The aria-current attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding aria-selected="true" on the active tab.~~动态选项卡式界面上不需要aria-current属性，因为我们的JavaScript通过在“活动”选项卡上添加aria-selected="true"来处理选中状态。

Using dropdowns使用下拉列表

~~Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.~~添加带有一点额外HTML和下拉JavaScript插件的下拉菜单。

Tabs with dropdowns带有下拉列表的选项卡

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

Pills with dropdowns使用下拉列表的胶囊

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

Sass

Variables变量

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $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:           $gray-600;
$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

JavaScript behaviorJavaScript行为

~~Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content.~~使用tab JavaScript插件单独包含它或通过编译的bootstrap.js文件扩展导航选项卡和药丸，以创建本地内容的可选项卡窗格。

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). 如WAI ARIA创作实践中所述，动态标签界面要求role="tablist"、role="tab"、role="tabpanel"，以及其他aria-属性，以便向辅助技术用户（如屏幕阅读器）传达其结构、功能和当前状态。~~As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.~~作为最佳实践，我们建议为选项卡使用<button>元素，因为这些元素是触发动态更改的控件，而不是导航到新页面或位置的链接。

~~Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues.~~ 注意，动态选项卡界面不应包含下拉菜单，因为这会导致可用性和可访问性问题。~~From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion.~~ 从可用性的角度来看，当前显示的选项卡的触发器元素不是立即可见的（因为它位于关闭的下拉菜单中）这一事实可能会引起混淆。From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.从可访问性的角度来看，目前没有合理的方法将这种构造映射到标准WAI ARIA模式，这意味着辅助技术的用户无法容易地理解它。

~~This is some placeholder content the Home 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.~~ 选项卡JavaScript交换类以控制内容可见性和样式。~~You can use it with tabs, pills, and any other .nav-powered navigation.~~您可以将其与标签、药丸和任何其他.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.~~ 选项卡JavaScript交换类以控制内容可见性和样式。~~You can use it with tabs, pills, and any other .nav-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.~~ 选项卡JavaScript交换类以控制内容可见性和样式。~~You can use it with tabs, pills, and any other .nav-powered navigation.~~您可以将其与标签、药丸和任何其他.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" 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="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

~~To help fit your needs, this works with <ul>-based markup, as shown above, or with any arbitrary “roll your own” markup.~~ 为了帮助满足您的需要，这可以与基于<ul>的标记一起使用，如上文所示，也可以与任何任意的“滚动自己”标记一起使用。~~Note that if you’re using <nav>, you shouldn’t add role="tablist" directly to it, as this would override the element’s native role as a navigation landmark.~~ 注意，如果您正在使用<nav>，则不应直接给它添加role="tablist"；因为这将覆盖元素作为导航地标的本地角色。~~Instead, switch to an alternative element (in the example below, a simple <div>) and wrap the <nav> around it.~~相反，切换到另一个元素（在下面的示例中，是一个简单的<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>
</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">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

~~The tabs plugin also works with pills.~~标签插件也适用于药丸。

This is some placeholder content the Home 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 .nav-powered navigation.

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 .nav-powered navigation.

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 .nav-powered navigation.

<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>
</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">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

~~And with vertical pills.~~还有垂直药丸。

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 .nav-powered navigation.

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 .nav-powered navigation.

<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-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">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>

Using data attributes使用数据属性

~~You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-bs-toggle="tab" or data-bs-toggle="pill" on an element.~~ 您可以通过在元素上简单地指定data-bs-toggle="tab"或data-bs-toggle="pill"来激活标签或药丸导航，而无需编写任何JavaScript。~~Use these data attributes on .nav-tabs or .nav-pills.~~在.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">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Via JavaScript

~~Enable tabbable tabs via JavaScript (each tab needs to be activated individually):~~通过JavaScript启用选项卡（每个选项卡需要单独激活）：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

~~You can activate individual tabs in several ways:~~您可以通过多种方式激活各个选项卡：

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

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

Fade effect淡入效果

~~To make tabs fade in, add .fade to each .tab-pane.~~ 要使选项卡淡入，请在每个.tab-pane中添加.tab-pane。~~The first tab pane must also have .show to make the initial content visible.~~第一个选项卡窗格还必须具有.show以使初始内容可见。

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

Methods方法

Asynchronous methods and transitions异步方法和转换

~~All API methods are asynchronous and start a transition.~~ 所有API方法都是异步的，并开始转换。~~They return to the caller as soon as the transition is started but before it ends.~~ 转换一开始，它们就返回到调用者，但在转换结束之前。~~In addition, a method call on a transitioning component will be ignored.~~此外，转换组件上的方法调用将被忽略。

~~See our JavaScript documentation for more information~~有关更多信息，请参阅JavaScript文档.

constructor构造函数

~~Activates a tab element and content container.~~ 激活选项卡元素和内容容器。~~Tab should have either a data-bs-target or, if using a link, an href attribute, targeting a container node in the DOM.~~Tab应具有data-bs-target，如果使用链接，则应具有href属性，以DOM中的容器节点为目标。

<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>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab li:last-child button')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>

show

~~Selects the given tab and shows its associated pane.~~ 选择给定选项卡并显示其关联窗格。~~Any other tab that was previously selected becomes unselected and its associated pane is hidden.~~ 先前选定的任何其他选项卡都将变为未选中状态，其关联窗格将隐藏。~~Returns to the caller before the tab pane has actually been shown~~在选项卡窗格实际显示之前返回给调用者 ~~(i.e. before the shown.bs.tab event occurs).~~（即在shown.bs.tab事件发生之前）。

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()

dispose

~~Destroys an element’s tab.~~销毁元素的选项卡。

getInstance

Static method which allows you to get the tab instance associated with a DOM element静态方法，允许您获取与DOM元素关联的选项卡实例

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialised静态方法，允许您获取与DOM元素关联的选项卡实例，或者在未初始化的情况下创建一个新的选项卡实例

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Events事件

~~When showing a new tab, the events fire in the following order:~~显示新选项卡时，事件按以下顺序启动：

hide.bs.tab ~~(on the current active tab)~~（在当前活动选项卡上）
show.bs.tab ~~(on the to-be-shown tab)~~（在待显示选项卡上）
hidden.bs.tab ~~(on the previous active tab, the same one as for the hide.bs.tab event)~~（在上一个活动选项卡上，与hide.bs.tab事件相同）
shown.bs.tab ~~(on the newly-active just-shown tab, the same one as for the show.bs.tab event)~~（在刚刚显示的新活动选项卡上，与show.bs.tab事件相同）

~~If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.~~如果没有选项卡已处于活动状态，则不会触发hide.bs.tab和hidden.bs.tab事件。

~~Event type~~事件类型	~~Description~~描述
`show.bs.tab`	~~This event fires on tab show, but before the new tab has been shown.~~ 此事件在选项卡显示时触发，但在显示新选项卡之前。~~Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.~~使用`event.target`和`event.relatedTarget`分别针对活动选项卡和上一个活动选项卡（如果可用）。
`shown.bs.tab`	~~This event fires on tab show after a tab has been shown.~~ 显示选项卡后，选项卡显示时触发此事件。~~Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.~~使用`event.target`和`event.relatedTarget`分别针对活动选项卡和上一个活动选项卡（如果可用）。
`hide.bs.tab`	~~This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).~~ 当要显示新选项卡时（因此要隐藏上一个活动选项卡），会触发此事件。~~Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.~~使用`event.target`和`event.relatedTarget`分别以当前活动选项卡和即将激活的新选项卡为目标。
`hidden.bs.tab`	~~This event fires after a new tab is shown (and thus the previous active tab is hidden).~~ 此事件在显示新选项卡后激发（从而隐藏上一个活动选项卡）。~~Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.~~使用`event.target`和`event.relatedTarget`分别针对上一个活动选项卡和新的活动选项卡。

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