Quiz 06 — Navbar & navigation
⏱️ TL;DR — 50 questions sur la navbar, nav/tabs, pagination et breadcrumb (Partie 5). Réponds de tête, puis déplie.
1. Que contrôle navbar-expand-lg ?
Réponse
Le breakpoint à partir duquel le menu se déplie (burger en dessous).
2. Quel élément déclenche le menu burger ?
Réponse
navbar-toggler (data-bs-toggle="collapse").
3. Comment rendre une navbar sombre en 5.3 ?
Réponse
data-bs-theme="dark" (+ un bg-*).
4. Pousser un élément à droite dans la navbar ?
Réponse
ms-auto (ou me-auto à gauche).
5. La navbar responsive nécessite-t-elle du JS ?
Réponse
Oui (collapse du burger).
6. Classe de la marque ?
Réponse
navbar-brand.
7. Conteneur des liens ?
Réponse
navbar-nav.
8. Lien de navbar ?
Réponse
nav-link (dans un nav-item).
9. Comment relier le toggler au collapse ?
Réponse
data-bs-target="#id" = id du collapse.
10. Que se passe-t-il si target et id diffèrent ?
Réponse
Le burger ne fait rien.
11. Marquer le lien courant de la navbar ?
Réponse
active + aria-current="page".
12. Navbar collante en haut ?
Réponse
sticky-top.
13. Navbar fixe en haut ?
Réponse
fixed-top.
14. Ancienne façon de colorer (v4) une navbar sombre ?
Réponse
navbar-dark (obsolète en 5.3).
15. En React, quel composant pour la navbar ?
Réponse
<Navbar> de react-bootstrap.
16. Classe de base d’une nav ?
Réponse
.nav.
17. Onglets ?
Réponse
nav-tabs.
18. Pilules ?
Réponse
nav-pills.
19. Répartir les liens sur toute la largeur ?
Réponse
nav-fill ou nav-justified.
20. Nav verticale ?
Réponse
flex-column.
21. Attribut pour faire basculer les panneaux d’onglets ?
Réponse
data-bs-toggle="tab".
22. Où va le contenu des onglets ?
Réponse
Dans tab-content / tab-pane.
23. Quel panneau porte show active au départ ?
Réponse
Un seul (l’onglet initial).
24. Que relie data-bs-target d’un bouton d’onglet ?
Réponse
L’id de son tab-pane.
25. Classe de base d’une pagination ?
Réponse
.pagination.
26. Item de page ?
Réponse
.page-item + .page-link.
27. Page courante ?
Réponse
active sur le page-item.
28. Désactiver un item de pagination ?
Réponse
disabled.
29. Tailles de pagination ?
Réponse
pagination-lg, pagination-sm.
30. Centrer une pagination ?
Réponse
justify-content-center (utilitaire flex).
31. Classe de base d’un breadcrumb ?
Réponse
.breadcrumb.
32. Sur quelle balise le breadcrumb ?
Réponse
Un <ol> (dans un <nav aria-label="breadcrumb">).
33. Marquer la page courante du breadcrumb ?
Réponse
active + aria-current="page".
34. Changer le séparateur d’un breadcrumb ?
Réponse
Variable CSS --bs-breadcrumb-divider.
35. Un logo dans la marque, comment ?
Réponse
<img> dans navbar-brand avec d-inline-block align-text-top.
36. Onglets en React : approche recommandée ?
Réponse
État + affichage conditionnel, ou <Tabs>/<Tab>.
37. Le collapse de la navbar : quel composant JS ?
Réponse
Collapse.
38. aria-expanded sert à quoi sur le toggler ?
Réponse
Indiquer l’état ouvert/fermé aux lecteurs d’écran.
39. Menu déroulant dans une navbar : classe sur l’item ?
Réponse
nav-item dropdown.
40. Formulaire de recherche dans une navbar : classe utile ?
Réponse
d-flex (sur le <form>).
41. Combiner navbar + offcanvas pour le mobile : possible ?
Réponse
Oui (menu desktop + panneau glissant mobile).
42. nav-justified fait quoi ?
Réponse
Répartit les liens en largeurs égales.
43. Un item de nav désactivé ?
Réponse
nav-link disabled.
44. Où se met aria-current="page" ?
Réponse
Sur le lien/élément courant.
45. La navbar par défaut a quel fond neutre ?
Réponse
bg-body-tertiary (recommandé en 5.3).
46. Peut-on avoir plusieurs cibles de collapse ?
Réponse
Oui, via un sélecteur (data-bs-target=".multi").
47. Différence tabs vs pills, visuellement ?
Réponse
Tabs = onglets à bordure ; pills = boutons arrondis.
48. Le breadcrumb améliore quoi ?
Réponse
La navigation contextuelle (où suis-je ?).
49. Onglets JS : combien de panneaux visibles au départ ?
Réponse
Un seul.
50. Rôle du role="tablist" ?
Réponse
Indiquer aux lecteurs d’écran un système d’onglets.
Quiz suivant : Quiz 07 — Dropdowns, modals, offcanvas.