Imbriquer plusieurs grilles dans Bootstrap 3

Posted by OpenTuto
mai 30, 2014 Bootstrap 3 Leave a Comment

Pour créer des pages web complexes avec Bootstrap 3, il faut commencer à penser « Imbrication des grilles », dans ce nouveau cours « Imbriquer plusieurs grilles dans Bootstrap 3 » nous allons définir une première zone dans le corps de la page dont nous paramétrerons la largeur. Ensuite nous y insérerons une grille, elle-même découpée en 12 colonnes, dans laquelle nous pourrons mettre en forme d’autres contenus :

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
29
30
31
32
33
34
35
36
37
38
<!-- www.opentuto.com -->
<!--  -->
 
<!-- Création du corps de la page. -->
<div class="container">
 
<!-- Déclaration de la première grille, au niveau du corps de la page. -->
<div class="row">
<!-- Création d'une première zone dont la largeur sera égale à 9 colonnes -->
<div class="col-md-9">
<h2>9 colonnes</h2>
<!-- Création de la seconde grille, cette dernière aura une largeur égale de de la première zone que nous venons de créer  -->
<div class="row">
<!-- Insertion d’une première section qui occupe 3 colonnes de notre nouvelle grille. -->
<div class="col-xs-3">
<p>.col-xs-3</p>
</div>
<!-- pareil pour l’élément précédent sauf que cette section occupera 5 colonnes de la grille-->
<div class="col-xs-5">
<p>.col-xs-5</p>
</div>
<!-- cette derniere section occupe le reste de la grille (4 colonnes) -->
<div class="col-xs-4">
<p>.col-xs-5</p>
</div>
</div>
</div>
</div>
</div>

Observons maintenant comment sont organisées ces deux grilles imbriquées :

Imbrication des grilles bootstrap 3

Imbrication des grilles bootstrap 3

Nous obtenons donc une zone principale occupant 9 colonnes au niveau du corps de la page. Une seconde grille est insérée dans cet élément. Nous y avons créé trois zones : la première occupant 3 colonnes, la seconde 5 et la dernière 4 colonnes.

Laisser un commentaire