La grille de mise en page GRILLES:Grille de mise en page
1. Les concepts de construction GRILLES:Construction
La mise en page avec Bootstrap se fait avec des conteneurs. Chaque conteneur contient des lignes qui elles-mêmes contiennent des colonnes qui définissent des blocs de contenu. Dans chaque bloc vous pouvez placer ce que vous souhaitez : du texte, des images, des barres de navigation...
Ce modèle de mise en page est basé sur le module CSS3 Flexbox du W3C : Flexible Box Layout Module Level 1 (https://www.w3.org/TR/css-flexbox-1/). Ce module, qui est encore en Candidate Recommendation au 19 novembre 2018, est parfaitement reconnu par tous les navigateurs modernes : https://caniuse.com/#search=flex.
Vous devez connaître quelques principes de conception des grilles avec Flexbox et Bootstrap :
-
La grille de Bootstrap est basée sur des conteneurs ayant la classe .container qui contiennent des lignes ayant la classe .row.
-
La grille de Bootstrap est basée sur 12 colonnes par ligne. Donc chaque colonne de la grille sera alignée sur ces 12 colonnes.
-
Chaque colonne a un remplissage interne horizontal (padding) de 15 pixels, ce qui donne une gouttière de 30 pixels entre chaque bloc. Mais vous pourrez supprimer cette gouttière, si vous le souhaitez.
-
Si vous ne spécifiez pas de largeur pour les colonnes, celles-ci auront une largeur égale.
-
La largeur des colonnes est exprimée en pourcentage.
-
Vous pourrez déterminer le nombre de colonnes par ligne pour chaque point de rupture...