IV. La grille en action▲
Dans ce chapitre nous allons voir des exemples de mise en Å“uvre de la grille de Bootstrap.
IV-A. On se lance▲
IV-A-1. Une rangée▲
Commençons tranquillement en utilisant une seule rangée :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/tuto.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
6 col
</div>
<div class="col">
6 col
</div>
</div>
</div>
</body>
</html>
|
Dans la suite de ce chapitre, je ne répéterai pas le code commun. D'autre part pour la lisibilité des exemples j'adopterai systématiquement un conteneur fixe. |
Voici le résultat de ce code :
J'ai prévu deux éléments avec une simple classe col, du coup ils sont de largeurs égales et occupent chacun six colonnes.
|
De la même manière, on peut utiliser des classes col-sm, col-md… |
Si on ne veut pas des largeurs égales on peut spécifier le nombre de colonnes :
Voici le résultat de ce code :
L'élément central occupe la largeur imposée (huit colonnes), les deux autres éléments se partagent la place restante (deux colonnes chacun).
|
La mise en forme des éléments est effectuée par les règles présentes dans le fichier tuto.css que nous avons défini au chapitre précédent. |
|
D'autre part dans ce chapitre je prendrai systématiquement le cas des classes correspondant aux plus petits supports pour éviter les empilements d'éléments. Nous verrons dans le chapitre suivant cet aspect de la grille. |
IV-A-2. Plusieurs rangées▲
Pour obtenir plusieurs rangées, il suffit d'utiliser plusieurs fois la classe row. Un petit exemple avec trois rangées pour voir l'effet :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<div class="row">
<div class="col-1">1 col</div>
<div class="col-2">2 colonnes</div>
<div class="col-3">3 colonnes</div>
<div class="col">6 colonnes</div>
</div>
<div class="row">
<div class="col">12 colonnes</div>
</div>
<div class="row">
<div class="col-4">4 colonnes</div>
<div class="col">8 colonnes</div>
</div>
Ce qui donne ce rendu :
IV-A-3. Largeur variable▲
Par défaut les colonnes ont toujours la même largeur, mais le passage à flexbox permet de jouer facilement sur des différences de largeur. Mais pour le coup on peut perdre un peu la notion de colonne. Regardez cet exemple :
Avec ce rendu :
L'utilisation de la classe col-auto fixe les règles de flexbox pour que l'élément s'adapte au contenu (auto) :
2.
3.
4.
5.
6.
7.
.col-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
|
Il existe évidemment les classes col-sm-auto, col-md-auto… |
Dans cette situation on se rend compte que l'utilisation de Flexbox peut nous éloigner de la notion de colonnes.
IV-B. Éléments égaux sur plusieurs rangées▲
Puisqu'avec la classe col l'espace se répartit automatiquement comment faire pour avoir des éléments bien alignés sur plusieurs rangées ?
Par exemple avec ce code :
J'obtiens logiquement cet aspect :
Si je les veux sur deux rangées, je peux définir un nombre de colonnes parce que si on dépasse les douze colonnes on passe automatiquement sur une nouvelle rangée (wrapping) :
Je peux aussi utiliser deux classes row comme on l'a déjà vu ci-dessus :
Mais il existe aussi la classe w-100 pour obtenir le même effet :
|
Pourquoi w-100Â ? |
Tout simplement pour width 100%. Il existe aussi w-25, w-50 et w-75.
IV-C. Saut de colonnes▲
Bootstrap 3 permettait de sauter des colonnes avec des classes d'offset. Ces classes ont disparu avec la version 4. Désormais on utilise des utilitaires de marges qui apportent moins de souplesse, mais plus de simplicité. Je parlerai plus précisément de ces utilitaires dans la prochaine partie et pour le moment on va se contenter de l'espacement automatique.
La classe est composée de trois éléments séparés par des traits d'union :
{propriété}{côtés}-{support optionnel}-auto
1) La propriété définit le type :
- m : marge
- p : remplissage (padding)
2) Les côtés définissent la position :
- t : haut (top)
- r : droite (right)
- b : bas (bottom)
- l : gauche (left)
- x : gauche et droite (axe x)
- y : haut et bas (axe y)
Par exemple la classeml-auto définit une marge automatique à gauche alors que la classemr-auto fait la même chose pour la droite.
|
On a aussi évidemment les classes ml-sm-auto, ml-md-auto, ml-lg-auto et ml-xl-auto… |
Voici un exemple de saut :
Avec ce rendu :
On a ajouté une marge à gauche automatique.
IV-D. Imbrication d'éléments▲
On doit souvent imbriquer des éléments dans une page web, est-ce possible avec Bootstrap ? Autrement dit, inclure un row dans un col. Eh bien, on va tester ça tout de suite :
Avec ce résultat :
On dirait bien que ça fonctionne !
Les imbrications peuvent s'enchaîner pour répondre à des besoins complexes :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<div class="row">
<div class="col-12">Premier niveau avec 12 colonnes
<div class="row">
<div class="col-8">Second niveau avec 8 colonnes
<div class="row">
<div class="col-4">Troisième niveau avec 4 colonnes</div>
<div class="col-6 ml-auto">Troisième niveau avec 6 colonnes
<div class="row">
<div class="col-3 mx-auto">Quatrième niveau avec 3 colonnes</div>
<div class="col-5 mx-auto">Quatrième niveau avec 5 colonnes</div>
</div>
</div>
</div>
</div>
<div class="col">Second niveau avec 4 colonnes</div>
</div>
</div>
</div>
Avec ce rendu :
IV-E. Ordre des colonnes▲
Très logiquement, les colonnes s'affichent dans l'ordre du flux. Il peut arriver qu'on veuille bouleverser cet ordre. Regardez cet exemple :
Avec ce rendu :
Les classes order-* permettent de fournir un ordre d'affichage avec une valeur allant de 1 Ã 12.
|
Il existe aussi les classes order-sm-*, order-md-*, order-lg-* et order-xl-*. |
IV-F. Un petit TP pour s'entraîner▲
Je vous propose pour clore ce chapitre de vous entraîner avec un petit TP. Le but est d'obtenir ce résultat :
Donc deux zones séparées avec imbrication et un offset dans la partie gauche.
Voici une solution (cherchez un peu avant de regarder)Â :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<div class="row">
<div class="col">6 colonnes
<div class="row">
<div class="col-4">4 colonnes</div>
<div class="col-4 ml-auto">4 colonnes</div>
</div>
</div>
<div class="col">6 colonnes
<div class="row">
<div class="col-4">4 colonnes</div>
<div class="col-8">8 colonnes</div>
</div>
</div>
</div>
Vous aviez réussi ? C'est parfait, on va pouvoir continuer. Si vous avez quelques difficultés, je vous conseille de relire ce chapitre.
IV-G. En résumé▲
- La grille de Bootstrap permet d'empiler des rangées de douze colonnes.
- La grille de Bootstrap autorise le saut de colonnes.
- La grille de Bootstrap permet de rendre la largeur d'un élément automatique.
- La grille de Bootstrap permet de changer l'ordre des colonnes.
- La grille de Bootstrap permet d'imbriquer des rangées.
- La grille de Bootstrap crée automatiquement une nouvelle rangée en cas de débordement.