Groupes de listes Bootstrap 4
Les groupes de listes les plus élémentaires sont des listes non ordonnées.
Pour créer un groupe de listes, sur l'<ul>élément, ajoutez la classe.list-group, et sur l'<li>élément, ajoutez la classe.list-group-item:
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éments de liste actifs
En ajoutant la classe.activepour définir l'élément de liste actif :
Exemple
<ul class="list-group">
<li class="list-group-item active">Élément 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éments de liste désactivés
.disabled est utilisé commeclasse pour définir l'élément de liste désactivé :
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>remplacement<li>. Si vous souhaitez afficher un arrière-plan gris au survol de la souris, ajoutez.list-group-item-action commeclasse :
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 les bordures de liste
Utilisez.list-group-flush commeclasse pour supprimer les bordures et les coins arrondis 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 »
Groupes de listes horizontaux
Nous pouvons ajouter la classe.list-group-horizontalà la classe.list-grouppour créer un groupe de listes 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 avec les 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 vous-même » Autres extensions