Les grilles bootstrap

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:

<div class="row">
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>    
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>    
</div>

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:

<ul>
 	<li>.visible-xs</li>
 	<li>.visible-sm</li>
 	<li>.visible-md</li>
 	<li>.visible-lg</li>
 	<li>.hidden-xs</li>
 	<li>.hidden-sm</li>
 	<li>.hidden-md</li>
 	<li>.hidden-lg</li>
</ul>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.