Lista grupului

Grupurile de liste sunt o componentă flexibilă și puternică pentru afișarea unei serii de conținut. Modificați-le și extindeți-le pentru a sprijini aproape orice conținut din interior.

Pe aceasta pagina

Exemplu de bază

Cel mai elementar grup de liste este o listă neordonată cu elemente de listă și clasele adecvate. Construiți pe el cu opțiunile care urmează sau cu propriul dvs. CSS, după cum este necesar.

Un obiect
Un al doilea articol
Un al treilea articol
Un al patrulea articol
Și un al cincilea

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

Elemente active

Adăugați .activela a .list-group-itempentru a indica selecția activă curentă.

Un articol activ
A second item
A third item
A fourth item
And a fifth one

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

Articole dezactivate

Adăugați .disabledla a .list-group-itempentru ca acesta să pară dezactivat. Rețineți că unele elemente cu .disabledvor necesita, de asemenea, JavaScript personalizat pentru a dezactiva complet evenimentele de clic (de exemplu, linkuri).

Un articol dezactivat
A second item
A third item
A fourth item
And a fifth one

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

Legături și butoane

Utilizați <a>s sau <button>s pentru a crea elemente de grup de listă acționabile cu stări de trecere, dezactivat și activ, adăugând .list-group-item-action. Separăm aceste pseudo-clase pentru a ne asigura că grupurile de liste formate din elemente neinteractive (cum ar fi <li>s sau <div>s) nu oferă un clic sau atingere.

Asigurați-vă că nu utilizați clasele standard.btn aici .

Elementul de link curent Un al doilea articol de legătură Un al treilea articol de legătură Un al patrulea articol de legătură Un articol de link dezactivat

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

Cu <button>s, puteți folosi și disabledatributul în locul .disabledclasei. Din păcate, <a>s nu acceptă atributul dezactivat.

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

Culoare

Adăugați .list-group-flushpentru a elimina unele margini și colțuri rotunjite pentru a reda elementele din grupul listei de la margine la margine într-un container părinte (de exemplu, carduri).

Un obiect
Un al doilea articol
Un al treilea articol
Un al patrulea articol
Și un al cincilea

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

Numerotat

Adăugați .list-group-numberedclasa modificatoare (și opțional utilizați un <ol>element) pentru a opta pentru elementele grupului de listă numerotate. Numerele sunt generate prin CSS (spre deosebire de <ol>stilul implicit al browserului) pentru o mai bună plasare în elementele grupului de listă și pentru a permite o mai bună personalizare.

Numerele sunt generate de counter-resetpe <ol>, și apoi stilate și plasate cu un ::beforepseudo-element pe <li>cu counter-incrementși content.

Un articol din listă
Un articol din listă
Un articol din listă

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

Acestea funcționează excelent și cu conținut personalizat.

Subtitlu
Conținut pentru elementul din listă
14
Subtitlu
Conținut pentru elementul din listă
14
Subtitlu
Conținut pentru elementul din listă
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>

Orizontală

Adăugați .list-group-horizontalpentru a modifica aspectul elementelor grupului de liste de la vertical la orizontal în toate punctele de întrerupere. Ca alternativă, alegeți o variantă receptivă .list-group-horizontal-{sm|md|lg|xl|xxl}pentru a face un grup de liste orizontal, începând de la punctul de întrerupere respectiv min-width. În prezent , grupurile de liste orizontale nu pot fi combinate cu grupurile de liste de culoare.

Sfat: doriți elemente de grup de listă cu lățime egală când sunt orizontale? Adăugați .flex-fillla fiecare element de grup din listă.

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

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

Clasele contextuale

Utilizați clase contextuale pentru a stila elementele listei cu un fundal și o culoare cu stare.

Un element simplu de grup de listă implicit
Un element simplu de grup de listă primară
Un simplu element secundar de grup de listă
Un element simplu de grup din lista de succes
Un element simplu de grup din lista de pericole
Un element simplu de grup din lista de avertizare
Un element simplu de grup din lista de informații
Un simplu element de grup de listă luminoasă
Un simplu element de grup din lista întunecată

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

Clasele contextuale funcționează și cu .list-group-item-action. Rețineți că adăugarea stilurilor de hover aici nu este prezentă în exemplul anterior. De asemenea, este sprijinit .activestatul; aplicați-l pentru a indica o selecție activă pe un element de grup de listă contextuală.

Un element simplu de grup de listă implicit Un element simplu de grup de listă primară Un simplu element secundar de grup de listă Un element simplu de grup din lista de succes Un element simplu de grup din lista de pericole Un element simplu de grup din lista de avertizare Un element simplu de grup din lista de informații Un simplu element de grup de listă luminoasă Un simplu element de grup din lista întunecată

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

Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .visually-hiddenclasa.

Cu insigne

Adăugați insigne la orice element din grupul de listă pentru a afișa numărătoarele necitite, activitatea și multe altele, cu ajutorul unor utilitare .

Un articol din listă14
Un al doilea articol din listă2
Un al treilea element din listă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>

Conținut personalizat

Adăugați aproape orice HTML în interior, chiar și pentru grupurile de liste legate, cum ar fi cel de mai jos, cu ajutorul utilitarelor flexbox .

Listează titlul articolului de grup

acum 3 zile

Un conținut de substituent dintr-un paragraf.

Și niște litere mici.

Listează titlul articolului de grup

acum 3 zile

Un conținut de substituent dintr-un paragraf.

Și niște litere mici dezactivate.

Listează titlul articolului de grup

acum 3 zile

Un conținut de substituent dintr-un paragraf.

Și niște litere mici dezactivate.

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

Casete de selectare și radiouri

Plasați casetele de selectare și radiourile Bootstrap în elementele grupului de listă și personalizați după cum este necesar. Le puteți folosi fără <label>s, dar nu uitați să includeți un aria-labelatribut și o valoare pentru accesibilitate.

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

Și dacă doriți <label>s ca .list-group-itempentru zone mari afectate, puteți face și asta.

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

Sass

Variabile

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

Mixine

Folosit în combinație cu $theme-colorspentru a genera clasele de variante contextuale pentru .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;
      }
    }
  }
}

Buclă

Buclă care generează clasele modificatoare cu list-group-item-variant()mixin-ul.

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

Comportamentul JavaScript

Utilizați pluginul JavaScript pentru filă - includeți-l individual sau prin bootstrap.jsfișierul compilat - pentru a extinde grupul nostru de listă pentru a crea panouri de conținut local cu tabele.

Acasă Profil Mesaje Setări

Un conținut de substituent într-un paragraf referitor la „Acasă”. Și încă ceva conținut, folosit aici doar pentru a completa și completa acest panou cu file. În producție, ați avea, evident, mai mult conținut real aici. Și nu doar text. Ar putea fi orice, într-adevăr. Text, imagini, formulare.

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>

Utilizarea atributelor de date

Puteți activa o navigare în grup de listă fără a scrie JavaScript, prin simpla specificare data-bs-toggle="list"sau pe un element. Utilizați aceste atribute de date pe .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>

Prin JavaScript

Activați elementul din listă cu tabele prin JavaScript (fiecare element din listă trebuie activat individual):

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

Puteți activa un element individual din listă în mai multe moduri:

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

Efect de estompare

Pentru a face ca panoul de file să dispară, adăugați .fadela fiecare .tab-pane. De asemenea, primul panou de file trebuie .showsă facă vizibil conținutul inițial.

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

Metode

constructor

Activează un element de listă și un container de conținut. Tab ar trebui să aibă fie un, fie un data-bs-targetnod hrefde container în 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>

spectacol

Selectează elementul din listă dat și arată panoul asociat acestuia. Orice alt element din listă care a fost selectat anterior devine neselectat și panoul asociat este ascuns. Revine la apelant înainte ca panoul de file să fie afișat efectiv (de exemplu, înainte de apariția shown.bs.tabevenimentului).

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

  tab.show()

dispune

Distruge fila unui element.

getInstance

Metodă statică care vă permite să obțineți instanța file asociată cu un element DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Metodă statică care vă permite să obțineți instanța file asociată cu un element DOM sau să creați una nouă în cazul în care nu a fost inițializată

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Evenimente

Când se afișează o filă nouă, evenimentele se declanșează în următoarea ordine:

hide.bs.tab(în fila activă curentă)
show.bs.tab(pe fila de afișat)
hidden.bs.tab(pe fila activă anterioară, aceeași ca pentru hide.bs.tabeveniment)
shown.bs.tab(în fila nou-activă tocmai afișată, aceeași ca și pentru show.bs.tabeveniment)

Dacă nicio filă nu a fost deja activă, evenimentele hide.bs.tabși hidden.bs.tabnu vor fi declanșate.

Tip de eveniment	Descriere
`show.bs.tab`	Acest eveniment se declanșează în afișarea filelor, dar înainte ca noua filă să fie afișată. Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
`shown.bs.tab`	Acest eveniment se declanșează în afișarea filelor după ce a fost afișată o filă. Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
`hide.bs.tab`	Acest eveniment se declanșează atunci când trebuie afișată o filă nouă (și astfel fila activă anterioară trebuie să fie ascunsă). Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă curentă și, respectiv, noua filă care va fi activă în curând.
`hidden.bs.tab`	Acest eveniment se declanșează după ce este afișată o nouă filă (și astfel fila activă anterioară este ascunsă). Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă anterioară și, respectiv, noua filă activă.

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