I – Qu’est ce qu’un système de grilles?
..une structure comprenant une série de lignes horizontales et verticales, utilisées pour organiser le contenu d’une page web.
Les grilles sont un élément essentiel en Webdesign, elle vous permet d’organiser harmonieusement le contenu présent sur vos pages.
Système de grille webdesign
Outre le fait de produire une mise page bien structurée, les grilles dans le webdesign servent d’armature pour organiser la page et son contenu et favorisent un travail plus rapide au niveau de l’intégration CSS.
II – La grille de Bootstrap 3:
Bootstap 3 découpe le corps de la page en une grille composée de lignes de 12 colonnes de largeur égale:
Grille Bootstrap 3
Pour mettre en forme le contenu de notre page, nous allons commencer par la déclaration d’une ligne (en utilisant la classe .row), puis nous y intégrerons notre contenu. celui-ci pourra être divisé en plusieurs blocs, chacun occupant un nombre de colonnes déterminé qui sert à définir sa largeur.
Bootstrap 3 propose quatre systèmes de grilles, chacun correspondant à un type d’écrans :
| Grille |
Classes |
Type d’écran |
Taille d’écran |
| xs : extra small devices |
.col-xs-* |
Smartphone |
< 768 pixels |
| sm : small devices |
.col-sm-* |
Tablette |
< 992 pixels |
| md : medium devices |
.col-md-* |
Écran de bureau |
< 1 200 pixels |
| lg : large devices |
.col-lg-* |
Grand écran de bureau |
⩾ 1 200 pixels |
L’astérisque correspondant au nombre de colonnes occupé par chaque élément.
2.1 – Exemple d’utilisation :
Nous allons créer le squelette d’une pageweb composée d’une ligne divisée en deux éléments: une partie centrale occupant 8 colonnes et une autre occupant 4 colonnes.
Commençons par la création d’une ligne à l’aide la classe .row. Et au sein de cette ligne nous ajouterons le premier élément (occupant 8 colonnes) en utilisant la classe .col-md-8 et pour le deuxième élément nous l’ajouterons aussi à l’aide de la classe .col-md-4.
Exemple d’illustration – Grille Bootstrap 3
2.2 – Code Source :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemple de grille</title> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <!-- création d'une ligne --> <div class="col-md-8"> <!-- 8 colonnes pour la zone principale --> <h2>Zone principale - élément 1</h2> </div> <div class="col-md-4"> <!-- 4 colonnes pour la zone secondaire --> <h2>Zone secondaire élément 2</h2> </div> </div> </div> </body> </html> |
Grille Bootstrap – Une ligne et deux colonnes
2.3 – Explication du code:
Les balises <meta>, <link> et <div class="container"> ont été expliqué dans une autre leçon : première page HTML avec Bootstrap 3 .
<div class="row"> : permet la création d’une première ligne
<div class="col-md-8"> <h2>Zone principale</h2> </div> : création de la zone principale de notre page web, il occupe 8 colonnes de la grille destinée aux écrans des ordinateurs de bureau classiques (md).
<div> <h2>Widgets</h2> </div> : Création de la zone secondaire occupant 4 colonnes de la grille .
Comme nous avons utilisé le jeu de classe .col-md-*, la disposition 8 colonnes/4 colonnes s’affiche correctement sur tout écran dont la largeur est supérieure à 992 pixels.
Lorsque nous visionnerons le contenu de cette page sur un Smartphone ou une Tablette, Bootstrap 3 repositionnera automatiquement les éléments de notre page(à savoir la zone principale et la zone secondaire).
Dans ce cours « Comprendre le concept de grille dans le webdesign », nous avons découvert comment Bootstrap 3 organise les différentes zones d’une page web en utilisant la grille adaptée à un support déterminé.
Dans le cours suivant, nous allons voir comment créer des pages web optimisées pour chaque type de support (Smartphone, Tablette, Desktop)
