Groupe de liste Bootstrap5

Le groupe de liste Bootstrap 5 est un composant utilisé pour afficher une série d'éléments ou de contenus, souvent utilisé pour la navigation, les étiquettes, les menus ou d'autres formes de listes similaires.

Le composant groupe de liste offre une manière flexible d'afficher du contenu ordonné ou non ordonné, et vous pouvez personnaliser le style, l'interaction et la mise en page de chaque élément.

Structure de base

Le groupe de liste Bootstrap 5 se compose des parties suivantes :

  • .list-group: Un conteneur utilisé pour envelopper toute la liste.
  • .list-group-item: Chaque élément de liste, contenant généralement du texte, des liens ou d'autres contenus.
  • .list-group-item-action: Rend les éléments de liste cliquables, souvent utilisé pour créer des listes interactives.
  • .list-group-item-primaryetc. : Utilisé pour ajouter différentes couleurs d'arrière-plan ou d'autres styles aux éléments de liste.

La plupart des groupes de liste de base ne sont pas ordonnés.

Pour créer un groupe de liste, vous pouvez ajouter<ul>sur l'élément.list-groupclasse, sur le<li>ajouter un élément.list-group-itemclasse :

Exemple

<ul class="list-group"> <li class="list-group-item">Premier élément</li> <li class="list-group-item">Deuxième élément</li> <li class="list-group-item">Troisième élément</li> </ul>

Essayez-le vous-même »

Élément de liste actif

En ajoutant.activeclasse pour définir l'élément de liste actif :

Exemple

<ul class="list-group"> <li class="list-group-item active">Élément de liste actif</li> <li class="list-group-item">Deuxième élément</li> <li class="list-group-item">Troisième élément</li> </ul>

Essayez-le vous-même »

Élément de liste désactivé

.disabledest la classe utilisée pour définir des éléments de liste désactivés :

Exemple

<ul class="list-group"> <li class="list-group-item disabled">Élément désactivé</li> <li class="list-group-item">Deuxième élément</li> <li class="list-group-item">Troisième élément</li> </ul>

Essayez-le vous-même »

Éléments de liste avec lien

Pour créer un élément de liste avec lien, vous pouvez remplacer<ul>par<div> ， <a>remplacer<li>. Si vous voulez afficher un arrière-plan gris au survol de la souris, ajoutez.list-group-item-actionclasse :

Exemple

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Premier élément</a> <a href="#" class="list-group-item list-group-item-action">Deuxième élément</a> <a href="#" class="list-group-item list-group-item-action">Troisième élément</a> </div>

Essayez-le vous-même »

Supprimer la bordure de liste

Utilisez.list-group-flushclasse pour supprimer la bordure et le rayon de bordure de la liste :

Exemple

<ul class="list-group list-group-flush"> <li class="list-group-item">Premier élément</li> <li class="list-group-item">Deuxième élément</li> <li class="list-group-item">Troisième élément</li> <li class="list-group-item">Quatrième élément</li> </ul>

Essayez-le vous-même »

Groupe de liste horizontal

Nous pouvons ajouter la classe.list-group-horizontalà.list-groupaprès la classe pour créer un groupe de liste horizontal :

Exemple

<ul class="list-group list-group-horizontal"> <li class="list-group-item">Premier élément</li> <li class="list-group-item">Deuxième élément</li> <li class="list-group-item">Troisième élément</li> <li class="list-group-item">Quatrième élément</li> </ul>

Essayez-le vous-même »

Éléments de liste multicolores

La couleur des éléments de liste peut être définie à l'aide des classes suivantes : .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-darketlist-group-item-light:

Exemple

<ul class="list-group"> <li class="list-group-item list-group-item-success">Élément de liste de succès</li> <li class="list-group-item list-group-item-secondary">Élément de liste secondaire</li> <li class="list-group-item list-group-item-info">Élément de liste info</li> <li class="list-group-item list-group-item-warning">Élément de liste d'avertissement</li> <li class="list-group-item list-group-item-danger">Élément de liste danger</li> <li class="list-group-item list-group-item-primary">Élément de liste primaire</li> <li class="list-group-item list-group-item-dark">Élément de liste sombre</li> <li class="list-group-item list-group-item-light">Élément de liste clair</li> </ul>

Essayez-le vous-même »

Éléments de liste multicolores liés

Exemple

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Élément de liste actif</a> <a href="#" class="list-group-item list-group-item-success">Élément de liste succès</a> <a href="#" class="list-group-item list-group-item-secondary">Élément de liste secondaire</a> <a href="#" class="list-group-item list-group-item-info">Élément de liste info</a> <a href="#" class="list-group-item list-group-item-warning">Élément de liste d'avertissement</a> <a href="#" class="list-group-item list-group-item-danger">Élément de liste danger</a> <a href="#" class="list-group-item list-group-item-primary">Élément de liste primaire</a> <a href="#" class="list-group-item list-group-item-dark">Élément de liste sombre</a> <a href="#" class="list-group-item list-group-item-light">Élément de liste clair</a> </div>

Essayez-le »

Cas du groupe de liste

Exemple


Essayez-le »
Autres extensions