Créez des sites web responsives avec Bootstrap 5

Ajoutez les mentions légales avec le composant modal

Dans le même genre que le composant  offcanvas, Bootstrap 5 met à notre disposition le composant  modal.

En termes de fonctionnement, les deux composants sont similaires, c’est dans la forme qu’ils se différencient.

Concrètement, c’est une fenêtre “popup” qui s’affiche par-dessus la page affichée et qui est souvent utilisée dans le cadre de validation d’une action (ex. : “Êtes-vous sûr de vouloir supprimer XX ?”) ou pour afficher un contenu annexe (notre cas).

En nous rendant sur la documentation Bootstrap 5 associée aux modals, nous allons pouvoir commencer par étudier la structure de ces dernières.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Encore une fois ici, Bootstrap garde la même logique dans la structure de ses composants. On retrouve dans un premier temps le bouton sur lequel est liée l’activation de la modal. Les attributs  data-*  servent à faire le lien avec le JS de Bootstrap.

Ensuite, nous avons la modal en elle-même qui est composée de :

• Une  div  globale avec les classes  .modal  et  .fade  (“.fade” concerne l’animation de l’apparition) et un id  unique.

• Une autre  div  avec la classe  .modal-dialog  qui englobe les trois  div  qui vont structurer le contenu de la modal.

• Trois  div  sœurs (au même niveau hiérarchique) avec les classes  .modal-header,  .modal-body  et  .modal-footer.

• Enfin du contenu divers dont un élément avec la classe titre  .modal-title.

Dans notre cas, nous avons besoin d’une modal classique, avec une  div.modal-header  et une  div.modal-body. Vous noterez que le plus important pour utiliser les modals de Bootstrap 5, ce sont la  div.modal  et la  div.modal-dialog, car la structure interne est interchangeable au besoin.

À vous de jouer !

Votre mission :

• Créer une modal qui se déclenchera au clic sur le lien “Mentions légales”.

• La modal sera composée d’un header comprenant un titre et une croix pour fermer la modal, et d’un body dans lequel vous mettrez du faux texte (lorem ipsum).

Contrairement à l’exemple, nous lions l’ouverture de notre modal sur notre lien “Mention légales” qui est une ancre (a). L’important est de respecter les attributs   data-*  qui sont les déclencheurs de la modal.

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

Rendez votre site plus accessible grâce aux “tooltips”

Un petit composant bien utile et que vous avez sûrement déjà vu sur des sites web, c’est le   tooltip.

C’est ce petit texte qui s’affiche au survol de la souris, souvent pour apporter plus d’information à un élément qui en a besoin – une icône, par exemple.

Ce composant fonctionne avec la bibliothèque JS tiers “Popper JS” dont on a déjà parlé au tout début de ce cours. Ne vous inquiétez pas, cette bibliothèque est déjà ajoutée à Bootstrap, car nous avons choisi d’utiliser la solution “bundle”.

Le  tooltip  nécessite une initialisation en JS que l’on doit coder nous-même. Pas de panique, tout est expliqué dans la documentation Bootstrap (comme d’habitude), et voici le code d’initialisation :

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})

L’idée générale du script, c’est de récupérer dans la page HTML (le DOM) tous les éléments qui ont un attribut  [data-bs-toggle=”tooltip”]. Une fois ces éléments récupérés, le script va juste lier ces derniers avec le reste du JS fourni par Bootstrap 5.

Ce bout de code nous permet donc d’utiliser les tooltips dans toutes les pages où il est présent.

Voici à quoi va ressembler une icône avec un tooltip :

<a href="#" class="text-decoration-none text-dark" data-bs-toggle="tooltip"
    title="LinkedIn">
    <i class="fab fa-linkedin fa-2x"></i>
</a>

À vous de jouer !

À partir de là, vous êtes en mesure d’ajouter des tooltips sur les éléments non textuels de votre portfolio :

• Les liens avec des icônes des réseaux sociaux dans le footer.

• Les pourcentages des barres de progression.

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é

• Il est possible d’utiliser les   modal  de Bootstrap 5 pour ajouter à une page du contenu qui ne sera visible qu’au clic d’un bouton.

• Le contenu d’une modal peut être composé de n’importe quel élément HTML que l’on souhaite.

• Le tooltip est un moyen d'associer du texte à un élément non textuel.

• Le tooltip nécessite un code JS personnalisé pour fonctionner, car il dépend de la bibliothèque tierce Popper.js.

Vous voilà avec un site complet avec du contenu structuré et accessible pour vos utilisateurs ! Dans la prochaine partie, il est temps de créer vos propres fonctionnalités et thèmes. 😎 N’oubliez pas de valider vos acquis avec un quiz avant de me rejoindre dans la dernière partie !