Quiz 04 — Boutons, badges, alertes
⏱️ TL;DR — 50 questions sur les boutons, badges, alertes et indicateurs (spinners, progress, placeholders) (Partie 4). Réponds de tête, puis déplie.
1. Classe de base d’un bouton ?
Réponse
btn (+ une variante).
2. Bouton primaire plein ?
Réponse
btn btn-primary.
3. Bouton à contour vert ?
Réponse
btn btn-outline-success.
4. Bouton pleine largeur ?
Réponse
w-100.
5. Grand / petit bouton ?
Réponse
btn-lg / btn-sm.
6. Désactiver un <button> ?
Réponse
Attribut disabled.
7. Désactiver un lien stylé en bouton ?
Réponse
.disabled + aria-disabled="true".
8. btn requiert-il du JS ?
Réponse
Non, CSS pur.
9. Sur quelles balises fonctionne btn ?
Réponse
<button>, <a>, <input>.
10. Bouton avec spinner de chargement ?
Réponse
disabled + <span class="spinner-border spinner-border-sm">.
11. Combien de variantes de couleur de bouton ?
Réponse
Huit + btn-link.
12. À quoi sert un <button> plutôt qu’un <div> cliquable ?
Réponse
Focusable et annonçable (accessibilité).
13. Classe de base d’un badge ?
Réponse
.badge.
14. Que fait text-bg-primary ?
Réponse
Fond primaire + couleur de texte contrastée.
15. Rendre un badge ovale ?
Réponse
rounded-pill.
16. Badge de notification sur un coin, classes clés ?
Réponse
position-absolute top-0 start-100 translate-middle.
17. Classe de base d’une alerte ?
Réponse
.alert + .alert-*.
18. Rôle ARIA sur une alerte importante ?
Réponse
role="alert".
19. Colorer un lien dans une alerte ?
Réponse
alert-link.
20. Titre dans une alerte ?
Réponse
alert-heading.
21. Rendre une alerte fermable ?
Réponse
alert-dismissible + btn-close data-bs-dismiss="alert".
22. Quelles classes animent la disparition d’une alerte ?
Réponse
fade show.
23. Combien de couleurs contextuelles ?
Réponse
Huit (primary, secondary, success, danger, warning, info, light, dark).
24. Classe pour coller des boutons ensemble ?
Réponse
btn-group.
25. Groupe de boutons vertical ?
Réponse
btn-group-vertical.
26. Plusieurs groupes de boutons ?
Réponse
btn-toolbar.
27. Deux styles de spinner ?
Réponse
spinner-border et spinner-grow.
28. Colorer un spinner ?
Réponse
Via text-* (ex. text-primary).
29. Rendre un spinner accessible ?
Réponse
role="status" + texte visually-hidden.
30. Petit spinner ?
Réponse
spinner-border-sm.
31. Classe de base d’une barre de progression ?
Réponse
.progress + .progress-bar.
32. Où se règle le pourcentage ?
Réponse
Sur .progress-bar (style width).
33. Barre rayée et animée ?
Réponse
progress-bar-striped progress-bar-animated.
34. Empiler des barres (5.3) ?
Réponse
progress-stacked.
35. Classe pour un squelette de chargement ?
Réponse
placeholder (+ placeholder-glow/-wave).
36. À quoi servent les placeholders ?
Réponse
Afficher un squelette pendant le chargement des données.
37. Un split button, structure ?
Réponse
btn-group + bouton + dropdown-toggle-split.
38. Un bouton de suppression secondaire au survol rouge ?
Réponse
btn btn-outline-danger.
39. Marquer un bouton comme actif ?
Réponse
active + aria-pressed="true".
40. Un badge dans un titre H4 ?
Réponse
<h4>Texte <span class="badge text-bg-secondary">4</span></h4>.
41. text-bg-warning évite quel problème ?
Réponse
Les erreurs de contraste (texte lisible auto).
42. Une alerte statique nécessite-t-elle role="alert" ?
Réponse
Non, réservé aux messages importants.
43. Alerte fermable : dépend de quoi ?
Réponse
Du JS Bootstrap (data-bs-dismiss).
44. En React, comment fermer une alerte proprement ?
Réponse
Par l’état ({visible && …}) ou <Alert dismissible>.
45. Tailles de groupe de boutons ?
Réponse
btn-group-sm, btn-group-lg.
46. Un badge « En ligne » vert en pilule ?
Réponse
badge rounded-pill text-bg-success.
47. Barre de progression à 75 % verte ?
Réponse
<div class="progress-bar bg-success" style="width:75%">.
48. Attribut ARIA d’une barre de progression ?
Réponse
aria-valuenow (+ min/max) sur role="progressbar".
49. btn-link ressemble à quoi ?
Réponse
Un bouton qui a l’apparence d’un lien.
50. Un <div class="btn"> cliquable : problème ?
Réponse
Ni focusable ni annoncé par les lecteurs d’écran.
Quiz suivant : Quiz 05 — Cartes & list group.