Les listes de définition dans Bootstrap 3 (Partie 2)

Nous avons vu dans le cours précédent comment créer des listes de définition verticales et horizontales. Cette deuxième partie est consacrée aux  list-group. Ces derniers, nous permettent d’organiser des contenus plus complexes, en bénéficiant du système de gestion des grilles de Bootstrap 3.

Avec la combinaison des deux classes CSS: .list-group et .list-group-item, nous pourrons créer une première jolie liste:

Pour chaque élément <li> de la liste, il faut y ajouter la classe .list-group-item, sans oublier d’insérer la classe .list-group au moment de déclaration de la liste <ul>.

listes-bootstrap

List-group basique

Il est à noter que les listes de l’exemple précédent occupe toute la largeur du container. Et pour la mettre en forme, il convient de l’intégrer dans une grille.

a – Insérer une list-group dans une grille

Pour gérer la taille (ou bien la largeur) de notre list-group, nous allons tout simplement l’insérer dans le système de grilles de Bootstrap 3. Dans cette exemple, notre liste occupera 4 colonnes sur l’écran d’un ordinateur de bureau (.col-md-4), 6 sur une tablette (.col-sm-6) et 12 sur un smartphone (.col-xs-12) :

Résultat:

Mise en forme d'une liste au sein d'une grille

Mise en forme d’une liste au sein d’une grille

b – Utiliser une list-group avec des badges

Nous avons précédemment détaillé dans un autre cours comment créer et personnaliser les badges avec Bootstrap 3.

Cette fois-ci, nous allons combiner deux composants, les badges et les listes:

Nous obtenons le résultat ci-dessous:

list-group-badge-bootstrap3

c – Afficher une list-group avec en-tête

Il se révèle parfois utile voire nécessaire d’ajouter un en-tête à un menu vertical afin de s’assurer d’une bonne compréhension de la part de l’utilisateur. En utilisant le jeu de classes contextuelles .panel, .panel-* et .panel-heading, nous aurons à la fin un menu vertical avec en-tête.

Ce qui donnera le résultat suivant:

list-group-entete-bootstrap3Pour changer la couleur de d’arrière-plan de l’en-tête, Bootstrap 3, met a votre disposition un jeu de classes présenté ci-dessous:

Classe Couleur
.panel-default Gris clair
.panel-primary Bleu
.panel-info Bleu clair
.panel-success Vert
.panel-warning Orange
.panel-danger Rouge

d – Créer un menu vertical complet avec les list-group

Pour créer un menu vertical complet, il convient d’ajouter un lien hypertexte pour chaque élément (item) de notre list-group. Bootstrap 3, n’utilise plus le jeu de balises <ul> et <li> pour créer la liste. celles-ci sont seront remplacées par les balises <div>.

Ce qui donne le résultat suivant:

image.

 

Laisser un commentaire