Навігація та вкладки

Документація та приклади використання навігаційних компонентів Bootstrap.

На цій сторінці

База нав

Навігація, доступна в 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>елементом. Оскільки .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>

Доступні стилі

Змініть стиль .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вміст розширити всю доступну ширину одного з двох класів модифікаторів. Щоб пропорційно заповнити весь доступний простір вашим .nav-items, використовуйте .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 для забезпечення навігаційної панелі, обов’язково додайте role="navigation"до найбільш логічного батьківського контейнера <ul>, або оберніть <nav>елемент навколо всієї навігації. Не додавайте роль до <ul>себе, оскільки це запобіжить оголошенню її як справжнього списку допоміжними технологіями.

Зауважте, що панелі навігації, навіть якщо візуально оформлено як вкладки з .nav-tabsкласом, не слід надавати атрибути або . Вони підходять лише для динамічних інтерфейсів із вкладками, як описано в WAI ARIA Authoring Practices . Для прикладу перегляньте поведінку JavaScript для динамічних інтерфейсів із вкладками в цьому розділі. Атрибут не є обов’язковим для інтерфейсів із динамічними вкладками, оскільки наш JavaScript обробляє вибраний стан шляхом додавання на активну вкладку.role="tablist"role="tab"role="tabpanel" aria-currentaria-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, тобто її неможливо зробити зрозумілою для користувачів допоміжних технологій.

Це деякий вміст заповнювача, пов’язаний із вмістом вкладки «Домашня сторінка». Натискання іншої вкладки перемикає видимість цієї для наступної. Вкладка 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>

Плагін вкладок також працює з таблетками.

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

І з вертикальними таблетками.

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>

методи

Асинхронні методи та переходи

Усі методи API є асинхронними та починають перехід . Вони повертаються до абонента, щойно перехід починається, але до його завершення . Крім того, виклик методу компонента, що переходить, ігноруватиметься .

Дивіться нашу документацію JavaScript для отримання додаткової інформації .

constructor

Активує елемент вкладки та контейнер вмісту. Вкладка повинна мати атрибут 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()

розпоряджатися

Знищує вкладку елемента.

getInstance

Статичний метод, який дозволяє отримати екземпляр вкладки, пов’язаний з елементом DOM

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

getOrCreateInstance

Статичний метод, який дозволяє отримати екземпляр вкладки, пов’язаний з елементом 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.tabта 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
})