Nous allons voir dans cette leçon comment créer et styliser des groupes de liste avec Bootstrap 5.
Les classes Bootstrap 5 que nous allons voir dans cette leçon :
- list-group
- list-group-item
- list-group-numbered
- list-group-item-action
- list-group-flush
- list-group-horizontal
Créer un groupe de listes basiques avec Bootstrap 5
Pour rappel une liste en HTML se crée avec les balises <ul> ou <ol> et <li>.
La création d’une liste avec Bootstrap 5 se fait avec les classes suivantes :
- list-group pour une liste non ordonnée <ul> .
- list-group list-group-numbered pour une liste ordonnée <ol> .
- list-group-item sur les balises <li>.
Créer un groupe de listes avec un élément actif et un élément désactivé
Pour créer une liste avec un élément actif nous allons utiliser la classe active alors que pour désactiver un élément on utilisera la classe disabled.
Nous avons déjà vu ces deux classes dans cette formation et notamment dans la leçon sur la création d’une barre de navigation avec Bootstrap 5.
Créer un groupe de listes avec des liens
Pour créer un groupe de liste avec des liens, on va remplacer la balise <ul> par la balise <div> et la balise <li> par la balise <a>.
Si l’on souhaite créer un effet de survol au passage de la souris sur un lien on rajoute la classe list-group-item-action qui va lui donner une couleur de fond grise.
Créer un groupe de listes composées de boutons avec Bootstrap
Pour créer une liste de boutons il suffit de remplacer la balise <a> de l’exemple ci-dessus par la balise <button> .
Voir la leçon sur la création de boutons avec Bootstrap 5.
Exemple :
Créons un groupe de liste composé de 4 boutons avec effet de survol. Le premier bouton est un bouton actif, le dernier est un bouton désactivé.
Enlever des bordures a un groupe de listes
Il est possible d’enlever certaines bordures avec la classe list-group-flush place sur la balise <ul>.
Donner une couleur de fond aux éléments d’une groupe de listes
Pour donner une couleur de fond aux éléments d’une liste, on va rajouter la classe list-group-item-* suivie d’une classe de couleurs.
Exemple :
<li class= »list-group-item list-group-item-success« >Couleur : success</li>
On peut faire la même chose avec une liste composée de liens
<a href= »# » class= »list-group-item list-group-item-info« >Couleur : info</a>
Exemple avec l’ajout d’un effet du survol.
Créer un groupe de listes horizontal avec Bootstrap 5
Si vous souhaitez voir les éléments de la liste s’afficher horizontalement plutôt que verticalement (côte à côte au lieu de l’un sur l’autre) il vous faut ajouter la classe list-group-horizontal à la classe list-group .
<ul class= »list-group list-group-horizontal« >
Il est possible de déterminer un breakpoint (point de transition) en dessous duquel les éléments se placeront les uns en dessous des autres, en rajoutant au choix les classes : sm, md, lg, xl ou xxl à la classe list-group-horizontal.
Voir la leçon sur : la maîtrise des breakpoints avec Bootstrap 5.
Exemple avec un breakpoint de 576px (sm).
En dessous de 576px
A partir de 576px
Créer un groupe de liste avec des champs de données de type check ou radio
Pour créer un groupe de liste avec des champs de donnée de type check ou radio :
1 : On crée une division <div> avec la classe list-group.
<div class= »list-group« >
2 : On crée un label <label> avec la classe list-group-item.
<div class= »list-group« >
<label class= »list-group-item« >
2 : On crée un champ de donnée <input> avec la classe form-check-input et le type checkbox ou radio que l’on place entre les balises <label>.
<div class= »list-group« >
<label class= »list-group-item« >
<input class= »form-check-input me-1″ type= »checkbox » value= » »> Checkbox 1
</label>
La classe me-1 n’est pas indispensable, elle permet de soigner le design en en créant une marge.
Exemple avec des champs de donnée de type check et radio.
