Dans cette nouvelle leçon, nous allons découvrir quelques classes Bootstrap qui vont nous permettre de gérer l’ordre d’affichage (ordre visuel uniquement) des colonnes dans une ligne et allons également voir comment imbriquer des lignes les unes dans les autres pour créer des possibilités de designs avancés.
Gérer l’ordre d’affichage des colonnes
Les classes Bootstrap .order-* vont nous permettre de modifier l’ordre visuel de notre contenu. Nous allons ainsi pouvoir choisir dans quel ordre doit apparaitre notre contenu en passant une classe .order-1, .order-2… .order-12 à chacun de nos éléments représentant nos colonnes et qui va déterminer l’ordre d’affichage visuel de celles-ci dans la ligne.
Le principe est simple : une colonne avec une classe .order-* possédant un chiffre plus petit s’affichera avant une colonne avec une classe .order-* possédant un chiffre plus grand.
Retenez ici que vous n’êtes pas du tout obligé de faire suivre les chiffres : vous pouvez très bien ne positionner que deux colonnes en leur attribuant un .order-4et .order-7 par exemple. De plus, vous devez savoir que les colonnes ont par défaut un order : 0 (pour les colonnes dont l’ordre n’est pas spécifiquement défini avec une classe .order-).
Notez également que les classes .order-* sont responsive et supportent donc les breakpoints. Concrètement, cela signifie que nous allons donc pouvoir choisir des ordres d’affichage différents selon la taille de l’écran d’un visiteur en ajoutant -sm-, -md-, etc. à ces classes.
Finalement, retenez qu’on va également pouvoir utiliser les classes .order-first et .order-last (également responsive) pour afficher un contenu en premier ou en dernier. Pour information, ces deux classes vont respectivement appliquer order: -1et order : 13 aux colonnes ciblées.
Voir le résultat en full screen
Pour comprendre ces différents exemples, il suffit de savoir que :
.order-firstapplique la valeurorder: -1;- Les colonnes sans ordre explicite ont la valeur
order: 0; - Les colonnes avec un ordre défini par un chiffre vont avoir une valeur entre
order: 1etorder: 12; .order-lastapplique la valeurorder: 13;- On va pouvoir appliquer différents ordres selon les différentes tailles d’écran en utilisant
-sm-,-md-,-lg-et-xl.
Imbriquer des lignes les unes dans les autres
Pour créer des designs complexes, on va également pouvoir imbriquer des lignes dans d’autres lignes ou plus exactement imbriquer des lignes dans des colonnes. Cela va nous permettre d’avoir en quelques sortes plusieurs « niveaux de grilles ».
Pour faire cela, il va suffire d’ajouter un ou plusieurs éléments avec des classes .rowcomme enfant direct d’un élément portant une classe de type .col-*.
Notez qu’on va pouvoir imbriquer des lignes dans des colonnes comme cela à l’infini même si pour des raisons évidentes de clarté du code et d’ergonomie de vos pages on évitera les niveaux d’imbrication multiples.
Les lignes imbriquées dans d’autres colonnes vont agir comme de nouvelles sous-grilles et vont suivre les mêmes règles que précédemment et également être implicitement découpées en 12 colonnes de base.