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

Comme dans un dictionnaire, on trouve (mot: définition) où la définition est toujours plus longe et plus riche en contenu. Les listes de définition représente le même cas d’utilisation.  Les listes de définition sont créées en combinant les balises <dl>, <dt> et <dd>.

Les listes de définition verticales

Une liste de définition verticale ressemble beaucoup à celle obtenue avec le HTML sans utiliser les CSS. Les titres sont en gras, et la définition n’est plus décalée.

Ce qui donne le résultat suivant :

listes-de-definition-verticales

Exemple de listes de définition verticales

Les listes de définition horizontales

Les listes de définition horizontales (LDH) ressemble en grande partie aux listes de définition verticales. Sauf que les LDH sont “mobile first” et la définition est décalée.

Pour créer une liste de définition horizontale, nous allons ajouter à la balise <dl> la classe .dl-horizontal.

Ce qui donne ceci:

listes-de-definition-horizontales

Exemple de listes de définition horizontales

Attention: Les listes de définition horizontales sont transformées automatiquement par Bootstrap 3 en liste de définition verticales sur les supports mobiles.

Laisser un commentaire