Le menu de la boutique de vêtements
Sur ordinateur, tous les rayons sont visibles dans le menu. Sur téléphone, ils se rangent derrière un bouton à trois traits, le « hamburger ». C'est la navbar de Bootstrap, avec la classe navbar-expand-lg.
M04 · D. Maîtriser Bootstrap
Les composants Bootstrap : navbar, cartes, alertes et plus
Assembler une barre de navigation responsive avec menu déroulant, et utiliser les composants courants (cartes, alertes, badges, barres de progression, pagination) en copiant puis adaptant la documentation.
1Situer
Une coopérative de dattes d'Erfoud veut un catalogue en ligne : un menu qui se replie en bouton sur téléphone, des cartes produits avec photo et prix, un badge « Nouveau », une alerte pour la livraison gratuite et une pagination pour parcourir les produits. Tous ces éléments existent déjà dans Bootstrap.
2Comprendre
Sur ordinateur, avec navbar-expand-lg, tous les liens sont visibles dans la barre.
1 / 4
Un composant est un morceau d’interface tout fait. La documentation (getbootstrap.com, rubrique Components) donne le HTML de chacun : on le copie, puis on l’adapte.
La barre de navigation
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto"> ...li.nav-item > a.nav-link... </ul>
</div>
</div>
</nav>
navbar-expand-lg: menu déplié à partir de 992 px, replié derrière le bouton en dessous ;data-bs-target="#menu"doit correspondre à l’iddu bloccollapse;ms-autopousse les liens à droite.
Les composants courants
| Composant | Classe principale | Usage |
|---|---|---|
| menu déroulant | dropdown, dropdown-menu | sous-menu |
| carte | card, card-body, card-img-top | produit, article, profil |
| alerte | alert alert-success | message important |
| badge | badge text-bg-danger | étiquette, compteur |
| barre de progression | progress, progress-bar | avancement |
| pagination | pagination, page-item, page-link | pages de résultats |
| fenêtre modale | modal | confirmation, formulaire |
JavaScript ou pas ?
Les composants interactifs (bouton de la navbar, menus déroulants, modales, carrousels) ont besoin de bootstrap.bundle.min.js. Les autres (cartes, badges, alertes simples) ne sont que du CSS.
Personnaliser
Pour changer les couleurs de Bootstrap, on écrit ses règles dans style.css, chargé après Bootstrap, ou on surcharge ses variables : :root { --bs-primary: #c0392b; } (pour certains composants), ou avec Sass dans les projets plus avancés.
La recette copiée puis adaptée
On ne retient pas par cœur le HTML de chaque composant : on copie l'exemple de getbootstrap.com, puis on change les textes, les liens et les couleurs.
<span class="badge text-bg-success">Nouveau</span> <div class="alert alert-info">Livraison gratuite dès 300 DH</div>
Publicité
3Manipuler
Le catalogue a déjà une navbar. Passez en mode 📱 et cliquez sur le bouton ☰ : le menu s'ouvre grâce au JavaScript de Bootstrap. Complétez ensuite la page avec les composants demandés.
- Ajoutez un lien « Contact » dans la navbar (li.nav-item avec a.nav-link)
- Ajoutez une alerte alert-info « Livraison gratuite dès 300 DH » au-dessus des cartes
- Ajoutez une deuxième carte produit (Boufeggous, 90 DH)
- Ajoutez un badge « Nouveau » dans un titre de carte
- Ajoutez une pagination (ul.pagination avec au moins 3 page-item)
4Pratiquer
Exercice 1 · Le menu déroulant
Ajoutez à la navbar un menu déroulant « Produits » avec trois choix : Mejhoul, Boufeggous, Jihel.
Voir le corrigé
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Produits</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Mejhoul</a></li> <li><a class="dropdown-item" href="#">Boufeggous</a></li> <li><a class="dropdown-item" href="#">Jihel</a></li> </ul> </li>
Exercice 2 · La barre de progression
Affichez l'avancement d'une commande : préparation terminée à 75 %, en vert.
Voir le corrigé
<div class="progress" role="progressbar" aria-label="Commande" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-success" style="width: 75%">75 %</div> </div>
Exercice 3 · Pourquoi le menu ne s'ouvre pas ?
Un stagiaire a copié une navbar, mais sur téléphone le bouton ☰ ne fait rien. Donnez deux causes possibles.
Voir le corrigé
1. Le fichier JavaScript bootstrap.bundle.min.js n'est pas chargé (seul le CSS a été ajouté). 2. data-bs-target="#menu" ne correspond pas à l'id du div.collapse (par exemple id="navbarNav" resté de l'exemple copié).
Publicité