Le système de grille est le coeur de BOOTSTRAP twitter.
Bootstrap Twitter considère qu'une ligne .row fait 12 colonnes.
L'idée d'un responsive design c'est de dire que pour telle taille d'écran un élément occupe X colonne(s).
Boostrap Devices
Bootstrap twitter prend en charge 4 types de format:› | Très petit format | < 768 pixels | ( Smartphone ) |
› | Petit format | ≥ 786 px & < 992 px | ( Tablette ) |
› | Moyen format | ≥ 992 px & < 1200 px | ( Petit écran ) |
› | Large format | ≥ 1200 px | ( Ecran standard ) |
› | Très petit format | .col-xs- |
› | Petit format | .col-sm- |
› | Moyen format | .col-md- |
› | Large format | .col-lg- |
Sur un écran de poste de travail
Tablette
Smartphone
Maintenant que nous avons établi la stratégie d'affichage des éléments, on peut passer au code:
Code HTML
<div class="container"> | |
<div class="row" style="border:1px solid #ddd;"> | |
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-7 col-lg-offset-1" | |
style="background-color:orange;height:200px;">Texte | |
</div> | |
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 col-lg-offset-1" | |
style="background-color:green;height:200px;">Menu | |
</div> | |
</div> | |
</div> |
Rendu
Texte
Menu
Explication du code
Nous avons construit deux blocs un orange et un vert. Ensuite nous avons indiqué pour chaque taille d'écran le nombre de colonnes à occuper avec la syntaxe col-xs-*, col-sm-*, col-md-* et col-lg-* où * est le nombre de colonnes.Pour le bloc orange:
col-xs- | 12 |
---|---|
col-sm- | 9 |
col-md- | 9 |
col-lg- | 7 |
Pour le bloc orange:
col-xs- | 12 |
---|---|
col-sm- | 3 |
col-md- | 3 |
col-lg- | 2 |
Offset
Maintenant voyons comment nous avons géré l'espace entre les éléments pour la version LG ( Large device ). Pour consacrer un espace à une colonne il faut utiliser la propriété offset. La logique est la même que pour indiquer la largeur d'un bloc: col-xs-offset-*, col-sm-offset-*, col-md-offset-* et col-lg-offset-* où * est le nombre de colonnes.Pour le bloc orange:
col-xs-offset- | 0 |
---|---|
col-sm-offset- | 0 |
col-md-offset- | 0 |
col-lg-offset- | 1 |
Pour le bloc vert:
col-xs-offset- | 0 |
---|---|
col-sm-offset- | 0 |
col-md-offset- | 0 |
col-lg-offset- | 1 |
Il n'est cependant pas nécessaire d'indiquer les valeurs pour tous les formats d'affichage puisque 0 est la valeur par defaut. Indiquer la valeur pour l'affichage LG est donc suffisant.
Crée votre site web au meilleur prix💰