Quiz 03 — Contenu & typographie
⏱️ TL;DR — 50 questions sur le Reboot, la typographie, les images/figures et les tableaux (Partie 3). Réponds de tête, puis déplie.
1. Sur quelle base le Reboot est-il construit ?
Réponse
normalize.css.
2. Quelle valeur de box-sizing le Reboot applique-t-il ?
Réponse
border-box partout.
3. Le Reboot cible-t-il des classes ou des balises ?
Réponse
Des balises (éléments HTML).
4. Quelle police par défaut utilise Bootstrap ?
Réponse
La system font stack.
5. Que fait le Reboot aux marges du haut des blocs ?
Réponse
Il les supprime (ne garde que margin-bottom).
6. Quel fichier n’inclut QUE le Reboot ?
Réponse
bootstrap-reboot.css.
7. Quelle unité de base pour l’accessibilité ?
Réponse
Le rem.
8. Que fait <h1 class="h4"> ?
Réponse
Sémantiquement H1, visuellement H4.
9. À quoi servent les classes display-* ?
Réponse
Des titres surdimensionnés (hero).
10. Combien de niveaux display ?
Réponse
6 (display-1 à display-6).
11. Quelle classe pour un paragraphe d’accroche ?
Réponse
.lead.
12. Que fait text-truncate ?
Réponse
Coupe sur une ligne avec « … » (nécessite une largeur).
13. Classes de taille de police ?
Réponse
fs-1 (grand) à fs-6 (petit).
14. Classe pour du gras ?
Réponse
fw-bold.
15. Classe pour de l’italique ?
Réponse
fst-italic.
16. Mettre un texte en majuscules ?
Réponse
text-uppercase.
17. Centrer un texte à partir de md ?
Réponse
text-md-center.
18. Quelle classe enlève puces et marges d’une liste ?
Réponse
.list-unstyled.
19. Afficher une liste en ligne ?
Réponse
.list-inline + .list-inline-item.
20. Quelle classe rend une image responsive ?
Réponse
img-fluid.
21. Que fait img-fluid exactement ?
Réponse
max-width: 100%; height: auto.
22. Centrer une image en bloc ?
Réponse
d-block mx-auto.
23. rounded-circle fonctionne bien sur quelle forme ?
Réponse
Une image carrée.
24. Classe pour une image encadrée avec padding ?
Réponse
img-thumbnail.
25. Quand mettre alt="" ?
Réponse
Image purement décorative.
26. Structure d’une figure légendée ?
Réponse
<figure class="figure"> + figure-img + figure-caption.
27. Classe de base d’un tableau ?
Réponse
.table.
28. Ajouter des rayures ?
Réponse
table-striped.
29. Surbrillance au survol ?
Réponse
table-hover.
30. Tableau compact ?
Réponse
table-sm.
31. Colorer une ligne en danger ?
Réponse
<tr class="table-danger">.
32. Tableau entièrement sombre ?
Réponse
table-dark.
33. Rendre un tableau défilable horizontalement ?
Réponse
L’envelopper dans table-responsive.
34. Défilement horizontal seulement sous md ?
Réponse
table-responsive-md.
35. Centrer verticalement les cellules ?
Réponse
align-middle.
36. En-tête clair d’un tableau ?
Réponse
<thead class="table-light">.
37. Rayer les colonnes plutôt que les lignes ?
Réponse
table-striped-columns.
38. Retirer toutes les bordures d’un tableau ?
Réponse
table-borderless.
39. Bordures complètes ?
Réponse
table-bordered.
40. Un titre section reste <h2> mais taille <h4> ?
Réponse
<h2 class="h4">.
41. Souligner un texte ?
Réponse
text-decoration-underline.
42. Empêcher un texte de wrapper ?
Réponse
text-nowrap.
43. Casser un mot trop long ?
Réponse
text-break.
44. Recadrer une image sans déformation (avatars) ?
Réponse
object-fit-cover.
45. Où mettre l’attribut alt ?
Réponse
Sur chaque <img> (accessibilité + SEO).
46. next/image + img-fluid : bonne idée ?
Réponse
Non — laisser next/image gérer les dimensions.
47. Poids fw-semibold existe-t-il en 5.3 ?
Réponse
Oui.
48. Classe pour capitaliser chaque mot ?
Réponse
text-capitalize.
49. Le Reboot modifie-t-il le rendu global d’un site existant ?
Réponse
Oui (marges, tailles) — attention à l’intégration.
50. Pour un tableau riche (tri/filtre), Bootstrap fournit quoi ?
Réponse
Seulement le style — la logique vient d’une lib (ex. TanStack Table).
Quiz suivant : Quiz 04 — Boutons, badges, alertes.