Gruppo elenco

I gruppi di elenchi sono un componente flessibile e potente per la visualizzazione di una serie di contenuti. Modificali ed estendili per supportare praticamente qualsiasi contenuto all'interno.

Su questa pagina

Esempio di base

Il gruppo di elenchi più semplice è un elenco non ordinato con voci di elenco e le classi appropriate. Costruisci su di esso con le opzioni che seguono o con il tuo CSS, se necessario.

Un oggetto
Un secondo oggetto
Un terzo elemento
Un quarto elemento
E un quinto

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

Articoli attivi

Aggiungi .activead a .list-group-itemper indicare la selezione attiva corrente.

Un elemento attivo
Un secondo oggetto
Un terzo elemento
Un quarto elemento
E un quinto

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

Articoli disabilitati

Aggiungi .disableda .list-group-itemper farlo apparire disabilitato. Nota che alcuni elementi con .disabledrichiederanno anche JavaScript personalizzato per disabilitare completamente i loro eventi di clic (ad esempio, i collegamenti).

Un oggetto disabilitato
Un secondo oggetto
Un terzo elemento
Un quarto elemento
E un quinto

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

Collegamenti e pulsanti

Utilizzare <a>s o <button>s per creare elementi di gruppo di elenchi utilizzabili con stati al passaggio del mouse, disabilitato e attivo aggiungendo .list-group-item-action. Separiamo queste pseudo-classi per garantire che i gruppi di elenchi costituiti da elementi non interattivi (come <li>s o <div>s) non forniscano un'accessibilità al clic o al tocco.

Assicurati di non utilizzare le .btnclassi standard qui .

L'elemento di collegamento corrente Un secondo elemento di collegamento Un terzo elemento di collegamento Un quarto elemento di collegamento Un elemento di collegamento disabilitato

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

Con <button>s, puoi anche utilizzare l' disabledattributo invece della .disabledclasse. Purtroppo, <a>s non supporta l'attributo disabilitato.

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

Sciacquone

Aggiungi .list-group-flushper rimuovere alcuni bordi e angoli arrotondati per rendere gli elementi del gruppo elenco da bordo a bordo in un contenitore principale (ad esempio, schede).

Un oggetto
Un secondo oggetto
Un terzo elemento
Un quarto elemento
E un quinto

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

Numerato

Aggiungi la .list-group-numberedclasse del modificatore (e facoltativamente usa un <ol>elemento) per attivare gli elementi del gruppo di elenchi numerati. I numeri vengono generati tramite CSS (al contrario di uno <ol>stile predefinito del browser) per un migliore posizionamento all'interno degli elementi del gruppo di elenchi e per consentire una migliore personalizzazione.

I numeri sono generati da counter-resetsu <ol>, quindi stilizzati e posizionati con uno ::beforepseudo-elemento su <li>con counter-incremente content.

Una voce di elenco
Una voce di elenco
Una voce di elenco

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

Funzionano benissimo anche con contenuti personalizzati.

Sottotitolo
Contenuto per voce di elenco
14
Sottotitolo
Contenuto per voce di elenco
14
Sottotitolo
Contenuto per voce di elenco
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

Aggiungi .list-group-horizontalper modificare il layout degli elementi del gruppo elenco da verticale a orizzontale su tutti i punti di interruzione. In alternativa, scegli una variante reattiva .list-group-horizontal-{sm|md|lg|xl|xxl}per rendere orizzontale un gruppo di elenchi a partire da quel punto di interruzione min-width. Attualmente i gruppi di elenchi orizzontali non possono essere combinati con i gruppi di elenchi a filo.

Suggerimento: desideri elementi del gruppo di elenchi di uguale larghezza quando sono orizzontali? Aggiungi .flex-filla ciascun elemento del gruppo di elenchi.

Un oggetto
Un secondo oggetto
Un terzo elemento

Un oggetto
Un secondo oggetto
Un terzo elemento

Un oggetto
Un secondo oggetto
Un terzo elemento

Un oggetto
Un secondo oggetto
Un terzo elemento

Un oggetto
Un secondo oggetto
Un terzo elemento

Un oggetto
Un secondo oggetto
Un terzo elemento

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

Usa le classi contestuali per applicare uno stile agli elementi dell'elenco con uno sfondo e un colore con stato.

Un semplice elemento di gruppo di elenco predefinito
Un semplice elemento del gruppo dell'elenco principale
Un semplice elemento di gruppo di un elenco secondario
Un semplice elemento del gruppo dell'elenco di successo
Un semplice elemento di gruppo dell'elenco dei pericoli
Un semplice elemento di gruppo di un elenco di avvisi
Un semplice elemento di gruppo dell'elenco di informazioni
Un semplice elemento del gruppo di elenchi di luci
Un semplice elemento di un gruppo di dark list

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

Le classi contestuali funzionano anche con .list-group-item-action. Notare l'aggiunta degli stili al passaggio del mouse qui non presenti nell'esempio precedente. Anche lo stato è supportato .active; applicarlo per indicare una selezione attiva su un elemento del gruppo elenco contestuale.

Un semplice elemento di gruppo di elenco predefinito Un semplice elemento del gruppo dell'elenco principale Un semplice elemento di gruppo di un elenco secondario Un semplice elemento del gruppo dell'elenco di successo Un semplice elemento di gruppo dell'elenco dei pericoli Un semplice elemento di gruppo di un elenco di avvisi Un semplice elemento di gruppo dell'elenco di informazioni Un semplice elemento del gruppo di elenchi di luci Un semplice elemento di un gruppo di dark list

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

Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad esempio il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .visually-hiddenclasse.

Con distintivi

Aggiungi badge a qualsiasi elemento del gruppo di elenchi per mostrare conteggi, attività e altro non letti con l'aiuto di alcune utilità .

Una voce di elenco14
Una seconda voce di elenco2
Una terza voce di elenco1

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

Contenuti personalizzati

Aggiungi quasi qualsiasi codice HTML all'interno, anche per gruppi di elenchi collegati come quello qui sotto, con l'aiuto delle utility flexbox .

Elenca l'intestazione dell'elemento del gruppo

3 giorni fa

Alcuni contenuti segnaposto in un paragrafo.

E qualche piccola stampa.

Elenca l'intestazione dell'elemento del gruppo

3 giorni fa

Alcuni contenuti segnaposto in un paragrafo.

E qualche piccola stampa tenue.

Elenca l'intestazione dell'elemento del gruppo

3 giorni fa

Alcuni contenuti segnaposto in un paragrafo.

E qualche piccola stampa tenue.

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

Caselle di controllo e radio

Posiziona le caselle di controllo e le radio di Bootstrap all'interno degli elementi del gruppo di elenchi e personalizza secondo necessità. Puoi usarli senza <label>s, ma ricorda di includere un aria-labelattributo e un 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>

E se vuoi <label>s come .list-group-itemper grandi aree di successo, puoi farlo anche tu.

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

Miscele

Usato in combinazione con $theme-colorsper generare le classi varianti contestuali 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;
      }
    }
  }
}

Ciclo continuo

Ciclo che genera le classi di modifica con il 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);
}

Comportamento JavaScript

Usa il plug-in JavaScript della scheda, includilo individualmente o tramite il file compilato bootstrap.js, per estendere il nostro gruppo di elenchi per creare riquadri tabbable di contenuto locale.

Casa Profilo Messaggi Impostazioni

Alcuni contenuti segnaposto in un paragrafo relativo alla "Casa". E qualche altro contenuto, usato qui solo per riempire e riempire questo pannello a schede. In produzione, avresti ovviamente più contenuti reali qui. E non solo testo. Potrebbe essere qualsiasi cosa, davvero. Testo, immagini, moduli.

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>

Utilizzo degli attributi dei dati

Puoi attivare una navigazione a gruppi di liste senza scrivere alcun JavaScript semplicemente specificando data-bs-toggle="list"o su un elemento. Usa questi attributi di dati su .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>

Tramite JavaScript

Abilita elemento dell'elenco tabable tramite JavaScript (ogni elemento dell'elenco deve essere attivato singolarmente):

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

È possibile attivare singole voci di elenco in diversi modi:

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

Effetto dissolvenza

Per fare in modo che il pannello delle schede si sbiadisca, aggiungi .fadea ciascuno .tab-pane. Il primo riquadro delle schede deve anche .showrendere visibile il contenuto 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>

Metodi

constructor

Attiva un elemento di un elemento dell'elenco e un contenitore di contenuto. La scheda dovrebbe avere a data-bs-targeto un hrefnodo di destinazione del contenitore nel 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>

mostrare

Seleziona l'elemento dell'elenco specificato e mostra il riquadro associato. Qualsiasi altro elemento dell'elenco precedentemente selezionato viene deselezionato e il riquadro associato viene nascosto. Ritorna al chiamante prima che il riquadro delle schede sia stato effettivamente mostrato (ad esempio, prima shown.bs.tabche si verifichi l'evento).

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

  tab.show()

smaltire

Distrugge la scheda di un elemento.

getInstance

Metodo statico che ti consente di ottenere l'istanza della scheda associata a un elemento DOM

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

getOrCreateInstance

Metodo statico che ti consente di ottenere l'istanza della scheda associata a un elemento DOM o di crearne una nuova nel caso non sia stata inizializzata

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

Eventi

Quando viene visualizzata una nuova scheda, gli eventi si attivano nel seguente ordine:

hide.bs.tab(nella scheda attiva corrente)
show.bs.tab(nella scheda da mostrare)
hidden.bs.tab(nella scheda attiva precedente, la stessa hide.bs.tabdell'evento)
shown.bs.tab(nella scheda appena mostrata appena attiva, la stessa show.bs.tabdell'evento)

Se nessuna scheda era già attiva, gli eventi hide.bs.tabe hidden.bs.tabnon verranno attivati.

Tipo di evento	Descrizione
`show.bs.tab`	Questo evento si attiva alla visualizzazione della scheda, ma prima che venga mostrata la nuova scheda. Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
`shown.bs.tab`	Questo evento si attiva alla visualizzazione delle schede dopo che è stata mostrata una scheda. Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
`hide.bs.tab`	Questo evento si attiva quando deve essere visualizzata una nuova scheda (e quindi la scheda attiva precedente deve essere nascosta). Utilizzare `event.target`e `event.relatedTarget`per scegliere come target rispettivamente la scheda attiva corrente e la nuova scheda che sarà presto attiva.
`hidden.bs.tab`	Questo evento si attiva dopo che viene mostrata una nuova scheda (e quindi la scheda attiva precedente viene nascosta). Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva precedente e la nuova scheda attiva.

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