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>не го поддржуваат оневозможениот атрибут.

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-linkна <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

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, групите на списоци сега користат локални 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()миксинот.

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