in English

Groupe de liste

Les groupes de listes sont un composant flexible et puissant pour afficher une série de contenus. Modifiez-les et étendez-les pour prendre en charge à peu près n'importe quel contenu.

Sur cette page

Exemple de base

Le groupe de liste le plus basique est une liste non ordonnée avec des éléments de liste et les classes appropriées. Développez-le avec les options qui suivent, ou avec votre propre CSS si nécessaire.

Un élément
Un deuxième article
Un troisième article
Un quatrième article
Et un cinquième

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

Éléments actifs

Ajouter .activeà a .list-group-itempour indiquer la sélection active actuelle.

Un élément actif
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>

Articles désactivés

Ajouter .disabledà un .list-group-itempour le faire apparaître désactivé. Notez que certains éléments avec .disablednécessiteront également un JavaScript personnalisé pour désactiver complètement leurs événements de clic (par exemple, les liens).

Un élément désactivé
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>

Liens et boutons

Utilisez <a>s ou <button>s pour créer des éléments de groupe de liste exploitables avec des états survolés, désactivés et actifs en ajoutant .list-group-item-action. Nous séparons ces pseudo-classes pour nous assurer que les groupes de listes constitués d'éléments non interactifs (comme <li>s ou <div>s) ne fournissent pas d'offre de clic ou de tapotement.

Assurez-vous de ne pas utiliser les .btnclasses standard ici .

L'élément de lien actuel Un deuxième élément de lien Un troisième élément de lien Un quatrième élément de lien Un élément de lien désactivé

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

Avec <button>s, vous pouvez également utiliser l' disabledattribut au lieu de la .disabledclasse. Malheureusement, <a>s ne prend pas en charge l'attribut disabled.

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

Affleurer

Ajoutez .list-group-flushpour supprimer certaines bordures et coins arrondis afin de rendre les éléments de groupe de liste bord à bord dans un conteneur parent (par exemple, des cartes).

Un élément
Un deuxième article
Un troisième article
Un quatrième article
Et un cinquième

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

Numéroté

Ajoutez la .list-group-numberedclasse de modificateur (et utilisez éventuellement un <ol>élément) pour vous inscrire aux éléments de groupe de liste numérotée. Les nombres sont générés via CSS (par opposition au <ol>style de navigateur par défaut) pour un meilleur placement dans les éléments de groupe de liste et pour permettre une meilleure personnalisation.

Les nombres sont générés par counter-resetsur le <ol>, puis stylés et placés avec un ::beforepseudo-élément sur le <li>avec counter-incrementet content.

Cras justo odio
Cras justo odio
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>

Ceux-ci fonctionnent également très bien avec du contenu personnalisé.

Sous-titre
Cras justo odio
14
Sous-titre
Cras justo odio
14
Sous-titre
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>

Horizontal

Ajouter .list-group-horizontalpour modifier la disposition des éléments de groupe de liste de vertical à horizontal sur tous les points d'arrêt. Vous pouvez également choisir une variante réactive .list-group-horizontal-{sm|md|lg|xl|xxl}pour créer un groupe de listes horizontal à partir de ce point d'arrêt min-width. Actuellement , les groupes de listes horizontales ne peuvent pas être combinés avec des groupes de listes affleurantes.

Astuce de pro : Vous voulez des éléments de groupe de liste de largeur égale lorsqu'ils sont horizontaux ? Ajouter .flex-fillà chaque élément de groupe de liste.

Un élément
Un deuxième article
Un troisième article

Un élément
Un deuxième article
Un troisième article

Un élément
Un deuxième article
Un troisième article

Un élément
Un deuxième article
Un troisième article

Un élément
Un deuxième article
Un troisième article

Un élément
Un deuxième article
Un troisième article

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

Utilisez des classes contextuelles pour styliser les éléments de liste avec un arrière-plan et une couleur avec état.

Un simple élément de groupe de liste par défaut
Un élément de groupe de liste primaire simple
Un simple élément de groupe de liste secondaire
Un simple élément de groupe de liste de réussite
Un simple élément de groupe de la liste des dangers
Un élément de groupe de liste d'avertissement simple
Un élément de groupe de liste d'informations simple
Un simple élément de groupe de liste de lumière
Un simple élément de groupe de liste noire

<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 contextuelles fonctionnent également avec .list-group-item-action. Notez l'ajout des styles de survol ici non présents dans l'exemple précédent. L'état est également pris en charge .active; l'appliquer pour indiquer une sélection active sur un élément de groupe de liste contextuelle.

Un simple élément de groupe de liste par défaut Un élément de groupe de liste primaire simple Un simple élément de groupe de liste secondaire Un simple élément de groupe de liste de réussite Un simple élément de groupe de la liste des dangers Un élément de groupe de liste d'avertissement simple Un élément de groupe de liste d'informations simple Un simple élément de groupe de liste de lumière Un simple élément de groupe de liste noire

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

Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations désignées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .visually-hiddenclasse.

Avec insignes

Ajoutez des badges à n'importe quel élément de groupe de liste pour afficher le nombre de non lus, l'activité, etc. à l'aide de certains utilitaires .

Un élément de liste14
Un deuxième élément de liste2
Un troisième élément de liste1

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

Contenu personnalisé

Ajoutez presque n'importe quel code HTML à l'intérieur, même pour les groupes de listes liées comme celui ci-dessous, à l'aide des utilitaires flexbox .

En-tête d'élément de groupe de liste

Il ya 3 jours

Du contenu d'espace réservé dans un paragraphe.

Et quelques petits caractères.

En-tête d'élément de groupe de liste

Il ya 3 jours

Du contenu d'espace réservé dans un paragraphe.

Et quelques petits caractères en sourdine.

En-tête d'élément de groupe de liste

Il ya 3 jours

Du contenu d'espace réservé dans un paragraphe.

Et quelques petits caractères en sourdine.

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

Cases à cocher et radios

Placez les cases à cocher et les radios de Bootstrap dans les éléments du groupe de liste et personnalisez-les selon vos besoins. Vous pouvez les utiliser sans <label>s, mais n'oubliez pas d'inclure un aria-labelattribut et une valeur pour l'accessibilité.

Première case à cocher
Deuxième case à cocher
Troisième case à cocher
Quatrième case à cocher
Cinquième case

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

Et si vous voulez <label>s comme .list-group-itempour les grandes zones d'accès, vous pouvez également le faire.

Première case à cocher Deuxième case à cocher Troisième case à cocher Quatrième case à cocher Cinquième case

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

Toupet

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;

Mélanges

Utilisé en combinaison avec $theme-colorspour générer les classes de variantes contextuelles pour .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;
      }
    }
  }
}

Boucle

Boucle qui génère les classes de modificateur avec le 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);
}

Comportement JavaScript

Utilisez le plug-in JavaScript tab - incluez-le individuellement ou via le bootstrap.jsfichier compilé - pour étendre notre groupe de listes afin de créer des volets tabulables de contenu local.

Maison Profil messages Réglages

Du contenu d'espace réservé dans un paragraphe relatif à "Accueil". Et un peu plus de contenu, utilisé ici juste pour remplir et remplir ce panneau à onglets. En production, vous auriez évidemment plus de contenu réel ici. Et pas que du texte. Ça pourrait être n'importe quoi, vraiment. Textes, images, formulaires.

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>

Utilisation des attributs de données

Vous pouvez activer une navigation de groupe de liste sans écrire de JavaScript en spécifiant simplement data-bs-toggle="list"ou sur un élément. Utilisez ces attributs de données sur .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

Activer l'élément de liste tabulable via JavaScript (chaque élément de liste doit être activé individuellement) :

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

Vous pouvez activer un élément de liste individuel de plusieurs manières :

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

Effet fondu

Pour faire apparaître le panneau des onglets, ajoutez .fadeà chacun .tab-pane. Le premier volet d'onglet doit également .showrendre visible le contenu initial.

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

constructor

Active un élément d'élément de liste et un conteneur de contenu. L'onglet doit avoir un data-bs-targetou un hrefciblant un nœud de conteneur dans le 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>

Afficher

Sélectionne l'élément de liste donné et affiche son volet associé. Tout autre élément de liste précédemment sélectionné devient désélectionné et son volet associé est masqué. Revient à l'appelant avant que le volet d'onglet ne soit réellement affiché (par exemple, avant que l' shown.bs.tabévénement ne se produise).

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

  tab.show()

disposer

Détruit l'onglet d'un élément.

getInstance

Méthode statique qui permet d'obtenir l'instance d'onglet associée à un élément DOM

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

getOrCreateInstance

Méthode statique qui permet d'obtenir l'instance d'onglet associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée

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

Événements

Lors de l'affichage d'un nouvel onglet, les événements se déclenchent dans l'ordre suivant :

hide.bs.tab(sur l'onglet actuellement actif)
show.bs.tab(sur l'onglet à afficher)
hidden.bs.tab(sur l'onglet actif précédent, le même que pour l' hide.bs.tabévénement)
shown.bs.tab(sur l'onglet nouvellement actif qui vient d'être affiché, le même que pour l' show.bs.tabévénement)

Si aucun onglet n'était déjà actif, les événements hide.bs.tabet hidden.bs.tabne seront pas déclenchés.

Type d'événement	La description
`show.bs.tab`	Cet événement se déclenche lors de l'affichage de l'onglet, mais avant l'affichage du nouvel onglet. Utilisez `event.target`et `event.relatedTarget`pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
`shown.bs.tab`	Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez `event.target`et `event.relatedTarget`pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
`hide.bs.tab`	Cet événement se déclenche lorsqu'un nouvel onglet doit être affiché (et donc l'onglet actif précédent doit être masqué). Utilisez `event.target`et `event.relatedTarget`pour cibler respectivement l'onglet actif actuel et le nouvel onglet qui sera bientôt actif.
`hidden.bs.tab`	Cet événement se déclenche après l'affichage d'un nouvel onglet (et donc l'onglet actif précédent est masqué). Utilisez `event.target`et `event.relatedTarget`pour cibler respectivement l'onglet actif précédent et le nouvel onglet actif.

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