Grup de llista

Els grups de llistes són un component flexible i potent per mostrar una sèrie de contingut. Modifiqueu-los i amplieu-los per admetre gairebé qualsevol contingut.

En aquesta pàgina

Exemple bàsic

El grup de llista més bàsic és una llista no ordenada amb elements de llista i les classes adequades. Construeix-hi amb les opcions següents o amb el teu propi CSS segons sigui necessari.

Un element
Un segon element
Un tercer element
Un quart element
I un cinquè

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

Elements actius

Afegeix .activea a .list-group-itemper indicar la selecció activa actual.

Un element actiu
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>

Elements desactivats

Afegeix .disableda .list-group-itema perquè sembli desactivat. Tingueu en compte que alguns elements amb .disabledtambé requeriran JavaScript personalitzat per desactivar completament els seus esdeveniments de clic (p. ex., enllaços).

Un element inhabilitat
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>

Enllaços i botons

Utilitzeu <a>s o <button>s per crear elements de grup de llista accionables amb estats de desplaçament, desactivat i actiu afegint .list-group-item-action. Separem aquestes pseudoclasses per assegurar-nos que els grups de llista fets d'elements no interactius (com ara <li>s o <div>s) no proporcionen un clic o un toc.

Assegureu-vos de no utilitzar les .btnclasses estàndard aquí .

L'element d'enllaç actual Un segon element d'enllaç Un tercer element d'enllaç Un quart element d'enllaç Un element d'enllaç desactivat

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

Amb <button>s, també podeu fer ús de l' disabledatribut en lloc de la .disabledclasse. Malauradament, <a>s no admet l'atribut desactivat.

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

Rubor

Afegeix .list-group-flushper eliminar algunes vores i cantonades arrodonides per representar els elements del grup de la llista de vora a vora en un contenidor principal (p. ex., targetes).

Un element
Un segon element
Un tercer element
Un quart element
I un cinquè

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

Numerat

Afegiu la .list-group-numberedclasse modificadora (i, opcionalment, utilitzeu un <ol>element) per optar als elements del grup de la llista numerada. Els números es generen mitjançant CSS (a diferència de l' <ol>estil predeterminat d'un navegador) per a una millor col·locació dins dels elements del grup de la llista i per permetre una millor personalització.

Els nombres es generen per counter-reseta <ol>, i després s'estilen i es col·loquen amb un ::beforepseudoelement a <li>amb counter-incrementi content.

Un element de llista
Un element de llista
Un element de llista

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

També funcionen molt bé amb contingut personalitzat.

Subtítol
Contingut per a l'element de la llista
14
Subtítol
Contingut per a l'element de la llista
14
Subtítol
Contingut per a l'element de la llista
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>

Horitzontal

Afegeix .list-group-horizontalper canviar la disposició dels elements del grup de llista de vertical a horitzontal en tots els punts d'interrupció. Alternativament, escolliu una variant responsiva .list-group-horizontal-{sm|md|lg|xl|xxl}per fer un grup de llista horitzontal començant en el punt d'interrupció d'aquest punt min-width. Actualment , els grups de llistes horitzontals no es poden combinar amb els grups de llistes envàs.

ProTip: voleu elements de grup de llista d'amplada igual quan siguin horitzontals? Afegeix .flex-filla cada element de grup de llista.

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

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

Classes contextuals

Utilitzeu classes contextuals per estilitzar els elements de la llista amb un fons i un color amb estat.

Un element de grup de llista predeterminat senzill
Un element de grup de llista principal senzill
Un element de grup de llista secundari senzill
Un element senzill de grup de llista d'èxits
Un element de grup de llista de perill senzill
Un element de grup de llista d'avís senzill
Un element senzill de grup de llista d'informació
Un element senzill de grup de llista lleugera
Un element de grup de llista fosca senzilla

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

Les classes contextuals també funcionen amb .list-group-item-action. Tingueu en compte l'addició d'estils de flotació aquí no presents a l'exemple anterior. També es recolza l' .activeestat; apliqueu-lo per indicar una selecció activa en un element de grup de llista contextual.

Un element de grup de llista predeterminat senzill Un element de grup de llista principal senzill Un element de grup de llista secundari senzill Un element senzill de grup de llista d'èxits Un element de grup de llista de perill senzill Un element de grup de llista d'avís senzill Un element senzill de grup de llista d'informació Un element senzill de grup de llista lleugera Un element de grup de llista fosca senzilla

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

Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .visually-hiddenclasse.

Amb distintius

Afegiu insígnies a qualsevol element de grup de llista per mostrar els recomptes no llegits, l'activitat i més amb l'ajuda d'algunes utilitats .

Un element de llista14
Un segon element de la llista2
Un tercer element de la llista1

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

Contingut personalitzat

Afegiu gairebé qualsevol HTML dins, fins i tot per a grups de llistes enllaçades com el següent, amb l'ajuda de les utilitats flexbox .

Encapçalament d'elements del grup de llista

fa 3 dies

Algun contingut de marcador de posició en un paràgraf.

I alguna lletra petita.

Encapçalament d'elements del grup de llista

fa 3 dies

Algun contingut de marcador de posició en un paràgraf.

I alguna lletra petita silenciada.

Encapçalament d'elements del grup de llista

fa 3 dies

Algun contingut de marcador de posició en un paràgraf.

I alguna lletra petita silenciada.

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

Caselles de selecció i ràdios

Col·loqueu les caselles de selecció i les ràdios de Bootstrap dins dels elements del grup de la llista i personalitzeu-les segons sigui necessari. Podeu utilitzar-los sense <label>s, però recordeu incloure un aria-labelatribut i un valor per a l'accessibilitat.

Primera casella de selecció
Segona casella de selecció
Tercera casella de selecció
Quarta casella de selecció
Cinquena casella de selecció

<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 si voleu <label>s com .list-group-itema grans àrees d'èxit, també podeu fer-ho.

Primera casella de selecció Segona casella de selecció Tercera casella de selecció Quarta casella de selecció Cinquena casella de selecció

<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

Les variables

$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

S'utilitza en combinació amb $theme-colorsper generar les classes de variants contextuals per a .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;
      }
    }
  }
}

Bucle

Bucle que genera les classes modificadores amb el 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);
}

Comportament de JavaScript

Utilitzeu el connector de JavaScript de la pestanya (incloeu-lo individualment o mitjançant el bootstrap.jsfitxer compilat) per ampliar el nostre grup de llista i crear panells amb pestanyes de contingut local.

Casa Perfil Missatges Configuració

Alguns continguts de marcador de posició en un paràgraf relacionat amb "Inici". I una mica més de contingut, que s'utilitza aquí només per completar i omplir aquest panell de pestanyes. En producció, òbviament tindries més contingut real aquí. I no només text. Podria ser qualsevol cosa, de veritat. Text, imatges, formularis.

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>

Ús d'atributs de dades

Podeu activar una navegació per grups de llista sense escriure cap JavaScript simplement especificant data-bs-toggle="list"o en un element. Utilitzeu aquests atributs de dades a .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>

Mitjançant JavaScript

Habilita l'element de la llista amb tabulació mitjançant JavaScript (cada element de la llista s'ha d'activar individualment):

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

Podeu activar un element de llista individual de diverses maneres:

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

Efecte esvaït

Per fer que el tauler de pestanyes s'esvaeixi, afegiu -lo .fadea cadascun .tab-pane. El primer panell de pestanyes també ha .showde fer visible el contingut inicial.

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

Mètodes

constructor

Activa un element d'element de llista i un contenidor. La pestanya hauria de tenir un node de contenidor data-bs-targeto una hreforientació al 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>

espectacle

Selecciona l'element de la llista donat i mostra el seu panell associat. Qualsevol altre element de la llista que s'hagi seleccionat anteriorment es desactiva i el seu panell associat s'amaga. Torna a la persona que truca abans que s'hagi mostrat realment el panell de pestanyes (per exemple, abans shown.bs.tabque es produeixi l'esdeveniment).

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

  tab.show()

disposar

Destrueix la pestanya d'un element.

getInstance

Mètode estàtic que us permet obtenir la instància de la pestanya associada a un element DOM

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

getOrCreateInstance

Mètode estàtic que us permet obtenir la instància de la pestanya associada a un element DOM o crear-ne una de nova en cas que no s'hagi inicialitzat

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

Esdeveniments

Quan es mostra una pestanya nova, els esdeveniments es desencadenen en l'ordre següent:

hide.bs.tab(a la pestanya activa actual)
show.bs.tab(a la pestanya per mostrar)
hidden.bs.tab(a la pestanya activa anterior, la mateixa que per a l' hide.bs.tabesdeveniment)
shown.bs.tab(a la pestanya recentment activa que s'acaba de mostrar, la mateixa que per a l' show.bs.tabesdeveniment)

Si no hi havia cap pestanya activa, els esdeveniments hide.bs.tabi hidden.bs.tabno s'activaran.

Tipus d'esdeveniment	Descripció
`show.bs.tab`	Aquest esdeveniment s'activa a la pestanya mostra, però abans que s'hagi mostrat la nova pestanya. Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
`shown.bs.tab`	Aquest esdeveniment s'activa a la mostra de pestanyes després que s'hagi mostrat una pestanya. Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
`hide.bs.tab`	Aquest esdeveniment s'activa quan s'ha de mostrar una pestanya nova (i, per tant, s'ha d'amagar la pestanya activa anterior). Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa actual i la nova pestanya que s'activarà aviat, respectivament.
`hidden.bs.tab`	Aquest esdeveniment s'activa després que es mostri una pestanya nova (i, per tant, s'amaga la pestanya activa anterior). Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa anterior i la nova pestanya activa, respectivament.

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