Grille d'amorçage - Grands appareils

Exemple de grille d'amorçage : appareils volumineux

Dans le chapitre précédent, nous avons présenté un exemple de grille avec des classes pour les petits et moyens appareils. Nous avons utilisé deux divs (colonnes) et nous leur avons attribué une répartition de 25 %/75 % sur les petits appareils et une répartition de 50 %/50 % sur les appareils moyens :

Mais sur les gros appareils, la conception peut être meilleure avec une répartition de 33 %/66 %.

Conseil : les appareils de grande taille sont définis comme ayant une largeur d'écran de 1  200 pixels et plus .

Pour les gros appareils, nous utiliserons les .col-lg-*classes.

Alors maintenant, nous allons ajouter les largeurs de colonne pour les gros appareils :

Maintenant, Bootstrap va dire "à la petite taille, regardez les classes avec -sm- et utilisez-les. À la taille moyenne, regardez les classes avec -md- et utilisez-les. À la grande taille, regardez classes contenant le mot -lg- et utilisez-les".

L'exemple suivant entraînera une répartition 25 %/75 % sur les petits appareils, une répartition 50 %/50 % sur les appareils moyens et une répartition 33 %/66 % sur les gros appareils :

Utilisation uniquement de grands

Dans l'exemple ci-dessous, nous spécifions uniquement la .col-lg-6classe (sans .col-md-*et/ou .col-sm-*). Cela signifie que les gros appareils se partageront 50 %/50 %. Cependant, pour les appareils moyens ET petits, il s'empilera verticalement (100 % de largeur) :