Dans la partie 2, nous avions placé nos titres de section en même temps que la structuration de notre page. Nous allons maintenant voir comment les personnaliser grâce aux classes utilitaires de Bootstrap 5.
Quand on observe les classes utilitaires de Bootstrap, on remarque qu’elles ne sont pas construites n’importe comment. Bien souvent, la classe utilitaire est composée des initiales de la propriété CSS qu’elle représente, concaténées (collées) à la valeur qu’elle ajoute.
Pour les propriétés liées au texte, il existe plusieurs classes que vous pouvez utiliser pour modifier l’épaisseur ( font-weight ) ou le style ( font-style ) du texte :
Valeur | C’est-à-dire... | Classe utilitaire |
bold | texte en gras | fw-{breakpoint}-bold |
bolder | texte encore plus gras | fw-{breakpoint}-bolder |
normal | texte normal | fw-{breakpoint}-normal |
light | texte léger | fw-{breakpoint}-light |
lighter | texte encore plus léger | fw-{breakpoint}-lighter |
italic | texte en italique | fs-{breakpoint}-italic |
normal | texte normal | fs-{breakpoint}-normal |
Vous remarquez que comme pour toute autre classe utilitaire, nous pouvons ajouter des breakpoints (points d’arrêt) pour rendre le texte responsive.
Dans le cas de notre h1, nous allons lui ajouter la classe .fw-bold, ce qui veut dire font-weight: bold;. En suivant cette logique, on peut ajouter la classe suivante, .fw-light, à notre h2, ce qui a pour effet de réduire l’épaisseur de la police d’écriture.
<h1 class="fw-bold">Je suis John Doe Développeur et Designer Web</h1>
<h2 class="fw-light">Bienvenue dans mon univers créatif</h2>Vous pouvez voir toutes les classes utilitaires liées aux propriétés du texte dans la documentation Bootstrap.
Rendez votre typographie responsive
Toujours dans la même logique que les colonnes, il est possible d’ajouter des modificateurs de classes liés aux breakpoints de Bootstrap.
Pas de panique, Bootstrap a fait ça bien, et vous les connaissez déjà ! Il s’agit des {-sm, -md, -xl, -xxl}. Et comme pour les colonnes, la construction suit la même logique : .{propriété}-{modificateur}-{valeur}.
Par exemple, vous ajoutez les classes .fs-3 .fs-md-2 à vos h3 pour diminuer leur taille sur mobile et l’augmenter à partir des écrans moyens.
Vous pouvez voir toutes les classes utilitaires liées à la taille de la typographie dans la documentation Bootstrap.
Ajoutez de la logique liée au sens de lecture
Depuis Bootstrap 5, le sens de lecture d’une page a pris une importance capitale dans la logique de développement du framework. Même s’il est vrai qu’une grande majorité des sites que nous consultons en France se lisent de gauche à droite, ce n’est pas nécessairement le cas partout !
Dans un souci d’accessibilité, les développeurs de Bootstrap 5 ont décidé de supprimer les termes left et right au profit de start et end.
En plus concret, si vous souhaitez aligner vos textes à gauche, vous pouvez utiliser la classe utilitaire .text-start, et pour un alignement à droite vous devez utiliser text-end. Pour la propriété CSS text-align, on retrouve donc 3 valeurs :
Valeur | C’est-à-dire... | Classe utilitaire |
center | texte centré | text-{breakpoint}-center |
start | texte aligné à gauche (pour un site avec le sens de lecture de gauche à droite) | text-{breakpoint}-start |
end | texte aligné à droite (pour un site avec le sens de lecture de gauche à droite) | text-{breakpoint}-end |
Vous pouvez voir toutes les classes utilitaires liées à la propriété text-align dans la documentation Bootstrap.
Découvrez comment fonctionnent les boutons Bootstrap 5
Les boutons (buttons, en anglais) constituent l'une des formes les plus courantes d'interaction sur les sites web. Ils indiquent à vos utilisateurs qu'une action est possible sur la page, comme l’envoi d’un formulaire, l’ajout au panier d’un objet, etc.
Pour afficher un bouton dans Bootstrap, utilisez un élément <button> ou <a> avec une classe .btn, ainsi qu'une deuxième classe pour définir la couleur d'arrière-plan.
Les classes relatives aux couleurs disponibles sont affichées ci-dessous :
Vous pouvez afficher un bouton utilisant l’élément <button> (pour vos formulaires) ou <a> (pour vos liens) avec la couleur d'arrière-plan primaire (bleu par défaut), avec le code HTML suivant :
<button type="button" class="btn btn-primary">Bouton</button>
<a class="btn btn-primary" href="#" role="button">Lien</a>À présent, nous allons mettre en forme notre premier bouton “Mon expertise web”. Ajoutez-lui les classes .btn et .btn-primary, cela aura pour effet d’appliquer le style des boutons Bootstrap 5.
Vous pouvez consulter la documentation Bootstrap pour en savoir plus sur les boutons.
Ajoutez des icônes
Boostrap 5 a son propre système de font d'icônes que l’on peut intégrer dans notre interface utilisateur pour, par exemple, lier nos réseaux sociaux au site web.
Pour utiliser les icônes de Bootstrap, il suffit d’ajouter une balise <link> dans le <head> de notre page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">Ensuite, rendez-vous dans le catalogue d'icônes de Bootstrap via la documentation dans la rubrique “Extend” puis “Icons”, dans leur catalogue d'icônes Bootstrap 5.
Pour afficher une icône de LinkedIn, vous pouvez ajouter cette ligne de code dans la div qui contiendra vos icônes :
<a href=”mon lien linkedin” target=”_blank”>
<i class="bi bi-linkedin"></i>
</a>Allez plus loin avec la documentation Bootstrap 5
Il existe de nombreuses autres propriétés CSS qui ont été couvertes par le système de classes utilitaires de Bootstrap 5. Le meilleur moyen de les découvrir est de parcourir la documentation Bootstrap 5 dans les rubriques “Utilities” et “Helpers”.
On y trouve différentes classes pour les couleurs de typographie, les backgrounds, les bordures, les tailles de texte, etc.
À vous de jouer !
Votre mission pour ce chapitre :
Mettre en forme les titres en suivant l’exemple du site portfolio.
Mettre en page le bouton “Mon expertise web”.
Ajouter les icônes dans le footer.
Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !
En résumé
En plus d’ajouter de la couleur à votre site, vous pouvez utiliser les classes utilitaires pour :
mettre en page l'épaisseur et le style de votre texte ;
rendre votre typographie responsive ;
choisir l’alignement de votre texte.
Il existe plusieurs styles pour les boutons Bootstrap que vous pouvez choisir pour votre site.
Bootstrap propose plusieurs icônes que vous pouvez ajouter à votre site.
Maintenant que vous avez stylisé un peu votre portfolio, vous allez vous attaquer à l’ajout de différents composants inclus dans la bibliothèque de composants de Bootstrap 5. Rendez-vous au prochain chapitre !
