Apprendre à utiliser les grilles de bootstrap 3
Il existe pléthore de tutoriels pour apprendre à se servir des grilles de Bootstrap, comme celui-ci. Je vous partage donc ici ces connaissances:
Partant d’un exemple concret, la majorité des sites à colonne ont 4 colonnes sur grand écran, 2 en petit et moyen écran , puis une seule colonne sur mobile.
Voici un tableau récapitulatif des grilles bootstrap 3 et les résolutions concernées:
.col-xs-$ |
Extra Small | Phones Less than 768px |
.col-sm-$ |
Small Devices | Tablets 768px and Up |
.col-md-$ |
Medium Devices | Desktops 992px and Up |
.col-lg-$ |
Large Devices | Large Desktops 1200px and Up |
Si on souhaite ;
- 1 colonne sur les très petits appareils
- 2 colonnes sur petits et moyens appareils
- 4 colonnes sur les gros appareils
Voici le code à appliquer:
Le système de grille Bootstrap 3 s’applique d’abord au écrans de type mobile. Lorsque vous déclarez une taille de grille spécifique, il s’agit de la grille pour cette taille et les suivantes .
Si vous ne mettez que .col-xs-12 cela veut dire que quelque soit la taille de l’écran, on aura une seule colonne (ca revient à écrire col-xs-12 col-sm-12 col-md-12 col-lg-12).
Si vous mettez que col-sm-12, cela veut dire qu’on aura une seule colonne, à partir de écrans de taille moyenne(768px). Ce qui n’a pas de sens, puisque sur mobile la largeur par défaut est d’une colonne. (ca revient aussi à écrire col-xs-12 col-sm-12 col-md-12 col-lg-12).
On pourrait écrire col-md-3 pour avoir 4 colonnes à partir de 992px par exemple, si la mise en page le permet (ca revient à écrire col-md-3 col-lg-3).
Un peu déroutant au début, ce système permet en réalité d’aller plus vite : dans la plupart des cas, on pourra jouer seulement avec les col-md et col-lg ou col-sm et col-lg, et profiter de ce système de cascade vers le haut pour avoir un site responsive rapidement.
Bootstrap offre également la possibilité de cacher des éléments en fonction de la taille d’écran: