Conteneurs, flexbox et grilles
Dans ce cours, je pars du principe que vous disposez de bonnes connaissances concernant le fonctionnement des langages HTML et CSS et que vous savez ce qu’est un attribut class et comment fonctionnent les modèles des boites flexibles et des grilles CSS.
Bootstrap utilise un système de « grille » à 12 colonnes de base reposant sur le modèle des boites flexibles (flexbox) comme système de disposition principal.
Attention ici : bien que le terme « grid » (grille) soit utilisé de nombreuses fois dans la documentation officielle, le modèle utilisé par Bootstrap est bien le flexbox et non pas le modèle des grilles CSS.
Le flexbox est ici utilisé par Bootstrap pour créer une sorte de grille mais nous n’allons pouvoir manipuler que les propriétés liées au flexbox (dépendant de display : flex) et non pas celles liées aux grilles (dépendant de display : grid).
Pour utiliser ce système de grilles Bootstrap, nous allons avant tout devoir définir un élément conteneur dans notre page HTML auquel on passera un attribut class="container" ou class="container-fluid".
Notez que lorsqu’on utilise Bootstrap il est toujours conseillé de définir un élément conteneur avec class="container" ou class="container-fluid" qui servira de conteneur générique et dans lequel on placera tout le contenu HTML de notre body. Cette bonne pratique s’applique même lorsqu’on n’utilise pas le système de grilles Bootstrap ensuite.
La classe .container va permettre de définir un conteneur adaptable ou « responsive » de taille fixe, ce qui signifie que notre conteneur aura toujours la même taille pour un breakpoint donné et changera de taille à chaque breakpoint.
La largeur d’un conteneur défini avec .container va être la suivante entre chaque breakpoint :
La largeur par défaut d’un conteneur défini avec .container est égale à 100% de l’espace disponible. Ensuite, pour les fenêtres d’au moins 1200px de large, le conteneur occupera une place de 1140px maximum. Pour les fenêtres de largeur comprise entre 992px et 1200px, le conteneur occupera une place de 960px maximum et etc.
La classe .container-fluid permet de définir un conteneur de taille fluide, c’est-à-dire un conteneur dont la taille va changer en même temps que celle de la fenêtre de vos visiteurs. Un conteneur défini avec .container-fluid occupera toujours 100% de la largeur disponible.
Regardez plutôt le code ci-dessous et son résultat pour bien comprendre comment fonctionnent les classes .container et .container-fluid.
Code :
See the Pen
Bootstrap 1.3.1 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 1.3.1 by Pierre (@pierregiraud)
on CodePen.
Note : Dans ce cours, j’utiliserai l’éditeur en ligne CodePen afin de vous fournir les exemples de code et que vous puissiez voir les résultats immédiatement. Pour passer d’une vue à l’autre, vous n’avez qu’à cliquer sur les boutons « HTML » et « Result » . Pour ce premier code, j’ai lié les différents fichiers Bootstrap depuis mon fichier HTML. A l’avenir, je les inclurai en utilisant les options de préchargement de CodePen en utilisant l’onglet « Options » (« Settings » en anglais).
De votre côté, je vous invite à réécrire les différents exemples dans votre propre éditeur afin d’optimiser votre apprentissage et de pouvoir afficher les résultats dans une fenêtre libre de votre navigateur (mon site utilise déjà des conteneurs de taille fixe et vous ne pourrez donc pas redimensionner les codes fenêtrés dans CodePen à votre guise depuis mes cours pour apprécier la prise en charge du responsive avec Bootstrap.). Lorsque vous recopiez les codes, pensez bien à toujours inclure les fichiers Bootstrap !
Les règles générales de structure des grilles Bootstrap
Lorsqu’on utilise Bootstrap avec nos fichiers HTML, on commencera toujours par définir un ou plusieurs conteneurs avec les classes .container ou .container-fluid dans lesquels on placera le reste de notre contenu HTML.
Ces conteneurs, qui seront généralement des éléments divou des éléments HTML structurants vont pouvoir contenir n’importe quel type de contenu HTML.
Le contenu HTML dans un conteneur va pouvoir être placé librement ou selon le système des grilles Bootstrap.
Pour rappel, Bootstrap permet de créer des grilles de 12 colonnes en utilisant les propriétés du flexbox.
Comme vous le savez, le flexbox utilise un système d’axe principal et d’axe secondaire. L’axe principal défini par Bootstrap est l’axe horizontal et les lignes vont ainsi servir de conteneurs aux colonnes.
Pour définir une nouvelle ligne de grille, on va utiliser la classe .row.
Dans le système de grille de Bootstrap, les lignes doivent absolument être placées dans des conteneurs et ne sont utilisées que dans le but de servir elles-mêmes de conteneurs pour les colonnes de la grille.
Pour chaque nouvelle ligne, on va pouvoir décider du nombre de colonnes dont la ligne va disposer à partir des 12 de base grâce à des classes .col-*. Ici, il est important de bien comprendre que les grilles Bootstrap disposent automatiquement toujours de 12 colonnes de base qui sont définies implicitement. On va ensuite pouvoir « grouper » certaines de ces 12 colonnes de base ensemble dans chaque ligne pour former de nouvelles colonnes personnalisées.
Les règles liées aux grilles Bootstrap à retenir sont donc les suivantes :
- Les lignes (
.row) doivent être placées dans des conteneurs (.containerou.container-fluid) ; - Les lignes ne doivent être utilisées que pour contenir des colonnes et, de façon réciproque, les éléments disposés avec des classes
.coldoivent absolument être des enfants directs des éléments portant des classes.row.
Explication des règles de structure des grilles Bootstrap à partir de la définition des classes .row et .col
La seconde règle évoquée ci-dessus se comprend bien lorsqu’on regarde de plus près les propriétés CSS attachées aux classes .row et .col et notamment les styles suivants :
Les lignes sont donc des conteneurs flexibles et leurs enfants directs vont ainsi être des éléments flexibles. En faisant en sorte que les éléments avec une classe .col soient des enfants directs de ceux avec une classe .row, les règles de disposition du flexbox vont donc bien s’appliquer.
Note importante : dans la plupart des tutoriels disponibles sur le net, vous entendrez parler de « colonne » pour désigner à la fois les 12 colonnes de base que possède toute grille et donc toute ligne de grille et pour désigner les colonnes qu’on va nous même créer en regroupant certaines des colonnes de base.
Ce raccourci mène malheureusement à de nombreuses confusions et est très dangereux selon moi puisque la plupart des personnes ne comprennent ensuite plus si les différentes propriétés sont appliquées aux colonnes de base ou aux colonnes qu’on définit.
Je dois donc vous rappeler ici qu’une grille (et donc une ligne) Bootstrap contient toujours automatiquement 12 colonnes qui sont implicites. On va ensuite pouvoir grouper ces colonnes de base entre elles avec les classes .col-* et ainsi faire en sorte qu’une ligne possède 1, 2, 3, 4, 5, etc. colonnes personnalisées.
Cependant, implicitement, nos lignes seront toujours découpées selon ce principe de 12 colonnes et on partira toujours de ces 12 colonnes pour personnaliser les lignes.
Nous verrons dans la leçon suivante comment utiliser les classes .col-* et comment créer des design de grilles complexes. Pour le moment, je tenais juste à bien préciser le sens du terme « colonne » et ce à quoi correspondent les classes .col-. Fin de l’aparté.
Chaque colonne personnalisée créée avec .col va par défaut posséder un padding gauche et droit qu’on appelle également des « gouttières » et qui sert à espacer les contenus des différentes colonnes créées.
La taille par défaut de ces gouttières est de 15px pour chaque côté. Ce padding est contrebalancé par une margin négative sur l’élément portant la classe .row (l’élément représentant la ligne) pour harmoniser l’alignement général entre les différents éléments.
On va pouvoir supprimer le padding des colonnes .col et la margin des éléments .row en appliquant la classe .no-gutters à l’élément représentant la ligne.
Notez également que si on ne précise pas explicitement le nombre de colonnes de base qui doivent être utilisées pour créer chacune des colonnes personnalisées alors l’espace dans la ligne sera distribué équitablement entre chacune des colonnes créées. Nous aurons l’occasion de revenir sur ce point également dans la leçon suivante.
