Voyage au cœur des classes Bootstrap

🤓 À la fin de cette quête, tu seras capable de :

• ✅ Installer Bootstrap
• ✅ Intégrer des composants
• ✅ Manipuler le système de grille de Bootstrap

Présentation

Comme tous les frameworks CSS, Bootstrap est conçu pour offrir un système de classes CSS basé sur des templates HTML et disposant d'une API JavaScript pour gérer les interactions de l'utilisateur.
Il est ainsi possible de mettre en place facilement et de manière cohérente le rendu des boutons, formulaires, barres de navigation, fenêtres modales et de toute une large collection de composants récurrents dans nos interfaces web.
Côté mise en page, il comporte un système de grille simple et efficace pour la gestion des différents points de rupture d'une interface responsive.

Installer Bootstrap

Il y a plusieurs façons d'installer les fichiers d'un framework tel que Bootstrap.
Dans cette quête nous allons utiliser la méthode CDN en passant par le service jsDelivr que tu trouveras sur la page d'accueil de la documentation. Un CDN (Content Delivery Network) permet d'avoir accès aux ressources directement en ligne sans avoir à les télécharger en local.
Récupère le lien pointant vers la feuille de style et celui du javascript puis colle-les dans le HTML et le tour est joué.
Attention : souviens-toi, le javascript doit être mis en bas de page, juste avant la fermeture du <\body>, tandis que le CSS doit se situer dans la partie <head>. Si tu veux ajouter ton propre fichier CSS, place-le après l'appel de Bootstrap, cela te permettra de surcharger les classes du framework.

Comme ceci par exemple :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Discovering Bootstrap</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link rel="stylesheet" href="/assets/css/style.css">
    </head>

    <body>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    </body>
</html>

Explorer

Alors, par où commencer ? Il y a tellement de choses à voir, découvrir, apprendre... Pas de panique, comme tout le reste cela vient avec la pratique.

La section Docs du site officiel de Bootstrap te donne accès via la colonne de gauche à toutes les catégories importantes.

Pour démarrer, voici une présentation en vidéo concernant le système de grille Bootstrap avec des exemples illustrés. Nous rentrerons dans le détail dès la première section de cette quête.

Grille Bootstrap

Démarrons donc par la section mise en page à la rubrique Layout. Depuis les toutes premières versions, Bootstrap s'est distingué par un système de templating en colonne permettant des mises en page simples et variées. Pour cela, Boostrap s'appuie principalement sur les flexbox.

Concrètement, voici comment écrire ces fameuses 12 colonnes :

<div class="row">
    <div class="col-1">Colonne 1</div>
    <div class="col-1">Colonne 2</div>
    <div class="col-1">Colonne 3</div>
    <div class="col-1">Colonne 4</div>
    <div class="col-1">Colonne 5</div>
    <div class="col-1">Colonne 6</div>
    <div class="col-1">Colonne 7</div>
    <div class="col-1">Colonne 8</div>
    <div class="col-1">Colonne 9</div>
    <div class="col-1">Colonne 10</div>
    <div class="col-1">Colonne 11</div>
    <div class="col-1">Colonne 12</div>
</div>

Soit la représentation graphique ci-dessous :

La <div> parente sur laquelle est appliquée la classe .row dispose de la propriété flex. Les <div> enfants qui possèdent les classes .col-* disposent de la propriété width leur appliquant des largeurs pré-définies. Par exemple, la classe .col-1 est réglée sur width: 8.33333333%, c'est à dire 1 / 12e de la largeur totale de la boîte parente. Il suffit ainsi de faire varier les valeurs de la classe col de 1 à 12. Par exemple, col-2 signifie que l'élément prendra 2 colonnes de son parent (qui possède la classe row, soit 1/6ème de sa largeur), col-3` qu'il s'étale sur 3 colonnes, soit 1/4 de la largeur, ..., et que col-12 prend toute la largeur du parent. Dans l'exemple ci-dessous, tu trouveras un découpage en 6 colonnes de tailles identiques.

Sur chaque ligne .row, la somme totale des valeurs données aux noms des classes des <div> enfants doit être égale à 12 et le tour est joué !

Sur ce principe, voici un autre exemple pour créer un système à 2 colonnes dans un équilibre 2 tiers / 1 tiers :

Ou alors 1 quart / 1 demi / 1 quart comme suit :

Bref, tu imagines le nombre de combinaisons possibles !
Entraîne-toi à créer différents systèmes de grilles à partir du code ci-dessous. Le style qui est donné te permettra de voir plus facilement les blocs à l'écran.

<style>
    [class*="col-"]:before{
        content:attr(class);
        display: block;
        padding: 1rem;
        background-color: var(--bs-primary);
        color: var(--bs-light);
    }
</style>
<div class="row">
    <div class="col-3"></div>
    <div class="col-6"></div>
    <div class="col-3"></div>
</div>

Responsive

Un autre point fort de Bootstrap, que l'on retrouve chez la plupart des autres frameworks, est la gestion des points de rupture avec les media queries. La section Breakpoints de la documentation indique les noms courts associés aux points de rupture suivants :

En combinant ces noms courts avec ce que tu as appris précédemment, tu peux facilement construire un système de grille qui se modifie selon les tailles d'écran. La classe col-md-6 produira une largeur de boîte de 50% mais seulement à partir de 768px. En dessous, la boîte aura une taille normale, 100% a priori. La classe col-lg-3 produira une largeur de boîte de 25% mais uniquement à partir de 992px, etc. En ajoutant ainsi plusieurs classes avec différents noms courts sur la même <div>, tu obtiens une boîte dont la largeur change selon les tailles d'écran.
Prenons un exemple et construisons un système de colonne différent pour tablette et desktop.

Ici les quatre <div> feront 50% de large pour une taille d'écran supérieure à 768px.

Et ci-dessous, les quatre <div> feront 25% de large pour une taille d'écran supérieure à 1 200px.

Côté HTML, voici ce que cela donne :

<div class="row">
    <div class="col-md-6 col-xl-3"></div>
    <div class="col-md-6 col-xl-3"></div>
    <div class="col-md-6 col-xl-3"></div>
    <div class="col-md-6 col-xl-3"></div>
</div>

En dessous de 768px, les <div> reprennent leur largeur initiale, c'est à dire 100%. Voici l'extrait du CSS Bootstrap que tu peux trouver dans l'inspecteur de ton navigateur et qui indique ce réglage.

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

D'ailleurs, utiliser l'inspecteur est une très bonne pratique pour apprendre un framework CSS 😉.

Avant d'aller plus loin, n'hésite pas à faire un tour du côté de la section Containers, probablement l'un des éléments les plus importants du système de mise en page Bootstrap et qui dispose, lui aussi, des noms courts de points de rupture. De manière générale, un container est un élément parent indispensable avant d'intégrer une grille Bootstrap telle que nous venons de le voir. Retiens bien ce schéma.

Les composants

Pour réaliser le challenge, il te faudra explorer la vaste partie Components qui regroupe l'ensemble des composants de Bootstrap. Certains sont simples (bloc d'alerte, badge, card), d'autres sont plus complexes et nécessites du JS (modale, navbar responsive, carousel...). Quelques recommandations avant de te lancer tête baissée dans les copier/coller des snippets HTML.

Accessibilité

Bootstrap intègre dans ses exemples les attributs enrichis WAI-ARIA.
Il s'agit de compléments HTML nécessaires aux lecteurs d'écran leur permettant de distinguer avec précision la fonction de certains nœuds HTML. Il sont à placer avec précaution.
Par exemple, l'attribut aria-current="page" placé sur une liste de liens indique le lien correspondant à la page actuellement consultée. Cela n'a donc pas de sens de placer cet attribut sur l'ensemble des éléments d'une même liste et il doit être ajouté dynamiquement, comme une classe .active par exemple pour styliser un lien différement. Tu trouveras également, et régulièrement, l'attribut aria-label avec pour valeur quelque chose come aria-label="Basic example". Cet attribut est utilisé lorsque le nom d'un élément ne peut être lu par un lecteur d'écran. Exemple : un bouton contenant seulement une icône <svg>, un champ de formulaire <input> non associé à une étiquette <label>, etc. Il est donc important de saisir correctement la valeur de cet attribut. Pense donc à bien remplacer les Basic example ou autres textes par défaut avec des contenus appropriés.
Les attributs enrichis WAI-ARIA sont complexes dans leur utilisation, c'est l'occasion de les découvrir si tu en n'as pas déjà eu l'occasion 😎.

Styles en ligne

Un autre point de vigilence concerne les styles en ligne appliqués sur certains exemples de code. La section Card présente différentes dispositions. Tu remarqueras parfois la propriété width: 18rem; appliquée sur la <div> principale.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    ...
</div>

Il faut bien entendu supprimer le style en ligne lorsque tu réalises ton intégration HTML car il n'est utilisé ici que par simplification dans l'exemple de la documentation. Utiliser l'attribut style en inline n'est pas une bonne pratique.

Quizz

false|||false|||false
# La classe .container permet de créer un conteneur centré alors que la classe .container-fluid créera un conteneur sur toute la largeur de la fenêtre
[x] vrai
[] faux
# La classe .col produit la même largeur de cellule que la classe .col-1
[] vrai, elles font toutes les deux 1/12e de la largeur disponible
[x] faux, la classe __.col__ n'a pas de largeur définie mais crée une boîte flexible
# La classe .col-lg-4 produira une largeur de cellule de 4/12e soit 1/3 de la largeur disponible mais seulement au-dessus du point de rupture *large* (992px par défaut). En-dessous de ce point de rupture la cellule occupera 100% de la largeur si aucune autre classe ne vient fournir d'autres comportements
[x] vrai 
[] faux
# La classe .bg-warning permet
[] d'écrire des informations sensibles qui ne seront pas lues par les navigateurs
[x] d'appliquer via la propriété CSS `background-color` une couleur définie dans le thème Bootstrap par la clé *warning* et qui est orange par défaut.
# Pour afficher une div uniquement à partir du point de rupture *large*, quelles classes peuvent être utilisées conjointement ?
[] __class="display-sm-none display-block"__
[x] __class="d-none d-lg-block"__
[] __class="invisible-xs visible-lg"__

Côté CSS

Nous aborderons la surcharge CSS et l'utilisation des variables CSS et SCSS dans une prochaine quête. Tu n'as donc pas besoin d'écrire de CSS pour ce challenge. Concentre-toi uniquement sur les classes mises à disposition par Bootstrap.

💪 Challenge

Il est temps de passer à l'action !

Reproduis la mise en page dont les versions desktop, tablet et mobile te sont données ci-dessous. Tu vas devoir fouiller un peu la documentation pour utiliser les composants les mieux adaptés.

version desktop

version tablette

version mobile

Consignes

Réalise ton intégration dans ton IDE ce sera plus facile. Une fois que tu es satisfait, publie ta solution sur https://codesandbox.io, https://pages.github.com ou la plateforme de ton choix et colle le lien pour validation.

Critères de validation

• Une barre de navigation présente trois menus dont un avec une liste Dropdown.
• La barre de navigation est responsive.
• Dans la partie principale, 4 cards sont correctement alignées et disposées en 4 colonnes pour la version desktop, 2 colonnes pour la version tablette et 1 colonne version mobile. Elles contiennent toutes de haut en bas :
  • 1 image
  • 1 titre
  • 1 extrait de texte (affiché uniquement en version desktop)
  • 1 lien « lire la suite »
• Un pied de page est présent et possède la même couleur de fond que la barre de navigation.

Bonus mais non invalidant

• La couleur principale est homogène entre la barre de navigation, les liens des cards et le fond du pied de page.

💡 TIPS sers-toi de la clé primary tu gagneras du temps 😉.

• En version mobile et tablette, la barre de navigation s'ouvre dans un menu latéral glissant.
• Les cards ont toutes la même hauteur, peu importe la longueur de leurs contenus.
• Les cards sont entièrement cliquables.
• Une large section sur fond uni est présent avant le pied de page.
• Le footer est positionné en pied de fenêtre même si le contenu de la page ne rempli pas toute la hauteur, mais il reste fluide (sticky footer 🤫).

==$==

Tu peux trouver une solution réalisée à cette adresse https://wildcodeschool.github.io/quest-challenge-discovering-bootstrap/.

N'hésite pas à explorer le code source HTML pour comprendre comment ont été réalisées les différentes parties.

Cependant, voici quelques explications.

Cards

• La classe .h-100 est ajoutée à .card pour lui assurer une hauteur de 100% de son parent.

• Les classes .d-flex et .flex-column sont ajoutées à .card-body pour créer un conteneur flexible verticalement, ce qui permet d'ajouter la classe .mt-auto au lien .btn positionnant celui-ci en pied de page systématiquement.

• La classe .stretched-link permet de rendre toute la carte cliquable (grâce au sélecteur CSS ::after).

• Les classes .d-none et .d-lg-block permettent d'afficher le paragraphe uniquement en version desktop (à partir du point de rupture 992px).

<div class="card h-100 shadow border-0">
    <img src="images/014-cards.jpg" class="card-img-top" alt="">
    <div class="card-body d-flex flex-column">
        <h5 class="card-title">Visit Components lake</h5>
        <p class="card-text d-none d-lg-block">
            Some quick example text to build on the card title and make up the bulk of the card's
            content. 
        </p>
        <a href='https://getbootstrap.com/docs/5.1/components/accordion/'
            class="btn btn-primary mt-auto stretched-link" target="_blank">
            Read more
        </a>
    </div>
</div>

Couleurs

La navbar ainsi que la dernière div du footer possèdent la classe .text-bg-primary. La classe .btn-primary a été ajoutée au lien « read more » des cards.

Bon voyage en classe Bootstrap 😎 !