Sommaire

Les largeurs des écrans et des conteneurs GRILLE ADAPTATIVE:Largeur des écrans

1. La taille des écrans GRILLE ADAPTATIVE:Taille des écrans

Nous l’avons déjà évoqué, cette nouvelle version 3 de Bootstrap est immédiatement en design adaptatif pour les smartphones. Cela veut donc dire que par défaut, le design de Bootstrap est adapté aux écrans des smartphones, avec des règles CSS spécifiques, sans qu’il soit nécessaire de faire une requête de média.

Bootstrap permet donc de gérer quatre types d’écran :

  • Les écrans inférieurs à 768 pixels pour les smartphones.

  • Les écrans supérieurs à 768 pixels pour les tablettes.

  • Les écrans supérieurs à 992 pixels pour les ordinateurs avec des écrans de taille moyenne.

  • Les écrans supérieurs à 1200 pixels pour les ordinateurs avec des écrans de taille plus grande.

C’est dans le fichier bootstrap.min.css (ou bootstrap.css) que se trouvent les règles @media.

Vous disposez des règles :

  • @media (min-width: 768px) {...} pour les tablettes.

  • @media (min-width: 992px) {...} pour les écrans de taille moyenne.

  • @media (min-width: 1200px) {...} pour les écrans de grande taille.

2. La largeur du conteneur GRILLE ADAPTATIVE:Largeur des conteneurs

Quand vous construisez votre page à l’aide d’éléments HTML5, vous utilisez souvent (toujours ?) un « conteneur » ...