Lista di gruppu

I gruppi di lista sò un cumpunente flexible è putente per vede una seria di cuntenutu. Mudificà è estendeli per sustene quasi ogni cuntenutu.

In sta pagina

Esempiu basicu

U gruppu di lista più basica hè una lista senza ordine cù elementi di lista è e classi propiu. Custruite nantu à questu cù l'opzioni chì seguitanu, o cù u vostru propiu CSS cum'è necessariu.

Un articulu
Un secondu articulu
Un terzu articulu
Un quartu articulu
È una quinta

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

Articuli attivi

Aghjunghjite .activeà a .list-group-itemper indicà a selezzione attiva attuale.

Un articulu attivu
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>

Articuli disabilitati

Aghjunghjite .disabledà a .list-group-itemper fà chì pare micca disattivatu. Innota chì certi elementi cù .disabledancu avè bisognu di JavaScript persunalizatu per disattivà cumplettamente i so eventi di clic (per esempiu, ligami).

Un articulu disattivatu
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>

Ligami è buttoni

Aduprate <a>s o <button>s per creà elementi di gruppu di lista azzione cù stati hover, disattivati è attivi aghjunghjendu .list-group-item-action. Separemu queste pseudo-classi per assicurà chì i gruppi di lista fatti di elementi non interattivi (cum'è <li>s o <div>s) ùn furnisce micca un clic o un toccu affordance.

Assicuratevi di ùn aduprà e classi standard.btn quì .

L'elementu ligame attuale Un secondu articulu di ligame Un terzu articulu di ligame Un quartu articulu di ligame Un articulu di ligame disattivatu

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

Cù <button>s, pudete puru aduprà l' disabledattributu invece di a .disabledclassa. Sfortunatamente, <a>s ùn sustene micca l'attributu disattivatu.

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

Flush

Aghjunghjite .list-group-flushper caccià alcuni cunfini è anguli arrotondati per rende l'articuli di u gruppu di lista bordu à bordu in un cuntainer parente (per esempiu, carte).

Un articulu
Un secondu articulu
Un terzu articulu
Un quartu articulu
È una quinta

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

Numeratu

Aghjunghjite a .list-group-numberedclassa di modificatore (è opzionalmente utilizate un <ol>elementu) per optà in elementi di u gruppu di lista numerata. I numeri sò generati via CSS (in uppusizione à un <ol>stilu di navigatore predeterminatu) per un megliu piazzamentu in l'articuli di u gruppu di lista è per permette una persunalizazione megliu.

I numeri sò generati da counter-resetnantu à u <ol>, è dopu stilati è posti cù un ::beforepseudo-elementu nantu à u <li>cù counter-incrementè content.

Un articulu di lista
Un articulu di lista
Un articulu di lista

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

Questi funzionanu bè cù cuntenutu persunalizatu ancu.

Sottutitulu
Cuntenutu per l'elementu di a lista
14
Sottutitulu
Cuntenutu per l'elementu di a lista
14
Sottutitulu
Cuntenutu per l'elementu di a lista
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>

Orizzontale

Aghjunghjite .list-group-horizontalper cambià u layout di l'articuli di u gruppu di lista da verticale à horizontale in tutti i punti di rottura. In alternativa, sceglite una variante responsiva .list-group-horizontal-{sm|md|lg|xl|xxl}per fà un gruppu di lista horizontale partendu da quellu breakpoint min-width. Attualmente i gruppi di lista horizontale ùn ponu esse cumminati cù i gruppi di lista flush.

ProTip: Vulete elementi di u gruppu di liste di larghezza uguale quandu horizontale? Aghjunghjite .flex-fillà ogni articulu di u gruppu di lista.

Un articulu
Un secondu articulu
Un terzu articulu

Un articulu
Un secondu articulu
Un terzu articulu

Un articulu
Un secondu articulu
Un terzu articulu

Un articulu
Un secondu articulu
Un terzu articulu

Un articulu
Un secondu articulu
Un terzu articulu

Un articulu
Un secondu articulu
Un terzu articulu

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

Classi contestuale

Aduprate classi cuntestuali per stilà l'articuli di lista cù un fondu statutu è culore.

Un elementu simplice di gruppu di lista predeterminatu
Un elementu simplice di gruppu di lista primaria
Un elementu simplice di gruppu di lista secundaria
Un elementu simplice di gruppu di lista di successu
Un elementu simplice di gruppu di lista di periculi
Un elementu simplice di u gruppu di lista d'avvertimenti
Un elementu simplice di gruppu di lista d'infurmazioni
Un elementu simplice di gruppu di lista di luce
Un elementu simplice di gruppu di lista scura

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

E classi contextuali travaglianu ancu cù .list-group-item-action. Nota l'aghjunzione di i stili di hover quì micca prisenti in l'esempiu precedente. Hè ancu supportatu u .activestatu; applicà per indicà una selezzione attiva nantu à un articulu di gruppu di lista contextuale.

Un elementu simplice di gruppu di lista predeterminatu Un elementu simplice di gruppu di lista primaria Un elementu simplice di gruppu di lista secundaria Un elementu simplice di gruppu di lista di successu Un elementu simplice di gruppu di lista di periculi Un elementu simplice di u gruppu di lista d'avvertimenti Un elementu simplice di gruppu di lista d'infurmazioni Un elementu simplice di gruppu di lista di luce Un elementu simplice di gruppu di lista scura

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

Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .visually-hiddenclasse.

Cù badges

Aghjunghjite badge à qualsiasi articulu di u gruppu di lista per mostrà cunti micca letti, attività è più cù l'aiutu di alcune utilità .

Un articulu di lista14
Un secondu articulu di lista2
Un terzu articulu di lista1

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

Cuntinutu persunalizatu

Aghjunghjite quasi ogni HTML, ancu per i gruppi di lista ligata cum'è quellu sottu, cù l'aiutu di l'utilità flexbox .

Lista di l'elementu di u gruppu

3 ghjorni fà

Qualchese cuntenutu di placeholder in un paràgrafu.

È un pocu stampatu.

Lista di l'elementu di u gruppu

3 ghjorni fà

Qualchese cuntenutu di placeholder in un paràgrafu.

È qualchì stampa chjuca mutita.

Lista di l'elementu di u gruppu

3 ghjorni fà

Qualchese cuntenutu di placeholder in un paràgrafu.

È qualchì stampa chjuca mutita.

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

Checkboxes è radiu

Pone e caselle di spunta di Bootstrap è e radii in l'articuli di u gruppu di lista è persunalizà cum'è necessariu. Pudete aduprà senza <label>s, ma ricordate di include un aria-labelattributu è valore per l'accessibilità.

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

È se vulete <label>s cum'è .list-group-itemper i grandi spazii di successu, pudete fà ancu.

<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

Variabili

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

Mixins

Adupratu in combinazione cù $theme-colorsper generà e classi di varianti contextuale per .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;
      }
    }
  }
}

Loop

Loop chì genera e classi modificatori cù u 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);
}

Cumportamentu JavaScript

Aduprate u plugin JavaScript di tabulazione - includenu individualmente o attraversu u bootstrap.jsschedariu compilatu - per allargà u nostru gruppu di lista per creà pannelli tabulabili di cuntenutu locale.

A casa Prufilu Missaghji Settings

Qualchidunu cuntenutu di placeholder in un paràgrafu riguardanti "Casa". È un pocu di più cuntenutu, usatu quì solu per pad fora è riempie stu pannellu di tabulazione. In a pruduzzione, avaristi ovviamente più cuntenutu reale quì. È micca solu testu. Puderia esse qualcosa, veramente. Testu, imagine, forme.

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>

Utilizà l'attributi di dati

Pudete attivà una navigazione di u gruppu di lista senza scrive JavaScript per solu specificà data-bs-toggle="list"o nantu à un elementu. Aduprate sti attributi di dati nantu à .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>

Via JavaScript

Habilita l'elementu di lista tabulabile via JavaScript (ogni articulu di lista deve esse attivatu individualmente):

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

Pudete attivà l'elementu di lista individuale in parechje manere:

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

Effettu fade

Per fà chì u pannellu di tabulazioni si dissolve, aghjunghje .fadeà ognunu .tab-pane. U primu pannellu di tabulazione deve ancu .showfà vede u cuntenutu iniziale.

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

I metudi

constructor

Attiva un elementu di l'elementu di lista è u cuntenutu di cuntenutu. A tabulazione deve avè un data-bs-targeto un hreftargeting un node di cuntainer in u 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>

mostra

Selezziunate l'elementu di lista datu è mostra u so pane assuciatu. Qualchese altru articulu di lista chì era sceltu prima ùn hè micca selezziunatu è u so pane assuciatu hè oculatu. Ritorna à u chjamante prima chì u pannellu di tabulazione hè statu veramente mostratu (per esempiu, prima chì l' shown.bs.tabavvenimentu si faci).

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

  tab.show()

disposti

Distrughje una tabulazione di l'elementu.

getInstance

Metudu staticu chì permette di ottene l'istanza di tabulazione assuciata à un elementu DOM

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

getOrCreateInstance

Metudu staticu chì vi permette di uttene l'istanza di tabulazione assuciata à un elementu DOM, o creà un novu in casu ùn hè micca inizializatu

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

Avvenimenti

Quandu mostra una nova tabulazione, l'avvenimenti sparanu in l'ordine seguente:

hide.bs.tab(nantu à a tabulazione attiva attuale)
show.bs.tab(nantu à a tabulazione da vede)
hidden.bs.tab(nantu à a tabulazione attiva precedente, u listessu cum'è per l' hide.bs.tabavvenimentu)
shown.bs.tab(nantu à a tabulazione appena attivata appena mostrata, a stessa chì per l' show.bs.tabavvenimentu)

Se nessuna tabulazione era digià attiva, l' eventi hide.bs.tabè hidden.bs.tabùn saranu micca sparati.

Tipu di avvenimentu	Descrizzione
`show.bs.tab`	Questu avvenimentu spara nantu à a tabulazione, ma prima chì a nova tabulazione hè stata mostrata. Aduprate `event.target`è `event.relatedTarget`per destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente.
`shown.bs.tab`	Questu avvenimentu spara nantu à a tabulazione mostra dopu chì una tabulazione hè stata mostrata. Aduprate `event.target`è `event.relatedTarget`per destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente.
`hide.bs.tab`	Questu avvenimentu spara quandu una nova tabulazione deve esse mostrata (è cusì a tabulazione attiva precedente deve esse oculata). Aduprate `event.target`è `event.relatedTarget`per destinà a tabulazione attiva attuale è a nova tabulazione attiva prestu, rispettivamente.
`hidden.bs.tab`	Questu avvenimentu spara dopu chì una nova tabulazione hè mostrata (è cusì a tabulazione attiva precedente hè oculata). Aduprate `event.target`è `event.relatedTarget`per destinà a tabulazione attiva precedente è a nova tabulazione attiva, rispettivamente.

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