Module 2Les composants
Chapitre 7 sur 9
Navigation et composants interactifs
Navbar responsive, modale, collapse, accordéon et autres composants JavaScript.
- ≈ 110 min
- 4 leçons
- 4 vidéos
- 2 exercices
Module 2Les composants
Chapitre 7 sur 9
Navbar responsive, modale, collapse, accordéon et autres composants JavaScript.
Objectifs
Avec ce chapitre, tu sauras…
Ces composants ont besoin du JavaScript de Bootstrap (bootstrap.bundle.min.js). Bonne nouvelle : tu n'écris presque jamais de JavaScript toi-même, les attributs data-bs-toggle et data-bs-target suffisent.
Leçon 1
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container">
<a class="navbar-brand fw-bold" href="index.html">Atlas Évasion</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu"
aria-controls="menu" aria-expanded="false" aria-label="Ouvrir le menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="destinations.html">Destinations</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>Tableau: Lire la navbar
| Élément | Rôle |
|---|---|
navbar-expand-lg | menu déplié à partir de lg, replié en hamburger en dessous |
navbar-brand | le logo ou le nom du site |
navbar-toggler | le bouton hamburger, visible seulement quand le menu est replié |
data-bs-target="#menu" | l'id du bloc à ouvrir |
collapse navbar-collapse | le bloc qui se replie |
navbar-nav + nav-item + nav-link | la liste des liens |
ms-auto | pousse les liens à droite |
data-bs-theme="dark" | textes clairs pour un fond sombre |
fixed-top / sticky-top | navbar fixe ou collante |
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Vidéo · À regarder
FRTutoriel BOOTSTRAP 5 - 21 - Le composant Navbar
Seb Code · YouTube
Leçon 2
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Leçon 3
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Leçon 4
| Composant | Classe principale | Usage |
|---|---|---|
| menu déroulant | dropdown, dropdown-menu, data-bs-toggle="dropdown" | sous-menu, menu de compte |
| onglets | nav nav-tabs + tab-content | contenu en onglets |
| carrousel | carousel slide | diaporama d'images |
| offcanvas | offcanvas offcanvas-start |
1navbar-expand-md signifie que le menu est déplié…
2Quel attribut ouvre une modale au clic ?
3data-bs-target contient…
4Pour qu'ouvrir une question de l'accordéon ferme les autres :
5Pour fermer une modale depuis un bouton :
6Les infobulles (tooltips)…
L'essentiel du chapitre
bootstrap.bundle.min.js et les attributs data-bs-toggle, data-bs-target, data-bs-dismiss.navbar navbar-expand-{point}, navbar-brand, navbar-toggler, collapse navbar-collapse avec un id, navbar-nav ms-auto.modal fade > modal-dialog > modal-content > header / body / footer, aria-labelledby.collapse + bouton data-bs-toggle="collapse" ; accordéon avec data-bs-parent.| panneau latéral (menu mobile, filtres) |
| toast | toast | notification temporaire |
| infobulle | data-bs-toggle="tooltip" | aide au survol (à activer en JS) |
Trois causes : le JavaScript de Bootstrap n'est pas chargé ; le data-bs-target="#menu" ne correspond pas à l'id="menu" du bloc ; ou tu as chargé bootstrap.min.js au lieu de bootstrap.bundle.min.js alors que le menu contient un menu déroulant.
Les navbars (anglais) : la structure complète et le comportement responsive.
Le composant Navbar en français, par Seb Code. Regarde la vidéo en entier et construis ta navbar en même temps.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reservation">
Réserver
</button>
<div class="modal fade" id="reservation" tabindex="-1" aria-labelledby="titre-reservation" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="titre-reservation">Réserver un séjour</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
<p>Choisis ta date de départ…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Confirmer</button>
</div>
</div>
</div>
</div>Bootstrap gère pour toi l'essentiel : le focus est placé dans la fenêtre, la touche Échap la ferme, et le reste de la page est inaccessible tant qu'elle est ouverte. À toi de relier le titre avec aria-labelledby. Options utiles : modal-lg, modal-dialog-scrollable, modal-fullscreen-sm-down.
Les modales (anglais) : structure, ouverture et fermeture.
<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#details"
aria-expanded="false" aria-controls="details">
Voir le programme
</button>
<div class="collapse mt-2" id="details">
<div class="card card-body">Semaine 1 : HTML · Semaine 2 : CSS · Semaine 3 : Bootstrap.</div>
</div><div class="accordion" id="faq">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#q1"
aria-expanded="true" aria-controls="q1">Faut-il savoir coder ?</button>
</h3>
<div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faq">
<div class="accordion-body">Non, la formation part de zéro.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q2"
aria-expanded="false" aria-controls="q2">Combien de temps dure-t-elle ?</button>
</h3>
<div id="q2" class="accordion-collapse collapse" data-bs-parent="#faq">
<div class="accordion-body">Douze semaines.</div>
</div>
</div>
</div>data-bs-parent="#faq" relie les panneaux : en ouvrir un referme les autres. Sans cet attribut, plusieurs réponses peuvent être ouvertes en même temps.
Le composant collapse (anglais), base de l'accordéon et du menu hamburger.
Crée une page avec un accordéon de quatre questions (une seule ouverte à la fois) et, sous l'accordéon, un bouton « Poser une question » qui ouvre une modale centrée contenant un petit formulaire (nom, e-mail, question).
Ajoute à ton CV une navbar sticky-top, claire, avec ton nom à gauche, les liens vers les sections à droite, un menu hamburger en dessous de md, et un bouton « Télécharger mon CV » en btn-primary à la fin du menu.
Personne ne retient le code d'un carrousel par cœur. La méthode professionnelle : ouvrir la page du composant sur getbootstrap.com, copier l'exemple le plus proche, puis l'adapter (textes, id, couleurs, accessibilité).