Source

Groupe de listes

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.

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.

  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibule à eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Éléments actifs

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

  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibule à eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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).

  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibule à eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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 .

Cras justo odio Dapibus ac facilisis à Morbi leo risus Porta ac consectetur ac Vestibule à eros 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</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">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</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).

  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibule à eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</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.

  • Dapibus ac facilisis à
  • 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">Dapibus ac facilisis in</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.

Dapibus ac facilisis à 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">Dapibus ac facilisis in</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 .sr-onlyclasse.

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 .

  • Cras justo odio14
  • Dapibus ac facilisis à2
  • Morbi leo risus1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-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

Donec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.

Donec id elit non mi porta.
En-tête d'élément de groupe de liste
Il ya 3 jours

Donec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.

Donec id elit non mi porta.
En-tête d'élément de groupe de liste
Il ya 3 jours

Donec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

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.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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-toggle="list"ou sur un élément. Utilisez ces attributs de données sur .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>

Via Javascript

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

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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

$().tab

Active un élément d'élément de liste et un conteneur de contenu. L'onglet doit avoir un data-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-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('montrer')

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

$('#someListItem').tab('show')

Événements

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

  1. hide.bs.tab(sur l'onglet actuellement actif)
  2. show.bs.tab(sur l'onglet à afficher)
  3. hidden.bs.tab(sur l'onglet actif précédent, le même que pour l' hide.bs.tabévénement)
  4. 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.targetet event.relatedTargetpour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
montré.bs.tab Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez event.targetet event.relatedTargetpour 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.targetet event.relatedTargetpour cibler respectivement l'onglet actif actuel et le nouvel onglet qui sera bientôt actif.
onglet.bs.caché 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.targetet event.relatedTargetpour cibler respectivement l'onglet actif précédent et le nouvel onglet actif. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})