Chargement...

Bootstrap twitter: la grille


Bootstrap twitter Le système de grille est le coeur de BOOTSTRAP twitter.
Bootstrap Twitter considère qu'une ligne .row fait 12 colonnes.

Bootstrap Twitter Grid 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 )
Il existe un préfixe pour ces formats:
Très petit format .col-xs-
Petit format .col-sm-
Moyen format .col-md-
Large format .col-lg-
On va prendre l'exemple d'affichage de deux éléments. Le premier de couleur orange pourrait être un élément de texte et un élément vert qui serait un menu:

Sur un écran de poste de travail

Bootstrap Twitter Grid

Tablette

Bootstrap Twitter Grid

Smartphone

Bootstrap Twitter Grid

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
Si vous changez la taille de votre navigateur, vous verrez que le rendu ci-dessus s'adaptera à la taille comme nous le voulions plus haut.

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-** 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-** 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.



UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW