Les classes .list-group et .list-group-item et la mise en forme de listes HTML
Pour appliquer une première mise en forme relativement basique à nos listes HTML, on va pouvoir utiliser les classes .list-group sur l’élément représentant la liste et .list-group-item sur les éléments de la liste.
See the Pen
Bootstrap 3.4.1 by Pierre (@pierregiraud)
on CodePen.
Comme vous pouvez le remarquer, Bootstrap va appliquer exactement les mêmes styles aux listes non-ordonnées (élément HTML ul) et aux listes ordonnées (élément HTML ol).
Supprimer les bordures des listes
Nous allons pouvoir supprimer les bordures autour d’une liste Bootstrap en ajoutant la classe .list-group-flush à notre élément représentant la liste en soi.
See the Pen
Bootstrap 3.4.2 by Pierre (@pierregiraud)
on CodePen.
Créer des listes horizontales
On va pouvoir changer la présentation de nos listes en faisant en sorte que les éléments de celles-ci s’affichent en ligne plutôt qu’en colonne en utilisant la classe .list-group-horizontal sur l’élément représentant la liste.
Notez que des variantes responsive de cette classe existent avec .list-group-horizontal-{sm|md|lg|xl} qui permettent de modifier le comportement par défaut d’une liste pour que ses éléments s’affichent en ligne à partir d’une certaine taille de fenêtre. Ces tailles de transition ou « breakpoints » sont les mêmes que d’habitude à savoir 576px pour sm, 768px pour md, 992px pour lg et 1200px pour xl.
See the Pen
Bootstrap 3.4.3 by Pierre (@pierregiraud)
on CodePen.
Créer une liste de liens ou de boutons avec Bootstrap
Bootstrap va nous permettre de créer des listes de boutons ou de liens ou plus exactement de styliser des groupes de boutons ou de liens afin de simuler l’apparence d’une liste.
Pour cela, nous allons simplement devoir utiliser un élément conteneur pour notre groupe de boutons ou de liens et lui attribuer une classe .list-group.
Ensuite, nous allons devoir réutiliser la classe .list-group-item pour chaque élément de notre « liste ».
Notez qu’on va également pouvoir ajouter une classe .list-group-item-action à nos différents liens ou boutons afin que ceux-ci changent d’apparence lors d’un changement d’état de ces éléments (passage de souris, lien ou bouton cliqué, etc.).
Note : dans le cas d’une liste de boutons, n’utilisez pas de classe .btn.
See the Pen
Bootstrap 3.4.4 by Pierre (@pierregiraud)
on CodePen.
Changer la couleur des éléments de listes
Nous allons également pouvoir utiliser les classes de couleurs contextuelles avec nos éléments de liste afin de leur appliquer une couleur particulière à chacun.
Pour cela, nous allons utiliser des classes .list-group-item-* suffixées des noms de couleurs contextuelles usuels :
See the Pen
Bootstrap 3.4.5 by Pierre (@pierregiraud)
on CodePen.
Utiliser les listes pour afficher un contenu par élément
Nous allons pouvoir nous appuyer sur les fichiers JavaScript de Bootstrap pour créer des « listes à onglets » et afficher simplement un contenu différent selon l’élément de liste cliqué.
See the Pen
Bootstrap 3.4.6 by Pierre (@pierregiraud)
on CodePen.
Ici, on utilise l’attribut data-toggle pour « toggle » c’est-à-dire inverser l’état de visibilité des éléments de liste.
On utilise également les classes .tab-content et .tab-pane pour créer du contenu sous forme d’onglet.
On affiche le texte correspondant au premier élément de notre liste par défaut grâce à la classe show et on passe la classe active à l’élément de liste correspondant afin que l’utilisateur puisse voir à quel élément appartient le texte.
Finalement, on utilise la classe fade pour ajouter un effet de fondu lors de la transition entre l’affichage du texte de deux éléments de liste.
L’attribut aria-controls sert à identifier l’élément contrôlé par l’élément qui possède cet attribut.
L’attribut aria-labelledby sert à identifier l’élément lié à l’élément qui possède cet attribut en se basant sur la valeur de son id.
