Quiz 11 — Utilitaires (1)
⏱️ TL;DR — 50 questions sur spacing, sizing et couleurs (Partie 7). Réponds de tête, puis déplie.
1. Que fait px-4 ?
Réponse
Padding gauche + droite de 1.5 rem.
2. Que fait mt-3 ?
Réponse
Margin-top de 1 rem.
3. Échelle d’espacement : valeur de 3 ?
Réponse
1 rem.
4. Valeur de 5 ?
Réponse
3 rem.
5. Valeur de 1 ?
Réponse
0.25 rem.
6. Que signifie s et e (ms/me) ?
Réponse
start (gauche en LTR) et end (droite).
7. Marge haute négative de taille 3 ?
Réponse
mt-n3.
8. Centrer un bloc horizontalement ?
Réponse
mx-auto (avec largeur définie).
9. Pousser un élément flex à droite ?
Réponse
ms-auto.
10. Padding responsive : 3 par défaut, 5 dès md ?
Réponse
p-3 p-md-5.
11. Aucun padding ?
Réponse
p-0.
12. Largeur 50 % ?
Réponse
w-50.
13. Hauteur 100 % du parent ?
Réponse
h-100.
14. Hauteur = viewport ?
Réponse
vh-100.
15. Au moins la hauteur du viewport ?
Réponse
min-vh-100.
16. max-width: 100% ?
Réponse
mw-100.
17. h-100 marche si… ?
Réponse
Le parent a une hauteur définie.
18. Sur quelle variable repose l’échelle d’espacement ?
Réponse
$spacer.
19. Colorer le texte en succès ?
Réponse
text-success.
20. Que fait text-bg-primary ?
Réponse
Fond primaire + texte contrasté.
21. Texte atténué adaptatif (5.3) ?
Réponse
text-body-secondary.
22. Texte principal adaptatif ?
Réponse
text-body.
23. Fond neutre adaptatif ?
Réponse
bg-body-tertiary.
24. Fond doux « succès » (5.3) ?
Réponse
bg-success-subtle.
25. Texte accentué « succès » ?
Réponse
text-success-emphasis.
26. Régler l’opacité d’un fond ?
Réponse
bg-opacity-* (ex. 25).
27. Régler l’opacité d’un texte ?
Réponse
text-opacity-*.
28. Lien coloré primaire ?
Réponse
link-primary.
29. Pourquoi préférer bg-body-tertiary à bg-light ?
Réponse
Il s’adapte au mode clair/sombre.
30. Version RGB d’une couleur, à quoi ?
Réponse
Composer rgba(var(--bs-primary-rgb), α).
31. text-muted en 5.3 : recommandé ?
Réponse
Non, préférer text-body-secondary.
32. Largeur auto ?
Réponse
w-auto.
33. Une section pleine hauteur d’écran ?
Réponse
min-vh-100.
34. Centrer un bloc de 300 px ?
Réponse
mx-auto + largeur 300px.
35. Différence h-100 / vh-100 ?
Réponse
Parent vs viewport.
36. Marge basse de taille 2 ?
Réponse
mb-2.
37. Padding vertical de taille 4 ?
Réponse
py-4.
38. Ces couleurs sont pilotées par… ?
Réponse
Des variables CSS --bs-*.
39. Comparé à Tailwind, l’échelle Bootstrap est… ?
Réponse
Plus courte (0–5) et en rem.
40. mt-3 de Bootstrap ≈ quelle valeur ?
Réponse
1 rem.
41. Un encadré info doux + texte assorti ?
Réponse
bg-info-subtle text-info-emphasis.
42. Badge d’avertissement lisible sans choisir la couleur texte ?
Réponse
badge text-bg-warning.
43. Changer toutes les couleurs text-*/bg-* d’un coup ?
Réponse
Redéfinir les variables --bs-* (ou Sass).
44. Marges/paddings responsives : format ?
Réponse
{prop}{côté}-{bp}-{taille} (ex. mt-md-4).
45. ms-auto vs mx-auto ?
Réponse
Pousser à droite (flex) vs centrer.
46. Largeur 25/75 % ?
Réponse
w-25 / w-75.
47. vw-100 fait quoi ?
Réponse
Largeur = 100 % du viewport.
48. Un lien discret (souligné à 25 %) ?
Réponse
link-underline-opacity-25.
49. text-white sur fond sombre : adaptatif ?
Réponse
Non (couleur figée) — préférer text-body en dark mode.
50. Résumé : m/p + côté + taille = ?
Réponse
La formule d’espacement (ex. me-2, pt-4).
Quiz suivant : Quiz 12 — Utilitaires (2) & Utility API.