Quiz 07 — Dropdowns, modals, offcanvas
⏱️ TL;DR — 50 questions sur les dropdowns, fenêtres modales et panneaux offcanvas (Partie 5). Réponds de tête, puis déplie.
1. Attribut qui ouvre un dropdown ?
Réponse
data-bs-toggle="dropdown".
2. Quelle lib positionne le menu ?
Réponse
Popper (via le bundle).
3. Aligner un menu à droite ?
Réponse
dropdown-menu-end.
4. Menu qui s’ouvre vers le haut ?
Réponse
Enrober dans .dropup.
5. Ligne de séparation dans un menu ?
Réponse
dropdown-divider (sur un <hr>).
6. Item de menu ?
Réponse
dropdown-item.
7. En-tête dans un menu ?
Réponse
dropdown-header.
8. Item actif / désactivé ?
Réponse
active / disabled.
9. Directions possibles d’un dropdown ?
Réponse
dropup, dropend, dropstart (+ défaut vers le bas).
10. Alignement responsive du menu ?
Réponse
dropdown-menu-lg-end.
11. Un split button, structure ?
Réponse
btn-group + bouton + dropdown-toggle dropdown-toggle-split.
12. Menu ne se positionne pas : cause ?
Réponse
bootstrap.js sans Popper, ou parent overflow:hidden.
13. En React, composant recommandé ?
Réponse
<Dropdown> de react-bootstrap (ou headless).
14. Attribut qui ouvre une modale ?
Réponse
data-bs-toggle="modal".
15. Élément qui reçoit le contenu de la modale ?
Réponse
modal-content (dans modal-dialog).
16. En-tête / corps / pied de modale ?
Réponse
modal-header / modal-body / modal-footer.
17. Centrer une modale verticalement ?
Réponse
modal-dialog-centered.
18. Modale à corps défilant ?
Réponse
modal-dialog-scrollable.
19. Tailles de modale ?
Réponse
modal-sm, modal-lg, modal-xl, modal-fullscreen.
20. Fermer une modale (attribut) ?
Réponse
data-bs-dismiss="modal".
21. Ouvrir une modale en JS ?
Réponse
new bootstrap.Modal(el).show().
22. Événement après fermeture d’une modale ?
Réponse
hidden.bs.modal.
23. Que fait Bootstrap pour l’accessibilité d’une modale ?
Réponse
Piège le focus (focus trap) + backdrop.
24. Empêcher la fermeture au clic sur le fond ?
Réponse
data-bs-backdrop="static".
25. Empêcher la fermeture par Échap ?
Réponse
data-bs-keyboard="false".
26. Classe de base d’un offcanvas ?
Réponse
.offcanvas.
27. Depuis quels bords glisse un offcanvas ?
Réponse
start, end, top, bottom.
28. Attribut qui ouvre un offcanvas ?
Réponse
data-bs-toggle="offcanvas".
29. Un panier qui glisse de droite : classe ?
Réponse
offcanvas-end.
30. Autoriser le scroll de la page pendant l’offcanvas ?
Réponse
data-bs-scroll="true".
31. En React, composants recommandés ?
Réponse
<Modal> et <Offcanvas> de react-bootstrap.
32. Comment ouvre-t-on une modale react-bootstrap ?
Réponse
Via la prop show.
33. Récupérer une instance modale existante ?
Réponse
bootstrap.Modal.getInstance(el).
34. Créer ou récupérer une instance ?
Réponse
getOrCreateInstance(el).
35. Aria requis sur le btn-close ?
Réponse
aria-label="Fermer".
36. Imbriquer une modale dans une autre : conseillé ?
Réponse
Non.
37. Où placer le focus après ouverture ?
Réponse
Dans shown.bs.modal.
38. Quel bouton a ouvert la modale (JS) ?
Réponse
event.relatedTarget.
39. Un dropdown dans une navbar, classe sur l’item ?
Réponse
nav-item dropdown.
40. Un dropdown déclenché au focus (ferme au clic ailleurs) ?
Réponse
data-bs-trigger="focus" (popover), ou géré par la lib.
41. Peut-on mettre un formulaire dans un dropdown ?
Réponse
Oui (contenu libre, dropdown-item-text).
42. Un menu déroulant sur <a> ou <button> ?
Réponse
Les deux (avec dropdown-toggle).
43. Le dropdown a-t-il besoin de JS ?
Réponse
Oui (Data API + Popper).
44. La modale a-t-elle besoin de Popper ?
Réponse
Non.
45. Motif navbar → offcanvas mobile : quelle combinaison ?
Réponse
navbar-expand-lg + un offcanvas.
46. .dispose() sur une modale sert à ?
Réponse
Détruire l’instance / nettoyer (utile en SPA).
47. Menu déroulant : texte simple non cliquable ?
Réponse
dropdown-item-text.
48. Deux instances sur le même élément : risque ?
Réponse
Comportements en double → utiliser getOrCreateInstance.
49. Une modale plein écran seulement sous md ?
Réponse
modal-fullscreen-md-down.
50. Offcanvas : quel événement après ouverture ?
Réponse
shown.bs.offcanvas.
Quiz suivant : Quiz 08 — Toasts, tooltips, carousel.