Salta à u cuntenutu principale Salta à a navigazione di documenti
in English

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.

Basic example

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
  • Un secondu articulu
  • Un terzu articulu
  • Un quartu articulu
  • È una quinta
<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
  • Un secondu articulu
  • Un terzu articulu
  • Un quartu articulu
  • È una quinta
<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>

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

<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

<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>counter-incrementè content.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Questi funzionanu bè cù cuntenutu persunalizatu ancu.

  1. Sottutitulu
    Cras justo odio
    14
  2. Sottutitulu
    Cras justo odio
    14
  3. Sottutitulu
    Cras justo odio
    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>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </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.

<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 lista 14
  • Un secondu item di lista 2
  • Un terzu articulu di lista 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>

Cuntinutu persunalizatu

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

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

  • Prima checkbox
  • Seconda casella di cuntrollu
  • A terza casella di cuntrollu
  • Quarta casella di spunta
  • Quinta casella di spunta
<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.

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

  1. hide.bs.tab(nantu à a tabulazione attiva attuale)
  2. show.bs.tab(nantu à a tabulazione da vede)
  3. hidden.bs.tab(nantu à a tabulazione attiva precedente, u listessu cum'è per l' hide.bs.tabavvenimentu)
  4. 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.relatedTargetper 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.relatedTargetper 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.relatedTargetper 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.relatedTargetper 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
  })
}