Le meuble en kit
Plutôt que de couper le bois et fabriquer les tiroirs, on achète un meuble en kit : les pièces sont prêtes, il suffit de les assembler. Bootstrap, c'est un kit de pièces CSS et JavaScript déjà fabriquées.
M04 · D. Maîtriser Bootstrap
Intégrer Bootstrap et utiliser sa grille
Découvrir le framework Bootstrap et ses versions, l'intégrer par CDN ou en local, et construire des mises en page responsives avec la grille de 12 colonnes.
1Situer
Une agence immobilière de Tanger veut un site en une semaine : une page d'annonces avec des cartes, trois par ligne sur ordinateur, deux sur tablette, une sur téléphone. Écrire tout ce CSS à la main prendrait des jours. Bootstrap fournit une grille et des composants prêts à l'emploi : on ajoute des classes au HTML, et la mise en page est déjà responsive.
2Comprendre
Chaque .row est découpée en 12 colonnes égales. Une colonne indique combien de parts elle prend.
1 / 5
Bootstrap est un framework CSS et JavaScript libre (licence MIT), créé chez Twitter en 2011. Il fournit une grille responsive, des classes utilitaires et des composants (menus, boutons, cartes, fenêtres…).
Les versions
| Version | Points clés |
|---|---|
| Bootstrap 3 (2013) | le premier « mobile first » |
| Bootstrap 4 (2018) | grille en Flexbox |
| Bootstrap 5 (depuis 2021) | sans jQuery, utilitaires enrichis : la version à utiliser |
Intégrer Bootstrap
Par CDN (un serveur qui distribue le fichier) : deux lignes à copier depuis getbootstrap.com.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
En local : on télécharge les fichiers, on les met dans css/ et js/ et on les lie avec des chemins relatifs. Le site fonctionne alors sans Internet, par exemple en salle de formation.
Votre propre style.css se place après Bootstrap, pour pouvoir le personnaliser.
La grille
<div class="container"> <!-- largeur limitée et centrée -->
<div class="row"> <!-- une ligne de 12 colonnes -->
<div class="col-12 col-md-6 col-lg-4">...</div>
</div>
</div>
| Préfixe | Écran | À partir de |
|---|---|---|
col- | tous | 0 px |
col-sm- | petit | 576 px |
col-md- | moyen | 768 px |
col-lg- | grand | 992 px |
col-xl- | très grand | 1200 px |
Une classe s’applique à partir de sa taille et vers le haut. col-12 col-md-6 veut dire : toute la largeur sur téléphone, la moitié à partir de 768 px.
g-3 (gutter) espace les colonnes, container-fluid prend toute la largeur de l’écran.
La tablette de chocolat en 12 carrés
Chaque ligne de la grille est une tablette de 12 carrés. col-4 prend 4 carrés (un tiers), col-6 en prend 6 (la moitié), col-12 toute la tablette.
<div class="row"> <div class="col-4">1/3</div> <div class="col-4">1/3</div> <div class="col-4">1/3</div> </div>
Publicité
3Manipuler
Bootstrap est déjà chargé dans ce bac à sable. Les annonces s'empilent : rangez-les avec la grille, puis testez les trois tailles d'écran avec les boutons 📱 ▭ 🖥.
- Sur tablette et plus, deux annonces par ligne : ajoutez col-md-6 aux trois colonnes
- Sur ordinateur, trois annonces par ligne : ajoutez col-lg-4
- Ajoutez un espacement entre les colonnes (classe g-3 sur la .row)
- Ajoutez une quatrième annonce de la même façon
4Pratiquer
Exercice 1 · Intégrer par CDN
Écrivez les deux lignes qui chargent Bootstrap 5 depuis un CDN (le CSS et le JavaScript), et dites où les placer.
Voir le corrigé
<!-- dans le <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <!-- juste avant </body> --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Exercice 2 · Calculer la grille
Quelles classes donner à une colonne pour qu'elle prenne toute la largeur sur téléphone, la moitié sur tablette (md) et un quart sur grand écran (xl) ?
Voir le corrigé
<div class="col-12 col-md-6 col-xl-3">...</div> <!-- 12/12, puis 6/12, puis 3/12 -->
Exercice 3 · La page de détail
Une page d'annonce : la photo à gauche (deux tiers) et le prix et le contact à droite (un tiers) sur ordinateur, l'un sous l'autre sur téléphone. Écrivez la grille.
Voir le corrigé
<div class="container"> <div class="row"> <div class="col-12 col-lg-8"> photo </div> <div class="col-12 col-lg-4"> prix et contact </div> </div> </div>
Publicité