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

images/C03-003.png

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 des requêtes...

Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
La largeur fluide des conteneurs
Suivant
Des exemples de grille