Dans le chapitre précédent, vous avez vu comment une page peut être décomposée en sections d'en-tête (header), de pied de page (footer) et de contenu.
Maintenant que vous avez un bon aperçu de la manière dont vous allez implémenter la structure de vos pages, il est temps de les créer !
Découvrez les conteneurs
Commençons par l'élément de mise en page le plus basique dans Bootstrap, le conteneur (container). Envelopper vos contenus dans un élément <div> avec la classe .container permet de centrer votre contenu à l’écran en y ajoutant des marges horizontales automatiques.
De ce fait, la classe .container permet d’aérer la lecture horizontale du contenu de votre site web.
<div class="container">
<!-- Ici notre contenu -->
</div>Si vous voulez que le contenu occupe toujours 100 % de la largeur de l’écran, vous pouvez utiliser la classe .container-fluid à la place. Cela permet d’enlever les marges horizontales appliquées par défaut par le framework.
Maîtrisez les grilles de Bootstrap
Bootstrap 5 possède un système de grille puissant et flexible qui permet de créer tous les types de mise en page. Cette grille utilise une série de lignes (en anglais, row) et de colonnes (en anglais, column) pour mettre en page le contenu. Une ligne permet d’envelopper une ou plusieurs colonnes qui intègrent du contenu.
OK, mais qu’est-ce que ça veut dire, en pratique ?
Un élément <div> de ligne est déclaré en lui attribuant une classe .row. Pour chaque colonne de la ligne, un élément <div> enfant du <div> de ligne doit se voir attribuer l'une des classes de colonnes de Bootstrap 5. La première de ces classes de colonnes est la classe .col.
Examinons cet extrait de code :
<div class="container">
<div class="row">
<div class="col">
Première colonne
</div>
<div class="col">
Deuxième colonne
</div>
</div>
</div>Vous remarquez qu'il y a un élément <div> parent .row enveloppant deux <div> enfants .col. Bootstrap 5 possède une grille à 12 colonnes. Dans ce cas précis, Bootstrap attribuera automatiquement la moitié des colonnes à chacun des éléments <div> de classe .col, donnant alors une largeur de 6 colonnes par <div>.
En d'autres termes, cela représente la moitié de la largeur de la ligne. De ce fait, Bootstrap divisera systématiquement les 12 colonnes de manière égale entre les éléments <div> qui ont la classe .col.
Mais, et si je veux indiquer explicitement le nombre de colonnes à la place de Bootstrap ?
Par exemple, vous pouvez avoir une mise en page qui ne possède pas de colonnes de taille égale. Supposons que vous disposiez d'une ligne, que vous vouliez qu'une colonne de cette ligne occupe deux tiers de sa largeur, et qu'une autre colonne occupe le tiers restant.
Dans ce cas, en tenant compte du fait qu'une ligne de la grille de Bootstrap peut être divisée en un maximum de 12 colonnes, vous voulez que l'une des <div> .col occupe huit colonnes, et que l'autre occupe quatre colonnes.
Pour ce faire, ajoutez chacun de ces nombres à la classe .col correspondante, comme indiqué dans cet extrait :
<div class="container">
<div class="row">
<div class="col-8">
Première colonne
</div>
<div class="col-4">
Deuxième colonne
</div>
</div>
</div>Pour en savoir plus sur les grilles, vous pouvez consulter la documentation Bootstrap.
Créez des aplats de couleurs grâce aux classes utilitaires de Bootstrap 5
Vous allez utiliser les classes utilitaires (en anglais, utilities) de Bootstrap 5 pour mettre des aplats de couleurs et nos marges internes (padding) et externes (margin) entre nos éléments.
Les classes utilitaires sont des classes créées par Bootstrap 5, qui permettent d’ajouter des propriétés CSS à vos éléments, telles que des :
background-color(comme.bg-light) ;margin(comme.m-5) ;padding(comme.p-5) ;border(comme.border-top).
Entre autres ! Vous pouvez consulter toutes les classes sous la liste “Utilities” dans la documentation de Bootstrap.
Si on prend l’exemple du menu :
Vous voyez qu’il y a une première barre gris clair qui est mise en page grâce à la classe utilitaire .bg-light. La barre gris foncé est quant à elle mise en page grâce à la classe .bg-secondary pour la couleur et .py-4 pour le padding (marge interne).
Nous verrons d’autres classes utilitaires tout au long de ce cours, donc n’hésitez pas à les parcourir dans la documentation et à les tester pendant les différentes mises en pratique.
À vous de jouer
Désormais, vous devriez être prêt à mettre en pratique ce que vous avez appris pour créer la structure de votre portfolio.
Vous allez commencer par mettre en place votre environnement de travail.
Vous pouvez partir du dossier votreDossier mis à votre disposition dans le Github du cours :
votreDossier/
/css/
/js/
/img/
/sass/
index.html
Maintenant que notre environnement de travail est en place, nous allons pouvoir commencer à mettre en place notre structure à l’aide du système de grille de Bootstrap 5.
Votre mission, si vous l’acceptez, est de réaliser la structure ci-dessous :
Dans le chapitre précédent, nous avons identifié dans cette structure :
un menu ;
une première section de présentation ;
une seconde concernant les compétences techniques ;
une troisième section pour présenter des projets ;
une dernière section avec un formulaire de prise de contact ;
un footer.
Pour réaliser cet exercice, utilisez les concepts que nous venons de voir dans ce chapitre : les conteneurs, les grilles et les classes utilitaires. N’oubliez pas d’ajouter les couleurs pour différencier vos différentes sections.
Si vous voulez voir comment j’ai appréhendé cet exercice (ou corriger le vôtre !), suivez-moi dans le screencast ci-dessous :
En résumé
Les classes de conteneur, ligne et colonne nécessitent une hiérarchie spécifique lors de la création d'une grille dans Bootstrap 5.
La grille de Bootstrap est une grille à 12 colonnes.
Grâce aux classes utilitaires, vous pouvez ajouter des couleurs aux éléments.
Maintenant que vous avez appris à implémenter la structure à l'aide de la grille de Bootstrap, vous êtes prêt à apprendre à la rendre responsive en fonction des tailles d'écran.
