grille-bootstrap

Ceci est une ancienne révision du document !


La grille Bootstrap

Bootstrap utilise une grille pour le positionnement des éléments sur la page, c'est le cœur du système Bootstrap.

Bootstrap étant une bibliothèque jQuery permettant de créer facilement des responsive design, vous comprendrez facilement et l'utilité du système de grille de Bootstrap.

Bootstrap décompose la page en ligne (row) et chaque ligne en 12 colonnes. Un peu comme le tableau ci-dessous

Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12

exemple de code

<div class="row"> <!-- Création d'une ligne -->
<div class="col-md-3">  <!-- Création d'un bloc de 3 cases soit 25% (12 cases / 3 cases = 4) -->
Première case correspondant à 25% de la largeur de la page
</div>
<div class="col-md-9"> <!-- Création d'un second bloc de 75% de largeur -->
C'est la deuxième colonne
</div>
</div> <!-- Fin de la ligne -->
  • grille-bootstrap.1438985467.txt.gz
  • Dernière modification : 08/10/2019 16:39
  • (modification externe)