Gérer l’ordre d’affichage des colonnes et l’imbrication de lignes dans une grille Bootstrap

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-4 et .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: -1 et order : 13 aux colonnes ciblées.

See the Pen
Bootstrap 1.6.1 by Pierre (@pierregiraud)
on CodePen.

Pour comprendre ces différents exemples, il suffit de savoir que :

• .order-first applique la valeur order: -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: 1 et order: 12 ;
• .order-last applique la valeur order: 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 .row comme 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.

See the Pen
Bootstrap 1.6.2 by Pierre (@pierregiraud)
on CodePen.