Quiz 16 — Le JavaScript de Bootstrap
⏱️ TL;DR — 50 questions sur la Data API, l’API programmatique, les événements, les plugins et le monde sans jQuery (Partie 10). Réponds de tête, puis déplie.
1. Qu’est-ce que la Data API ?
Réponse
Le déclenchement par attributs data-bs-*, sans écrire de JS.
2. Ouvrir une modale en JS ?
Réponse
new bootstrap.Modal(el).show().
3. Récupérer une instance existante ?
Réponse
getInstance(el).
4. Créer ou récupérer une instance ?
Réponse
getOrCreateInstance(el).
5. À quoi sert .dispose() ?
Réponse
Détruire l’instance et nettoyer (SPA).
6. Où passer les options d’un composant ?
Réponse
Au constructeur ou en data-bs-*.
7. Risque d’instancier deux fois le même élément ?
Réponse
Comportements en double.
8. Format des noms d’événements ?
Réponse
action.bs.composant.
9. Différence show / shown ?
Réponse
Avant (début) vs après (animation finie).
10. Quels événements sont annulables ?
Réponse
Ceux « avant » (show, hide) via preventDefault().
11. Où placer le focus après ouverture d’une modale ?
Réponse
Dans shown.bs.modal.
12. Quel bouton a ouvert la modale ?
Réponse
event.relatedTarget.
13. Événement de fin de slide d’un carousel ?
Réponse
slid.bs.carousel.
14. Le bundle contient quoi de plus ?
Réponse
Popper.
15. Trois composants nécessitant Popper ?
Réponse
Dropdown, tooltip, popover.
16. La modale a-t-elle besoin de Popper ?
Réponse
Non.
17. N’embarquer qu’un plugin ?
Réponse
import { Modal } from 'bootstrap'.
18. Où placer la balise script ?
Réponse
Avant </body> ou en defer.
19. Bootstrap 5 dépend-il de jQuery ?
Réponse
Non.
20. data-toggle (v4) devient… ?
Réponse
data-bs-toggle.
21. data-target devient… ?
Réponse
data-bs-target.
22. data-dismiss devient… ?
Réponse
data-bs-dismiss.
23. .ml-3 devient… ?
Réponse
.ms-3.
24. Pourquoi start/end au lieu de left/right ?
Réponse
Préparer le RTL.
25. .sr-only devient… ?
Réponse
.visually-hidden.
26. Traduire $('#m').modal('show') en v5 ?
Réponse
new bootstrap.Modal('#m').show().
27. Pourquoi supprimer jQuery ?
Réponse
Poids, standards DOM modernes, interop.
28. Sélectionner un élément en vanilla ?
Réponse
document.querySelector(...).
29. Ajouter une classe en vanilla ?
Réponse
el.classList.add(...).
30. Écouter un événement en vanilla ?
Réponse
el.addEventListener(...).
31. Empêcher une modale de s’ouvrir sous condition ?
Réponse
e.preventDefault() dans show.bs.modal.
32. Le JS Bootstrap est écrit en… ?
Réponse
Modules ES vanilla.
33. Cause n°1 d’un composant qui ne réagit plus après migration ?
Réponse
Data-attributes non préfixés data-bs-*.
34. Événement après fermeture d’un offcanvas ?
Réponse
hidden.bs.offcanvas.
35. La Data API s’initialise quand ?
Réponse
Au chargement du DOM.
36. Problème de la Data API en React ?
Réponse
Les composants montés après ne sont pas pris en compte.
37. Où initialiser un plugin JS en React ?
Réponse
Dans un useEffect (composant client) + dispose().
38. .badge-primary (v4) devient… ?
Réponse
.text-bg-primary.
39. .no-gutters devient… ?
Réponse
.g-0.
40. .close (v4) devient… ?
Réponse
.btn-close.
41. .float-left devient… ?
Réponse
.float-start.
42. .text-right devient… ?
Réponse
.text-end.
43. Passer un backdrop statique en JS ?
Réponse
new Modal(el, { backdrop: 'static' }).
44. Événement d’ouverture terminée d’un toast ?
Réponse
shown.bs.toast.
45. Import global du JS (bundler) ?
Réponse
import * as bootstrap from 'bootstrap'.
46. Import ciblé d’un plugin depuis dist ?
Réponse
import Dropdown from 'bootstrap/js/dist/dropdown'.
47. Un tooltip nécessite quelle étape en plus ?
Réponse
Initialisation JS (opt-in).
48. Toggle programmatique d’une modale ?
Réponse
modal.toggle().
49. Nettoyer un composant JS en React ?
Réponse
.dispose() au cleanup.
50. Résumé : deux façons d’utiliser le JS ?
Réponse
Data API (déclaratif) et API programmatique (impératif).
Quiz suivant : Quiz 17 — React & Next.js.