in English

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

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

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

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

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

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

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

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

преди 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
  })
})