Список групи

Групи списків — це гнучкий і потужний компонент для відображення серії вмісту. Змінюйте та розширюйте їх, щоб підтримувати практично будь-який вміст.

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

Базовий приклад

Основна група списків — це невпорядкований список із елементами списку та відповідними класами. Створіть його за допомогою наведених нижче параметрів або за потреби за допомогою власного CSS.

Предмет
Другий пункт
Третій пункт
Четвертий пункт
І п'ятий

html

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Активні елементи

Додайте .activeдо a, .list-group-itemщоб вказати поточний активний вибір.

Активний предмет
Другий пункт
Третій пункт
Четвертий пункт
І п'ятий

html

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Вимкнені предмети

Додайте .disabledдо a .list-group-item, щоб він виглядав вимкненим. Зауважте, що деякі елементи з .disabledтакож вимагатимуть спеціального JavaScript, щоб повністю вимкнути їхні події клацання (наприклад, посилання).

Відключений елемент
Другий пункт
Третій пункт
Четвертий пункт
І п'ятий

html

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Посилання та кнопки

Використовуйте <a>s або <button>s, щоб створити дієві елементи групи списку зі станами наведення, вимкнення та активного, додавши .list-group-item-action. Ми відокремлюємо ці псевдокласи, щоб гарантувати, що групи списків, які складаються з неінтерактивних елементів (наприклад <li>, s або <div>s), не надають можливості клацання або торкання.

Обов'язково не використовуйте тут стандартні .btnкласи .

Поточний елемент посилання Другий пункт посилання Третій пункт посилання Четвертий елемент посилання Вимкнений елемент посилання

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

За допомогою <button>s ви також можете використовувати disabledатрибут замість .disabledкласу. На жаль, <a>s не підтримує атрибут disabled.

html

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Промити

Додайте .list-group-flush, щоб видалити деякі рамки та закруглені кути, щоб відтворити елементи групи списку від краю до краю в батьківському контейнері (наприклад, картки).

Предмет
Другий пункт
Третій пункт
Четвертий пункт
І п'ятий

html

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Пронумерований

Додайте .list-group-numberedклас-модифікатор (і, за бажанням, використовуйте <ol>елемент), щоб увімкнути нумеровані елементи групи списку. Числа генеруються за допомогою CSS (на відміну від <ol>стилю веб-переглядача за замовчуванням) для кращого розміщення елементів групи списку та для кращого налаштування.

Числа генеруються за допомогою counter-resetна <ol>, а потім стилізуються та розміщуються за допомогою ::beforeпсевдоелемента на <li>з counter-incrementі content.

Елемент списку
Елемент списку
Елемент списку

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Вони також чудово працюють із спеціальним вмістом.

Підзаголовок
Вміст для елемента списку
14
Підзаголовок
Вміст для елемента списку
14
Підзаголовок
Вміст для елемента списку
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Горизонтальний

Додайте .list-group-horizontal, щоб змінити розташування елементів групи списку з вертикального на горизонтальне в усіх точках розриву. Крім того, виберіть адаптивний варіант .list-group-horizontal-{sm|md|lg|xl|xxl}, щоб зробити групу списку горизонтальною, починаючи з цієї точки зупину min-width. Наразі групи горизонтальних списків не можна поєднувати з групами списків на злив.

Підказка: бажаєте групувати елементи списку однакової ширини в горизонтальному положенні? Додайте .flex-fillдо кожного елемента групи списку.

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

html

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Контекстні заняття

Використовуйте контекстні класи, щоб стилізувати елементи списку з фоном і кольором із збереженням стану.

Простий стандартний елемент групи списку
Простий основний елемент групи списку
Простий вторинний елемент групи списку
Простий елемент групи успішного списку
Простий елемент групи небезпек
Простий елемент групи попереджень
Простий елемент групового списку інформації
Простий легкий елемент групи списку
Простий темний елемент групи списку

html

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Контекстні класи також працюють з .list-group-item-action. Зверніть увагу на додавання стилів наведення, яких немає в попередньому прикладі. Також підтримується .activeдержава; застосувати його для позначення активного вибору в елементі групи контекстного списку.

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Передача значення допоміжним технологіям

Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .visually-hiddenкласом.

Зі значками

Додайте значки до будь-якого елемента групи списку, щоб відображати кількість непрочитаних, активність тощо за допомогою деяких утиліт .

Елемент списку14
Другий пункт списку2
Третій пункт списку1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Спеціальний контент

За допомогою утиліт flexbox додайте майже будь-який HTML-код, навіть для пов’язаних груп списків, як наведений нижче .

Заголовок елемента групи списку

3 дні тому

Деякий вміст заповнювача в абзаці.

І трохи дрібного шрифту.

Заголовок елемента групи списку

3 дні тому

Деякий вміст заповнювача в абзаці.

І трохи приглушеного дрібного шрифту.

Заголовок елемента групи списку

3 дні тому

Деякий вміст заповнювача в абзаці.

І трохи приглушеного дрібного шрифту.

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Прапорці та радіо

Розмістіть прапорці та перемикачі Bootstrap у елементах групи списку та налаштуйте їх за потреби. Ви можете використовувати їх без <label>s, але не забудьте включити aria-labelатрибут і значення для доступності.

Перший прапорець
Другий прапорець
Третій прапорець

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Перше радіо
Друге радіо
Третє радіо

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Ви можете використовувати .stretched-linkon <label>s, щоб зробити весь елемент групи списку доступним для натискання.

Перший прапорець
Другий прапорець
Третій прапорець

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Змінні

Додано у v5.2.0

У рамках розвитку підходу Bootstrap до змінних CSS групи списків тепер використовують локальні змінні CSS .list-groupдля покращеного налаштування в реальному часі. Значення для змінних CSS встановлюються через Sass, тому налаштування Sass все ще підтримується.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Змінні Sass

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Міксини

Використовується в поєднанні з $theme-colorsдля створення класів контекстних варіантів для .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Петля

Цикл, який генерує класи-модифікатори за допомогою list-group-item-variant()mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Поведінка JavaScript

Використовуйте плагін JavaScript для вкладок — додайте його окремо або через скомпільований bootstrap.jsфайл — щоб розширити нашу групу списків для створення панелей із вкладками локального вмісту.

додому Профіль Повідомлення Налаштування

Деякий вміст заповнювача в абзаці, що стосується «Домашньої». І ще трохи вмісту, який використовується тут лише для того, щоб заповнити цю панель вкладок. У виробництві ви, очевидно, матимете тут більше реального вмісту. І не тільки текст. Це може бути що завгодно, насправді. Текст, зображення, форми.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Використання атрибутів даних

Ви можете активувати групову навігацію списком без написання JavaScript, просто вказавши data-bs-toggle="list"або на елементі. Використовуйте ці атрибути даних на .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

Через JavaScript

Увімкнути елемент списку з вкладками за допомогою JavaScript (кожен елемент списку потрібно активувати окремо):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Ви можете активувати окремий елемент списку кількома способами:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

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

методи

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

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

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

Активує ваш вміст як елемент вкладки.

Ви можете створити екземпляр вкладки за допомогою конструктора, наприклад:

const bsTab = new bootstrap.Tab('#myTab')

метод	опис
`dispose`	Знищує вкладку елемента.
`getInstance`	Статичний метод, який дозволяє вам отримати екземпляр вкладки, пов’язаний з елементом DOM, ви можете використовувати його так: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Статичний метод, який повертає екземпляр вкладки, пов’язаний з елементом DOM, або створює новий, якщо він не був ініціалізований. Ви можете використовувати його так: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Вибирає вказану вкладку та показує пов’язану з нею панель. Будь-яка інша раніше вибрана вкладка стає невибраною, а відповідна панель прихована. Повертається до абонента до того, як буде фактично показано панель вкладок (тобто до того , як відбудеться `shown.bs.tab`подія).

Події

Під час показу нової вкладки події запускаються в такому порядку:

hide.bs.tab(на поточній активній вкладці)
show.bs.tab(на вкладці для показу)
hidden.bs.tab(на попередній активній вкладці, така ж, як і для hide.bs.tabподії)
shown.bs.tab(на щойно показаній щойно активній вкладці, тій самій, що й для show.bs.tabподії)

Якщо жодна вкладка ще не була активною, події hide.bs.tabта hidden.bs.tabне запускатимуться.

Тип події	опис
`hide.bs.tab`	Ця подія запускається, коли потрібно показати нову вкладку (і, отже, попередню активну вкладку потрібно приховати). Використовуйте `event.target`та `event.relatedTarget`для націлювання на поточну активну вкладку та нову вкладку, яка незабаром стане активною відповідно.
`hidden.bs.tab`	Ця подія запускається після показу нової вкладки (тому попередня активна вкладка прихована). Використовуйте `event.target`та `event.relatedTarget`для націлювання на попередню активну вкладку та нову активну вкладку відповідно.
`show.bs.tab`	Ця подія запускається під час показу вкладок, але до того, як буде показано нову вкладку. Використовуйте `event.target`та `event.relatedTarget`для націлювання на активну вкладку та попередню активну вкладку (якщо доступна) відповідно.
`shown.bs.tab`	Ця подія запускається під час показу вкладок після показу вкладки. Використовуйте `event.target`та `event.relatedTarget`для націлювання на активну вкладку та попередню активну вкладку (якщо доступна) відповідно.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})