Група листа

Групе листа су флексибилна и моћна компонента за приказивање низа садржаја. Измените их и проширите да подрже скоро сваки садржај унутар.

На овој страници

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

Најосновнија група листа је неуређена листа са ставкама листе и одговарајућим класама. Надоградите га са опцијама које следе или са сопственим ЦСС-ом по потреби.

Ставка
Друга ставка
Трећа ставка
Четврта ставка
И пети

хтмл

<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у а .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у а .list-group-itemда би изгледало онемогућено. Имајте на уму да ће неки елементи са .disabledтакође захтевати прилагођени ЈаваСцрипт да би у потпуности онемогућили кликове (нпр. везе).

Онемогућена ставка
Друга ставка
Трећа ставка
Четврта ставка
И пети

хтмл

<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>с или <button>с да бисте креирали ставке групе листе које се могу извршити са стањем лебдења, онемогућеним и активним додавањем .list-group-item-action. Одвајамо ове псеудо-класе како бисмо осигурали да групе листа направљене од неинтерактивних елемената (као што су <li>с или <div>с) не пружају могућност клика или додира.

Уверите се да не користите стандардне .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>с, такође можете користити disabledатрибут уместо .disabledкласе. Нажалост, <a>с не подржавају атрибут дисаблед.

хтмл

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

Ставка
Друга ставка
Трећа ставка
Четврта ставка
И пети

хтмл

<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>елемент) да бисте се укључили у нумерисане ставке групе. Бројеви се генеришу преко ЦСС-а (за разлику од <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>

Прилагођени садржај

Додајте скоро било који ХТМЛ унутар, чак и за групе повезаних листа попут оне испод, уз помоћ флекбок услужних програма .

Наслов ставке групе

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>

Поља за потврду и радио

Поставите Боотстрап поља за потврду и радио у оквиру ставки групе листе и прилагодите их по потреби. Можете их користити без <label>с, али не заборавите да укључите aria-labelатрибут и вредност за приступачност.

Прво поље за потврду
Друго поље за потврду
Треће поље за потврду

хтмл

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

Први радио
Други радио
Трећи радио

хтмл

<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-linkон <label>с да бисте омогућили кликање на целу ставку групе листе.

Прво поље за потврду
Друго поље за потврду
Треће поље за потврду

хтмл

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

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС променљивим, групе листа сада користе локалне ЦСС променљиве .list-groupза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$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};

Сасс варијабле

$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-itemс.

@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()миксином.

// 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);
}

ЈаваСцрипт понашање

Користите ЈаваСцрипт додатак картице – укључите га појединачно или кроз компајлирану 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>

Коришћење атрибута података

Можете активирати навигацију по групи листе без писања било каквог ЈаваСцрипта једноставним навођењем 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>

Преко ЈаваСцрипт-а

Омогућите ставку листе са табулаторима путем ЈаваСцрипт-а (свака ставка листе треба да се активира појединачно):

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>

Методе

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

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

Погледајте нашу ЈаваСцрипт документацију за више информација .

Активира ваш садржај као елемент картице.

Можете креирати инстанцу картице помоћу конструктора, на пример:

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

Метод	Опис
`dispose`	Уништава картицу елемента.
`getInstance`	Статички метод који вам омогућава да добијете инстанцу картице повезану са ДОМ елементом, можете је користити овако: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Статичка метода која враћа инстанцу картице која је повезана са ДОМ елементом или креира нову у случају да није иницијализована. Можете га користити овако: `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
  })
})