Créez des sites web responsives avec Bootstrap 5

Bravo ! Votre portfolio commence à prendre forme, les titres sont mis en page, nous avons ajouté des composants de Bootstrap 5, mis en place notre navigation. Il est maintenant temps de voir comment rendre notre site plus interactif.

Affichez des informations complémentaires au clic sur un bouton grâce au Offcanvas

En fin de partie 3, nous avons vu comment afficher nos projets grâce au système de cartes de Bootstrap 5. Voyons maintenant comment le  offcanvas  nous permet de donner plus d'informations sur nos projets, sans venir alourdir notre page.

Comme d’habitude, rendez-vous sur la documentation de Bootstrap 5 pour voir comment fonctionne notre composant. 

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
    </div>
</div>

En observant la structure du composant, on remarque qu’il fonctionne un peu de la même manière que les  card  : 

• Une div  globale avec une classe qui porte le nom du composant. 

• Cette div porte aussi une classe  offcanvas-start  ; on se souvient que  -start  réfère à l’alignement dans le sens de lecture du site, ici de gauche à droite. 

• On observe également un  id  qui nous permettra de cibler notre élément.

• Ensuite, nous avons deux  divsœurs, l’une portant la classe  .offcanvas-header  et l’autre  .offcanvas-body.

Pour notre cas précis, nous souhaitons mettre en place un  offcanvas  qui sorte du bas de page. En parcourant un peu la documentation, on voit qu’il existe bien une variante qui part d’en bas.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body small">
        ...
    </div>
</div>

Dans l’exemple ci-dessus, nous retrouvons la structure que nous venons de détailler plus haut, mais nous voyons aussi l’architecture du bouton déclencheur. Et normalement, il y a des attributs qui doivent vous poser problème : les attributs  data.

Revenons rapidement sur l’attribut  data

L’attribut data permet essentiellement l’échange de données entre l’HTML et le DOM qui, lui, est manipulable en JS.

Concrètement, l’attribut data peut être personnalisé comme on le souhaite suivant cette structure : data-{mon-text-perso} . Bootstrap 5 a choisi comme sémantique  data-bs-{utilité},  bs  pour Bootstrap, et l’utilité représente l’usage auquel il est lié en JS.

Dans notre exemple,  data-bs-toggle  permet au JS de Bootstrap d’identifier le bouton comme étant le déclencheur du composant  offcanvas  identifié par son  id  que l’on renseigne dans le deuxième attribut data  data-bs-target.

L’intérêt de ce système, c’est qu’il nous permet d’utiliser des composants qui fonctionnent grâce au JavaScript, en restant uniquement dans le HTML.

À vous de jouer !

Maintenant que vous avez bien compris le fonctionnement du composant, il est temps de l’ajouter dans votre portfolio.

• Ajoutez un  offcanvas  dans chacune de vos cartes de projet.

• Le  offcanvas  devra sortir du bas de la page.

• Utilisez les classes utilitaires pour faire en sorte que vos  offcanvas  prennent toute la hauteur de la page.

Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !

On ajoute notre  offcanvas  dans le body de nos cartes, en veillant bien à modifier les  id  et les titres pour correspondre à chaque projet.

Les plus observateurs d’entre vous remarqueront qu’une classe a été ajoutée à notre  div.offcanvas.offcanvas-bottom.h-100. C’est une classe utilitaire permettant de mettre notre  offcanvas  en  height: 100%  afin qu’il prenne toute la hauteur de l’écran une fois ouvert.

Ajoutez un carrousel d’images pour illustrer vos projets

Ce que l’on appelle communément un "carrousel", c’est un slider d’images ou de vidéos qui défilent sur un intervalle donné. On le retrouve souvent dans les headers de pages pour mettre en avant des images accompagnées d’un message.

Celui de Bootstrap est le format le plus populaire, un encart fixe affichant les images les unes après les autres :

Comme à chaque fois, commençons par nous rendre sur la documentation Bootstrap 5 pour voir comment fonctionne le carrousel : on clique sur “components” puis “carousel”.

La première chose que l’on voit, c’est que le carrousel fonctionne en CSS et JavaScript, mais Bootstrap 5 a fait en sorte qu’il soit utilisable sans écrire une seule ligne de JS !

La deuxième chose à savoir, c’est que le carrousel ne normalise pas la taille des images. Si on veut avoir un carrousel tout beau tout propre, il faudra soit ajouter un peu de CSS, soit travailler nos images en amont pour qu’elles aient la même taille (je préconise cette deuxième option qui a plus de sens d’un point de vue optimisation de votre site).

Étudions un peu l’exemple de base du carrousel de Bootstrap 5 :

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
</div>

On observe plusieurs choses :

• Il y a une architecture d’éléments et de classes à respecter pour que ça fonctionne.

• Ils utilisent des classes utilitaires sur leurs images, c’est donc compatible ensemble (comme les barres de progression).

• Il y a un  id  sur l’élément parent principal.

• On retrouve également un attribut  data  pour faire le lien avec le JS. 

Concernant l’architecture, ce n’est pas bien sorcier :

• unediv  parent qui prend les classes  .carousel .slide  ;

• une div  enfant avec la classe  .carousel-inner  (littéralement "intérieur du carrousel", qui sert à délimiter les slides) ;

• enfin, autant de  div  enfants avec la classe  carousel-item  que nous souhaitons de slides dans notre carousel.

À vous de jouer !

Votre mission pour ce chapitre est de créer les carrousels pour chacun de vos projets :

• Les carrousels devront faire 100 % de la hauteur du  body  de votre  offcanvas.

• Les slides devront tourner automatiquement toutes les 3 secondes.

• Les slides devront avoir un titre et une petite description (en faux texte).

• Pour générer des images différentes à l’aide de picsum.photo, vous utiliserez le schéma d’URL suivant : https://picsum.photos/1920/1080?random=1 (remplacer le dernier 1 pour avoir une autre image).

• Le carrousel devra avoir des flèches à gauche et à droite pour faire passer les slides.

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é

• Les attributs  data-*  servent à échanger des données entre le HTML et le JS en passant par le DOM (ensemble des éléments HTML qui structurent une page) qui est lisible en JS.

• Il est possible d’ajouter du contenu non visible par défaut sur votre page notamment (mais pas seulement) avec le composant  offcanvas.

• Bootstrap offre la possibilité d'ajouter des carrousels à vos pages. 

• Il est primordial d’utiliser des  id  uniques pour vos composants qui fonctionnent en JS, afin d’éviter les erreurs de lecture du code par le navigateur.

Maintenant que vous avez appris à ajouter de l'interactivité, vous êtes prêt à apprendre à utiliser Bootstrap 5 pour permettre à vos visiteurs de vous contacter à l'aide de formulaires. Rendez-vous au prochain chapitre !