Quiz 01 — Découverte & installation
⏱️ TL;DR — 50 questions sur l’histoire de Bootstrap, sa philosophie, l’installation (CDN/npm) et la structure des fichiers (Partie 1). Réponds de tête, puis déplie.
1. En quelle année Bootstrap est-il né ?
Réponse
En 2011, chez Twitter (« Twitter Blueprint »).
2. Quels sont les trois piliers de Bootstrap ?
Réponse
La grille responsive, les composants, les utilitaires.
3. Quelle version a supprimé jQuery ?
Réponse
Bootstrap 5 (2021).
4. Quelle est la dernière ligne stable couverte par ce cours ?
Réponse
Bootstrap 5.3 (5.3.8).
5. Bootstrap gère-t-il l’état applicatif comme React ?
Réponse
Non, c’est un framework de présentation (CSS/JS).
6. Sur quelle techno CSS repose la grille depuis la v4 ?
Réponse
Flexbox.
7. Quels sont les deux moyens de personnaliser Bootstrap ?
Réponse
Le Sass (compilation) et les variables CSS --bs-* (runtime).
8. Quelle nouveauté phare de la 5.3 ?
Réponse
Les color modes (dark mode natif via data-bs-theme).
9. Quelle licence Bootstrap ?
Réponse
MIT (open source).
10. Différence Bootstrap vs Tailwind, en un mot ?
Réponse
Bootstrap = composants finis (+ utilitaires) ; Tailwind = utilitaires seuls.
11. Bootstrap inclut-il des composants JavaScript ?
Réponse
Oui (modale, dropdown, carousel…). Tailwind non.
12. Peut-on utiliser Bootstrap avec React ?
Réponse
Oui : CSS seul, react-bootstrap, ou CSS + JS natif (déconseillé avec SSR).
13. Les deux balises minimales pour le CDN ?
Réponse
Un <link> vers bootstrap.min.css et un <script> vers bootstrap.bundle.min.js.
14. Que contient bootstrap.bundle.js de plus que bootstrap.js ?
Réponse
Popper (positionnement des dropdowns/tooltips/popovers).
15. Peut-on personnaliser en Sass avec le CDN ?
Réponse
Non — il faut passer par npm.
16. À quoi sert l’attribut integrity sur le CDN ?
Réponse
Vérifier l’intégrité du fichier (Subresource Integrity).
17. Commande npm pour installer Bootstrap ?
Réponse
npm install bootstrap.
18. Quelle dépendance installer en plus pour les dropdowns/tooltips (via npm) ?
Réponse
@popperjs/core.
19. Comment importer seulement Modal et Tooltip en JS ?
Réponse
import { Modal, Tooltip } from 'bootstrap'.
20. Quel fichier CSS ne contient QUE la grille ?
Réponse
bootstrap-grid.css.
21. Quel fichier CSS ne contient QUE le reset ?
Réponse
bootstrap-reboot.css.
22. Quel fichier CSS ne contient QUE les utilitaires ?
Réponse
bootstrap-utilities.css.
23. À quoi servent les fichiers .rtl.css ?
Réponse
La version droite-à-gauche (arabe, hébreu…).
24. À quoi sert un fichier .map ?
Réponse
C’est une source map (débogage : relie le minifié à la source).
25. Quel fichier JS choisir par défaut ?
Réponse
bootstrap.bundle.min.js (inclut Popper).
26. Où placer le CSS et où placer le JS ?
Réponse
CSS dans <head>, JS (bundle) avant </body> (ou defer).
27. Quelle balise <meta> est indispensable au responsive ?
Réponse
<meta name="viewport" content="width=device-width, initial-scale=1">.
28. Que se passe-t-il sans la balise viewport sur mobile ?
Réponse
La page s’affiche « dézoomée » et les breakpoints ne se déclenchent pas.
29. bg-primary : composant ou utilitaire ?
Réponse
Un utilitaire (couleur de fond).
30. container sert à quoi ?
Réponse
Centrer et limiter la largeur du contenu.
31. Bootstrap est-il « mobile-first » ?
Réponse
Oui : les classes s’appliquent « à partir de » tel breakpoint.
32. Que fait col-md-6 ?
Réponse
La colonne prend la moitié à partir de md, pleine largeur en dessous.
33. Avantage clé de npm pour la taille finale ?
Réponse
Tree-shaking du JS et build Sass / purge du CSS.
34. Quel bon terrain pour Bootstrap ?
Réponse
Back-offices, dashboards, prototypes, sites d’entreprise, projets d’équipe.
35. Quand chercher ailleurs que Bootstrap ?
Réponse
Design très identitaire au poids minimal, ou équipe déjà tout-Tailwind.
36. Comment éviter le look « Bootstrap d’usine » ?
Réponse
Personnaliser les variables Sass (couleurs, typo, rayons).
37. Peut-on n’utiliser que le CSS, sans le JS ?
Réponse
Oui — inclure bootstrap.css sans bootstrap.bundle.js.
38. Où trouver la valeur SRI exacte du CDN ?
Réponse
Sur getbootstrap.com (page Getting started).
39. Quelle version majeure a introduit le mobile-first ?
Réponse
Bootstrap 3 (2013).
40. Quelle version a introduit Flexbox et le passage de Less à Sass ?
Réponse
Bootstrap 4 (2018).
41. Popper est requis par quels composants ?
Réponse
Dropdown, tooltip, popover.
42. Quel fichier JS pour l’import via bundler ?
Réponse
La version ESM (bootstrap.esm.js) — visée par import.
43. Faut-il un bundler pour utiliser npm ?
Réponse
Oui (Vite, Webpack, Next.js…).
44. Un dropdown ne se positionne pas : cause probable ?
Réponse
bootstrap.js chargé sans Popper au lieu du bundle.
45. Que fournit la « system font stack » par défaut ?
Réponse
La police native du système d’exploitation (pas de web font à charger).
46. La prochaine version majeure après 5.3 ?
Réponse
Bootstrap 6 (en développement).
47. Bootstrap 6 est-il stable aujourd’hui ?
Réponse
Non, encore en développement ; la cible stable est 5.3.
48. Dans un fichier HTML unique de prototype, CDN ou npm ?
Réponse
CDN (deux balises, aucun build).
49. Dans un projet Next.js, CDN ou npm ?
Réponse
npm (personnalisation Sass, bundling).
50. Résumé : les trois façons d’utiliser Bootstrap avec React ?
Réponse
(1) CSS seul, (2) react-bootstrap, (3) CSS + JS natif (déconseillé en SSR).
Quiz suivant : Quiz 02 — Grille & layout.