Grille d'amorçage - Appareils moyens

Exemple de grille d'amorçage : appareils moyens

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

Mais sur les appareils moyens, la conception peut être meilleure en tant que répartition 50%/50%.

Conseil : les appareils de taille moyenne sont définis comme ayant une largeur d'écran comprise entre 992 pixels et 1 199 pixels .

Pour les appareils moyens, nous utiliserons les .col-md-*classes.

Nous allons maintenant ajouter les largeurs de colonne pour les appareils moyens :

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".

L'exemple suivant entraînera une répartition 25 %/75 % sur les petits appareils et une répartition 50 %/50 % sur les appareils moyens (et grands). Sur les très petits appareils, il s'empilera automatiquement (100 %) :

Utiliser uniquement le support

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

Le chapitre suivant montre comment ajouter un pourcentage de répartition différent pour les gros appareils.