Bootstrap 5 : Créer des groupes de listes

Bootstrap 5 : Créer des groupes de listes

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
Table des matieres

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 une liste basique avec Bootstrap 5

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.

Bootstrap 5 Créer une liste avec un élément actif et un élément désactivé

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

Créer des listes de liens avec Bootstrap

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 des listes de liens avec Bootstrap

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

Créer des listes composées de boutons avec Bootstrap

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

Bootstrap Enlever des bordures a un groupe de liste

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>

Voir la leçon sur les couleurs de Bootstrap 5.

Bootstrap 5 Donner une couleur de fond aux éléments d’une liste

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.

Bootstrap 5 Donner une couleur de fond aux éléments d’une liste

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

Bootstrap 5 Donner une couleur de fond aux éléments d’une liste

En dessous de 576px

Créer un groupe de liste horizontal avec Bootstrap 5

A partir de 576px

Créer un groupe de liste horizontal avec Bootstrap 5

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.

Créer un groupe de listes avec des champs de donnée de type check ou radio Bootstrap 5
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0