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

Exemple de base

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Un élément
Un deuxième élément
Un troisième élément
Un quatrième élément
et un cinquième élément

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

Elémént actif

Ajouter .active à un .list-group-item pour indiquer la sélection active actuelle.

Un élément actif
Un deuxième élément
Un troisième élément
Un quatrième élément
et un cinquième élément

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

Eléments désactivés

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

Un élément désactivé
Un deuxième élément
Un troisième élément
Un quatrième élément
et un cinquième élément

<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

Utiliser <a>s ou <button>s pour créer des éléments de groupe de liste exploitables avec des états de survol, désactivé et actif 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 les <li>s ou <div>s) ne fournissent pas d'offre de clic ou de tapotement.

Assurez-vous de ne pas utiliser les classes .btn standard ici.

Element lien courant Un deuxième élément lien Un troisième élément lien Un quatrième élément lien et un cinquième élément lienm

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

Avec <button>vous pouvez également utiliser disabled au lieu de la classe .disabled. Malheureusement, les <a>s ne prennent 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

Ajouter .list-group-flush pour 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 élément
Un troisième élément
Un quatrième élément
Et un cinquième élément

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

Ajouter le .list-group-numbered modifier la classe (et éventuellement utiliser un élément <ol> ) ) pour opter pour les éléments de groupe de liste numérotée. Les nombres sont générés via CSS (par opposition au style de navigateur par défaut d'un <ol>) 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 via counter-reset sur le <ol>, puis stylisé et placé avec un pseudo-élément ::before sur le <li> avec counter-increment et content.

Un élément dfe liste
Un élément dfe liste
Un élément dfe liste

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

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

Sous-titre
Contenu de l'élément de liste
14
Sous-titre
Contenu de l'élément de liste
14
Sous-titre
Contenu de l'élément de liste
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>

Horizontal

Ajouter .list-group-horizontal pour 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 responsive .list-group-horizontal-{sm|md|lg|xl|xxl} pour rendre un groupe de liste 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.

ProTip: Vous voulez des éléments de groupe de liste de largeur égale lorsqu'ils sont horizontaux ? Ajouter .flex-fill to each list group item.

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

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

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

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

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

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

<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 simple élément primary de groupe de liste
Un simple élément secondary de groupe de liste
Un simple élément success de groupe de liste
Un simple élément danger de groupe de liste
Un simple élément warning de groupe de liste
Un simple élément info de groupe de liste
Un simple élément light de groupe de liste
Un simple élément dark de groupe de liste

<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 .active est également pris en charge ; 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 simple élément primary de groupe de liste Un simple élément secondary de groupe de liste Un simple élément success de groupe de liste Un simple élément danger de groupe de liste Un simple élément warning de groupe de liste Un simple élément info de groupe de liste Un simple élément light de groupe de listem Un simple élément dark de groupe de liste

<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 indiquées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par d'autres moyens, tels que du texte supplémentaire masqué avec le .visually-hidden classe.

Avec badges

Ajoutez des badges à n'importe quel élément de groupe de liste pour afficher les décomptes non lus, l'activité et plus encore avec l'aide de certains utilitaires.

Un élément de liste 14
Un deuxième élément de liste 2
Un troisième élément de liste 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>

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 de utilitaire flexbox.

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

Il y a 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 y a 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 y a 3 jours

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

Et quelques petits caractères.

<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 les <label>s, mais n'oubliez pas d'inclure un attribut et une valeur aria-label pour l'accessibilité.

First case à cocher
Second case à cocher
Third case à cocher
Fourth case à cocher
Fiftcase à cocher

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

And if you want <label>s as the .list-group-item for large hit areas, you can do that, too.

First case à cocher Second case à cocher Third case à cocher Fourth case à cocher Fifth case à cocher

<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

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

Utilisé en combinaison avec $theme-colors pour 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 de l'onglet - incluez-le individuellement ou via le fichier compilé bootstrap.js file—to extend our list group to create tabbable panes of local content..

Home Profil Messages Règlages

Du contenu d'espace réservé dans un paragraphe relatif à "Home". 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.

Du contenu d'espace réservé dans un paragraphe relatif à "Profil". 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.

Du contenu d'espace réservé dans un paragraphe relatif à "Messages". 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.

Du contenu d'espace réservé dans un paragraphe relatif à "Règlages". 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.

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

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 à chaque .tab-pane. Le premier volet d'onglet doit également avoir .show pour rendre 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

constructeur

Active un élément d'élément de liste et un conteneur de contenu. L'onglet doit avoir soit un data-bs-target ou un href ciblant 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>

show

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 shown.bs.tab événement se produit).

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

  tab.show()

dispose

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

Evè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 hide.bs.tabet hidden.bs.tab événements ne seront pas déclenchés.

Type d'évènement	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 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
  })
}

Bootstrap 5.2 | Composants

Groupe de listes

Groupe de liste

Exemple de base

Elémént actif

Eléments désactivés

Liens et boutons

Affleurer

Numéroté

Horizontal

Classes contextuelles

Donner du sens aux technologies d'assistance

Avec badges

Contenu personnalisé

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

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

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

Cases à cocher et radios

Sass

Variables

Mixins

Boucle

Comportement JavaScript

Utilisation des attributs de donnéess

Via JavaScript

Effet fondu

Méthodes

constructeur

show

dispose

getInstance

getOrCreateInstance

Evènements