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.

 

les badges Bootstrap 3

Les badges Bootstrap 3 standard

Les badges sont similaires aux labels. Sauf que pour les labels, ils ont des coins beaucoup plus arrondis.

Les badges sont principalement utilisés pour mettre en évidence des éléments nouveaux ou non lus (le cas d’une messagerie par exemple).

Pour créer un badge dans Bootstrap 3, il suffit d’utiliser la classe .badge.

Exemple :

Ce qui donne l’aspect suivant :

Les badges - Bootstrap 3

Exemple de badge – Bootstrap 3

Les badges Bootstrap 3 personnalisés

Par défaut, les badges Bootstrap 3, apparaissent avec un texte blanc sur fond gris. Et pour changer le rendu du badge, il convient de modificier le code CSS de la classe .badge dans le fichier bootstrap.css.

Pour cela, rendez-vous à la ligne 4328 (le numéro de ligne peut changer d’une version à l’autre). Le code CSS suivant apparait :

Nous allons changer la couleur de l’arrière plan en orange (#f0ad4e) et la couleur du texte en Orange (#f0ad4e) en changeant la valeur de la propriété CSS background-color (background-color:f0ad4e;).

à l’ecran, le badre devient orange:

Les badges - Bootstrap 3

Exemple de personnalisation d’un badge – Bootstrap 3

Dans ce cours ” Les badges dans Bootstrap 3 “, nous avons vu comment créer des badges dans Bootstrap 3 à l’aide de la classe .badge. Nous avons vu aussi, qu’à travers le fichier bootstrap.css, il est possible de changer le rendu des badges en changeant les valeurs des proprietés CSS de cette classe.