導航和選項卡
有關如何使用 Bootstrap 包含的導航組件的文檔和示例。
Base nav
Bootstrap 中可用的導航共享通用標記和样式，從基.nav類到活動和禁用狀態。交換修飾符類以在每種樣式之間切換。
基礎.nav組件使用 flexbox 構建，為構建所有類型的導航組件提供了堅實的基礎。它包括一些樣式覆蓋（用於處理列表）、一些針對較大點擊區域的鏈接填充以及基本的禁用樣式。
基本.nav組件不包含任何.active狀態。下面的例子包含了這個類，主要是為了說明這個特定的類不會觸發任何特殊的樣式。
要將活動狀態傳達給輔助技術，請使用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>類貫穿始終，因此您的標記可以非常靈活。如果您的項目的順序很重要，請使用<ul>上面的 s <ol>，或者使用<nav>元素滾動您自己的。由於.navuses 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>可用樣式
.nav使用修飾符和實用程序更改 s 組件的樣式。根據需要混合和匹配，或構建自己的。
水平對齊
使用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-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>s。
<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的內容擴展兩個修飾符類之一的完整可用寬度。要使用 s 按比例填充所有可用空間，請.nav-item使用.nav-fill. 請注意，所有水平空間都被佔用，但並非每個導航項都具有相同的寬度。
<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內容。.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>對於等寬元素，使用.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-fill使用<nav>基於導航的示例。
<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 實用程序。雖然更冗長，但這些實用程序提供了跨響應斷點的更大定制。在下面的示例中，我們的導航將堆疊在最低斷點上，然後適應水平佈局，從小斷點開始填充可用寬度。
<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>關於可訪問性
如果您使用 navs 來提供導航欄，請務必將 a 添加role="navigation"到 最符合邏輯的父容器中，或者在整個導航周圍<ul>包裹一個元素。<nav>不要將角色添加到<ul>自身，因為這會阻止它被輔助技術宣佈為實際列表。
請注意，導航欄，即使在視覺上被設計為帶有.nav-tabs類的選項卡，也不應該被賦予role="tablist",role="tab"或role="tabpanel"屬性。這些僅適用於動態選項卡式界面，如WAI ARIA創作實踐中所述。有關示例，請參閱本節中動態選項卡式界面的JavaScript 行為。該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>薩斯
變量
$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 行為
使用標籤 JavaScript 插件（單獨包含它或通過編譯bootstrap.js文件包含它）來擴展我們的導航標籤和藥丸，以創建本地內容的可標籤窗格。
如WAI ARIA Authoring Practices中所述，動態選項卡式界面需要role="tablist"、role="tab"、role="tabpanel"和其他aria-屬性，以便將其結構、功能和當前狀態傳達給輔助技術（例如屏幕閱讀器）的用戶。作為最佳實踐，我們建議<button>為選項卡使用元素，因為這些是觸發動態更改的控件，而不是導航到新頁面或位置的鏈接。
請注意，動態選項卡式界面不應包含下拉菜單，因為這會導致可用性和可訪問性問題。從可用性的角度來看，當前顯示的選項卡的觸發元素不是立即可見的（因為它位於關閉的下拉菜單中）這一事實可能會導致混淆。從可訪問性的角度來看，目前還沒有明智的方法將這種結構映射到標準的 WAI ARIA 模式，這意味著輔助技術的用戶不容易理解它。
這是 Home 選項卡的相關內容的一些佔位符內容。單擊另一個選項卡將切換此選項卡的可見性以供下一個選項卡使用。選項卡 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 .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-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>基於 - 的標記，如上所示，或任何任意“滾動您自己的”標記。請注意，如果您使用<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>
</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>
選項卡插件也適用於藥丸。
這是 Home 選項卡的相關內容的一些佔位符內容。單擊另一個選項卡將切換此選項卡的可見性以供下一個選項卡使用。選項卡 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 .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>
並與垂直藥丸。
這是 Home 選項卡的相關內容的一些佔位符內容。單擊另一個選項卡將切換此選項卡的可見性以供下一個選項卡使用。選項卡 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 .nav-powered navigation.
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>
使用數據屬性
您無需編寫任何 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">...</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>
方法
constructor
激活選項卡元素和內容容器。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 a')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
節目
選擇給定的選項卡並顯示其關聯的窗格。之前選擇的任何其他選項卡都將被取消選擇，並且其關聯的窗格被隱藏。在選項卡窗格實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.tab
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
處置
銷毀元素的選項卡。
獲取實例
允許您獲取與 DOM 元素關聯的選項卡實例的靜態方法
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
獲取或創建實例
靜態方法，允許您獲取與 DOM 元素關聯的選項卡實例，或者創建一個新的選項卡以防它未初始化
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(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.taband事件。hidden.bs.tab
| 事件類型 | 描述 |
|---|---|
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
})