Списъчна група

Списъчните групи са гъвкав и мощен компонент за показване на поредица от съдържание. Променете ги и ги разширете, за да поддържат почти всяко съдържание в тях.

На тази страница

Основен пример

Най-основната списъчна група е неподреден списък с елементи от списък и правилните класове. Надграждайте го с опциите, които следват, или със собствен CSS, ако е необходимо.

Артикул
Втори елемент
Трети артикул
Четвърти елемент
И пети

<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, за да посочите текущия активен избор.

Активен елемент
Втори елемент
Трети артикул
Четвърти елемент
И пети

<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, за да деактивират напълно техните събития при кликване (напр. връзки).

Елемент с увреждания
Втори елемент
Трети артикул
Четвърти елемент
И пети

<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класове тук .

Текущият елемент на връзката Втори елемент за връзка Трети елемент за връзка Четвърти елемент за връзка Деактивиран елемент за връзка

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

<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 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, за да премахнете някои граници и заоблени ъгли, за да изобразите елементи от група от списък от край до край в родителски контейнер (напр. карти).

Артикул
Втори елемент
Трети артикул
Четвърти елемент
И пети

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

Елемент от списък
Елемент от списък
Елемент от списък

<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

<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към всеки елемент от списъка.

Артикул
Втори елемент
Трети артикул

Артикул
Втори елемент
Трети артикул

Артикул
Втори елемент
Трети артикул

Артикул
Втори елемент
Трети артикул

Артикул
Втори елемент
Трети артикул

Артикул
Втори елемент
Трети артикул

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

Контекстни класове

Използвайте контекстуални класове, за да стилизирате елементи от списък с фон и цвят, които запазват състоянието.

Обикновен групов елемент от списък по подразбиране
Обикновен първичен групов елемент от списъка
Обикновен вторичен групов елемент от списъка
Обикновен групов елемент от списъка за успех
Обикновен групов елемент от списъка с опасности
Обикновен групов елемент от списъка с предупреждения
Обикновен групов елемент от информационен списък
Обикновен лек елемент от групата от списък
Обикновен групов елемент от тъмен списък

<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държавата; приложете го, за да посочите активна селекция върху елемент от контекстуална група от списък.

<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

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

Персонализирано съдържание

Добавете почти всеки HTML вътре, дори за групи от свързани списъци като тази по-долу, с помощта на помощните програми flexbox .

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

преди 3 дни

Някои заместители на съдържание в абзац.

И малко дребен шрифт.

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

преди 3 дни

Някои заместители на съдържание в абзац.

И малко приглушен дребен шрифт.

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

преди 3 дни

Някои заместители на съдържание в абзац.

И малко приглушен дребен шрифт.

<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атрибут и стойност за достъпност.

Първо квадратче за отметка
Второ поле за отметка
Трета отметка
Четвърто квадратче за отметка
Пето поле за отметка

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

И ако искате <label>s като .list-group-itemза големи засегнати области, можете да направите и това.

Първо квадратче за отметка Второ поле за отметка Трета отметка Четвърто квадратче за отметка Пето поле за отметка

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

дързък

Променливи

$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 (всеки елемент от списък трябва да се активира индивидуално):

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">...</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>

Методи

constructor

Активира елемент от списък и контейнер за съдържание. Разделът трябва да има или , data-bs-targetили , hrefнасочен към контейнерен възел в DOM.

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

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

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

шоу

Избира дадения елемент от списъка и показва свързания с него панел. Всеки друг елемент от списъка, който е бил избран преди това, става неизбран и свързаният с него панел е скрит. Връща се към повикващия, преди панелът с раздели действително да бъде показан (например, преди да shown.bs.tabнастъпи събитието).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

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