Quiz 20 — Révision générale (expert)
⏱️ TL;DR — 50 questions transversales, niveau expert : elles piochent dans tout le cours et demandent de relier les notions. Réponds de tête, puis déplie. Dernier quiz — bravo d’être arrivé jusqu’ici !
1. Pourquoi le passage left/right → start/end dépasse-t-il l’esthétique ?
Réponse
Les propriétés logiques permettent l’inversion automatique en RTL.
2. Pour un rebranding total des couleurs dérivées, Sass ou CSS var ?
Réponse
Sass : les couleurs subtle/emphasis/hover sont figées à la compilation.
3. Une modale ouverte via data-bs-toggle en React : quel risque ?
Réponse
Désynchronisation DOM/état ; préférer <Modal show> de react-bootstrap.
4. Pourquoi une gouttière exige-t-elle col dans row ?
Réponse
Le padding des colonnes est compensé par la marge négative de la row.
5. h-100 inefficace : cause fréquente ?
Réponse
Le parent n’a pas de hauteur définie (préférer min-vh-100).
6. Un tooltip absent malgré un JS chargé : deux causes ?
Réponse
Pas d’initialisation (opt-in) ou Popper manquant (bootstrap.js sans bundle).
7. Ordre d’import Sass pour ajouter une couleur de thème ?
Réponse
functions → variables → map-merge $theme-colors → maps → mixins → bootstrap.
8. text-bg-primary vs bg-primary text-white : différence ?
Réponse
text-bg-* choisit la couleur de texte contrastée automatiquement.
9. Pourquoi le script anti-flash de thème doit être inline synchrone ?
Réponse
Poser data-bs-theme avant le premier rendu, sinon flash clair→sombre.
10. Purge sans safelist : symptôme ?
Réponse
Composants JS visuellement cassés (show/collapsing supprimés).
11. Différence conceptuelle Utility API ↔ Tailwind theme.extend ?
Réponse
Les deux étendent le système de classes depuis une config centrale.
12. Pourquoi éviter Bootstrap + Tailwind ensemble ?
Réponse
Double reset, échelles concurrentes, collisions de classes.
13. data-bs-theme sur un conteneur : effet ?
Réponse
Dark/light localisé qui cascade aux enfants.
14. Un composant serveur Next importe le JS Bootstrap : conséquence ?
Réponse
window is not defined au build.
15. Trois composants qui dépendent de Popper ?
Réponse
Dropdown, tooltip, popover.
16. getOrCreateInstance évite quel bug ?
Réponse
Double instanciation du même élément.
17. col-md-6 offset-md-3 équivaut à quel motif flex ?
Réponse
Centrer une colonne (justify-content-center + col-6).
18. order casse-t-il l’accessibilité ?
Réponse
Il change l’ordre visuel, pas l’ordre de lecture/clavier (DOM).
19. Pourquoi !default est-il central à la personnalisation ?
Réponse
Il n’applique la valeur que si non déjà définie → surcharge en amont.
20. --bs-primary-rgb sert à quoi et pourquoi le définir ?
Réponse
Composer rgba(...) ; sans lui, les transparences gardent l’ancienne couleur.
21. Migration v4→v5 d’un composant interactif : trois must ?
Réponse
Retirer jQuery, préfixer data-bs-*, classes logiques start/end.
22. Pourquoi les floating labels exigent-ils un placeholder ?
Réponse
Le mécanisme CSS s’appuie sur l’état :placeholder-shown.
23. shown.bs.modal plutôt que show.bs.modal pour le focus : pourquoi ?
Réponse
L’élément est visible/animation finie → le focus réussit.
24. Build minimal : socle obligatoire ?
Réponse
functions, variables (+dark), maps, mixins, root.
25. Dark mode d’une navbar en 5.3 vs v4 ?
Réponse
data-bs-theme="dark" vs navbar-dark (obsolète).
26. Pourquoi bg-body-tertiary plutôt que bg-light en 5.3 ?
Réponse
Adaptatif au color mode.
27. Recadrer une image dans une vignette carrée : combo ?
Réponse
object-fit-cover + ratio ratio-1x1 (ou dimensions).
28. mixin media-breakpoint-up(lg) : avantage sur une media query en dur ?
Réponse
Synchronisé avec $grid-breakpoints.
29. Une carte en grille aux hauteurs inégales : correctif ?
Réponse
h-100 sur la carte.
30. Un badge « 9+ » en coin de bouton : classes clés ?
Réponse
position-absolute top-0 start-100 translate-middle.
31. needs-validation + novalidate : rôle respectif ?
Réponse
Style Bootstrap au submit / supprimer les bulles natives.
32. react-bootstrap gère quoi que le JS natif rendrait pénible ?
Réponse
Focus trap, ARIA, clic extérieur, portails.
33. Pourquoi tooltips/popovers sont opt-in ?
Réponse
Performance (init sélective).
34. container-md sur mobile ?
Réponse
Fluide (100 %), puis limité dès md.
35. Générer une classe utilitaire responsive cursor : clé ?
Réponse
responsive: true dans l’entrée $utilities.
36. Pourquoi Bootstrap a supprimé jQuery ?
Réponse
Poids, DOM moderne suffisant, interop React/Vue.
37. Onglets JS : combien de tab-pane avec show active au départ ?
Réponse
Un seul.
38. data-bs-parent dans un accordéon : effet ?
Réponse
Ouvrir une section ferme les autres.
39. Pourquoi img-fluid est déconseillé avec next/image ?
Réponse
next/image gère déjà les dimensions.
40. Un thème « flat » complet : trois options $enable-* ?
Réponse
$enable-rounded/shadows/gradients: false.
41. Cause n°1 de « composant mort » après migration ?
Réponse
Data-attributes non préfixés data-bs-*.
42. next-themes + Bootstrap : quelle prop clé ?
Réponse
attribute="data-bs-theme".
43. Ajouter btn-brand sans écrire de CSS : comment ?
Réponse
Ajouter brand à $theme-colors.
44. d-grid gap-2 sur des boutons : effet ?
Réponse
Boutons empilés pleine largeur, espacés.
45. Cas idéal pour Bootstrap en React ?
Réponse
Back-office / MVP rapide et cohérent (react-bootstrap).
46. Cible stable 2026 : 5.3 ou 6 ?
Réponse
5.3.
47. Pourquoi un bouton-icône seul est un piège d’a11y ?
Réponse
Muet pour les lecteurs d’écran sans aria-label.
48. Réduire le poids : les quatre leviers ?
Réponse
Build minimal, purge, tree-shaking, minif+compression.
49. Deux façons d’utiliser le JS des composants ?
Réponse
Data API (déclaratif) et API programmatique (impératif).
50. La règle d’or Bootstrap + React ?
Réponse
CSS partout ; pour l’interactivité, react-bootstrap (pas le JS natif en SSR).
🎉 Félicitations ! Tu as terminé les 1000 questions. Si tu as buté sur certaines, retourne à la partie correspondante du cours — puis refais le quiz. La maîtrise vient de la répétition espacée.
Retour : Vue d’ensemble des quiz · Accueil du cours.