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