Groupes de listes d' amorçage
Groupes de liste de base
Le groupe de liste le plus basique est une liste non ordonnée avec des éléments de liste :
- Premier élément
- Deuxième élément
- Troisième article
Pour créer un groupe de liste de base, utilisez un <ul>élément avec class .list-groupet
<li>des éléments avec class .list-group-item:
Exemple
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Groupe de liste avec badges
Vous pouvez également ajouter des badges à un groupe de liste. Les badges seront automatiquement positionnés à droite :
- 12Nouvelle
- 5Supprimé
- 3Mises en garde
Pour créer un badge, créez un <span>élément avec une classe .badge
dans l'élément de liste :
Exemple
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Groupe de listes avec éléments liés
Les éléments d'un groupe de listes peuvent également être des hyperliens. Cela ajoutera une couleur de fond grise au survol :
Pour créer un groupe de listes avec des éléments liés, utilisez à la <div>place de <ul>
et à la <a>place de <li>:
Exemple
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
État actif
Utilisez la .activeclasse pour mettre en surbrillance l'élément actuel :
Exemple
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Élément désactivé
Le groupe de liste suivant comporte un élément désactivé :
Pour désactiver un élément, ajoutez la .disabledclasse :
Exemple
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Classes contextuelles
Les classes contextuelles peuvent être utilisées pour colorer les éléments de la liste :
- Premier élément
- Deuxième élément
- Troisième article
- Quatrième élément
Les classes de coloration des éléments de liste sont :
.list-group-item-success, list-group-item-info,
list-group-item-warning, et .list-group-item-danger:
Exemple
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Contenu personnalisé
Vous pouvez ajouter presque n'importe quel code HTML dans un élément de groupe de liste.
Bootstrap fournit les classes .list-group-item-headinget
.list-group-item-textqui peuvent être utilisées comme suit :
Exemple
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>