导航和选项卡（Navs & tabs）

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

On this page

基础导航

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

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

基础导航组件不包括任何.active状态。下面的例子包括这个类，主要是为了证明这个特定的类不会触发任何特殊的样式。

要将活动状态传递给辅助技术，请使用aria-current属性-使用当前页面的页面值，或使用集合中当前项的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>

class可以使用在很多地方，因此您的标记可以超级灵活。如果项目的顺序很重要，可以使用与ul类似的ol，或者使用nav元素。因为.nav使用display: flex，因此nav-link与nav-item的行为一样，却不需要有额外的标记。

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

可用样式

使用修饰符、通用类别更改.nav元件的样式。依据需要混合搭配或自行建立。

水平对齐

使用flexbox通用类别更改导航的水平对齐方式。预设情况下导航会向左对齐，但您可以轻松地将其更改为向中心或向右对齐。

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

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

垂直

通过使用.flex-column通用类别更改flex的轴线方向以堆叠导航。如果只希望在特定的viewports下堆叠，可使用响应式版本（例如.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>

像往常一样，垂直导航也可以不用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>

选项卡

使用基本的导航，并加入.nav-tabs以生成具有分页标签的界面。透过我们的分页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>

胶囊

使用相同的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>

填充并对齐

.nav内容有两种宽度扩展用的Class，使用.nav-fill会将.nav-item内容按照比例分配空间。注意，这会占用所有的水平空间，但并不是每个导航项目都具有相同宽度。

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

当使用nav导航时，您可以忽略.nav-item，因为客制化a元素的样式仅需要.nav-link。

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

创建等宽元素请使用.nav-justified。所有的水平空间将被导航连接占据，但与上面的.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>

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

使用flex实用程序

如果需要响应式的导航变化，请使用一系列flexbox通用类别。这些通用类别在断点之间提供更多的自定义设定。在下面的示例中，我们的导航将在最小断点以下堆叠，并从small断点开始采用水平排版以填满所有可用宽度。

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

关于可访问性

如果您是将导航当作导航条使用，那么请务必确保在符合逻辑的ul之父容器上加入role=“navigation”，或使用nav元素包装整个导航条。不要在ul本身添加role，因为这样做将会阻止辅助技术将其声明为列表。

请注意，即使导航条的视觉样式透过.nav-tabs而呈现为分页标签，也应该不会被赋予role=“tablist”，role=“tab”或role=“tabpanel”属性。这些仅适用于动态分页标签界面，如WAI ARIA Authoring Practices中描述。相关示例，请参阅本节中的JavaScript behavior。在动态选项界面上不需要aria-current属性，因为我们的JavaScript透过在活动页签上添加aria-selected=“true”来处理标明状态。

使用下拉列表

加入额外的HTML和下拉菜单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 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>

带下拉列表的胶囊

<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:                    null;
        $nav-link-hover-color:              null;
        $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行为

使用JavaScript分页标签插件-单独或透过编译的bootstrap.js档-扩展我们的导航分页标签和胶囊状分页，以创建可选的分页标签、甚至是下拉菜单。

态页签界面，如WAI ARIA Authoring Practices所描述，需要role=“tablist”、role=“tab”，role=“tabpanel”和附加的aria-属性，向用户提供辅助技术（如屏幕阅读器）的结构、功能和当前状态。

请注意，动态页签应该不包含下拉菜单，因为这会导致可用性和亲和性问题。从可用性的角度来看，当前显示的选项卡的触发器元素不会立即显示（因为它在关闭的下拉菜单中）可能会导致混淆。从亲和性的角度来看，目前还没有明确的方式将这种结构对应到标准的WAI ARIA模式，这意味着不能容易地被用户的辅助技术所理解。

Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

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

为了满足您的需求，它可以与基于ul的标签（如上所示）一起使用，也可以与任意“roll your own”标记一起使用。请注意，如果您使用的是nav，则不应直接向其中添加role=“tablist”，因为这会复写该元素原生的role。取而代之的是，切换到其他元素（在下面的示例中为简单的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>

标签分页插件也能使用于胶囊状页签。

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

还有搭配垂直胶囊状页签。

Placeholder content for the tab panel. This one relates to the home tab. Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that wears the crown. Yes, we make angels cry, raining down on earth from up above. Wanna see the show in 3D, a movie. Do you ever feel, feel so paper thin. It’s a yes or no, no maybe.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

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

使用数据属性

只需在元素上指定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">...</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>

通过JavaScript

透过JavaScript启用分页标签（每一个分页标签需要分别启动）：

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

启用分页标签有以下数种方法：

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
        bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
        
        var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
        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">...</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>

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. 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.

构造

启动分页标签元素和内容容器。标签应该有一个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 a')
        var firstTab = new bootstrap.Tab(firstTabEl)
        
        firstTab.show()
        </script>

显示

选择给定的分页标签并显示其关联的分页内容。之前选择的任何其他分页标签将被取消，并且其关联的内容被隐藏。在Tab内容实际显示之前返回到调用者（即在shown.bs.tab事件发生之前）。

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

销毁

销毁一个元素的分页标签。

获取实例

Static方法，该方法使您可以获取与DOM元素关联的选项实例

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

事件

显示新标签时，事件将按以下顺序触发：

hide.bs.tab（当前活动的分页标签上）
show.bs.tab （待显示的分页标签上）
hidden.bs.tab （在上一个启动的分页标签上，与hide.bs.tab事件相同）
shown.bs.tab（在刚刚显示的新分页标签上，与show.bs.tab事件相同）

如果没有分页标签已经被启动，那么hide.bs.tab和hidden.bs.tab事件不会被触发。

Event type	Description
`show.bs.tab`	这个事件因页签显示而触发，但是会在新页签被显示之前结束。使用event.target和event.relatedTarget将目前与先前启用的页签（如果可用）的作为目标。
`shown.bs.tab`	这个事件在页签显示后触发。使用event.target和event.relatedTarget来分别定位启用中和刚刚启用的页签。
`hide.bs.tab`	新的页签要显示（先前的启用页签将被隐藏）时，此事将触发。使用event.target和event.relatedTarget分别定位先前启用和即将启用的页签。
`hidden.bs.tab`	新的选项显示后（因此先前启用的选项将隐藏），此事件将触发。使用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
        })