Créer une page web multigrille

Dans le cours précédent: (Créer une page web multigrille avec Bootstrap 3), nous avons utilisé une grille dédiée aux écrans d’ordinateurs de bureau classiques (md). Dans ce cours nous allons apprendre à créer des pages web adaptées à plusieurs support (Smartphone, Tablette, Desktop). Pour cela, nous allons combiner plusieurs grilles.

Ici, nous souhaitons que la zone principale occupe:

  • 9 colonnes sur un écran de bureau classique (.col-md-10)
  • 7 colonnes sur une Tablette (.col-sm-8)
  • 5 colonnes sur un Smartphone (.col-xs-6)

Rappel :

Rappel sur les grilles Bootstrap 3

Rappel sur les grilles Bootstrap 3

Pour obtenir le résultat désiré,  nous allons créer une section <div> qui prend en paramètre trois classes : <div class="col-md-10 col-sm-8 col-xs-6"> ... </div>

Comme nous avons précédemment dit, la grille Bootstrap 3 est composée de 12 colonnes, donc d’une façon symétrique, nous utilisons les classes suivantes pour définir la taille de la zone secondaire :

  • 2 colonnes sur un écran de bureau classique (.col-md-2)
  • 4 colonnes sur une Tablette (.col-sm-4)
  • 6 colonnes sur un Smartphone (.col-xs-6)

Pour créer cette seconde zone, il suffit de créer une section <div> comme suit :
<div class="col-md-2 col-sm-4 col-xs-6"> ... </div>

ci-dessous, l’exemple d’une page multi-grille :

Visionnons maintenant cette page sur notre ordinateur de bureau :

Page multigrille sur un ordinateur de bureau

Page multigrille sur un ordinateur de bureau

En chargeant la page sur un écran de bureau, la grille « medium devices » (.col-md-10 et .col-md-2) est prise en compte pour mettre en forme les deux zones. La zone principale occupe donc 10 colonnes. La seconde partie a donc une largeur de 2 colonnes.

Page multigrille sur une Tablette

Page multigrille sur une Tablette

Sur la tablette, le navigateur prend en compte les classes .col-sm-8 et .col-sm-4 correspondant à la grille dédiée aux tablettes (« small devices »).

Page multigrille sur smartphone

Page multigrille sur smartphone

Enfin, lorsque la page est affichée sur un smartphone, chaque zone a une largeur de 6 colonnes. Cela correspond à la classe .col-xs-6 de la grille « extra small devices » sélectionnée ici par Bootstrap 3.

Laisser un commentaire