La largeur fixe des conteneurs MISE EN PAGE:Largeur fixe

1. Les requêtes de média MISE EN PAGE:Requête de média

Les requêtes de média sont basées sur des largeurs d’écran, en fonction de celles-ci, la mise en page s’adapte. Ces largeurs d’écran sont définies par des points de rupture (breakpoints en anglais). Il est bon de rappeler que la mise en page de Bootstrap est Mobile First, ce qui veut dire que la mise en page est d’abord faite pour les smartphones. Ensuite, selon chaque point de rupture défini, la mise en page s’adaptera.

Bootstrap définit quatre points de rupture :

  • pour les petits écrans d’une largeur plus petite que 576 pixels,

  • pour les écrans moyens d’une largeur plus petite que 768 pixels,

  • pour les écrans larges d’une largeur plus petite que 992 pixels, et

  • pour les écrans extra-larges d’une largeur plus petite que 1200 pixels.

Notez bien que pour les écrans plus petit que 576 pixels, c’est la mise en page par défaut qui s’appliquera, sans qu’il soit nécessaire de définir des règles CSS spécifiques.

Voici comment se définissent les requêtes de média :

@media (min-width: 576px) { ... } 
@media (min-width: 768px) { ... } 
@media (min-width: 992px) { ... } 
@media (min-width: 1200px) { ... } 

Bootstrap peut aussi utiliser des requêtes de média avec la notion de largeur maximale. Voici ces requêtes...

Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les conteneurs
Suivant
La largeur fluide des conteneurs