Historique des conversations
Chargement...
Chapitre 3 : Grid System
1. Concept de base
Le système de grille de Bootstrap permet de créer des mises en page complexes et réactives. Il est basé sur Flexbox et divise la largeur de la page en 12 colonnes.
2. Container, Row et Col
.container: Centre votre contenu et définit une largeur maximale..row: Crée une ligne (indispensable pour contenir des colonnes)..col: Crée une colonne.
<div class="container">
<div class="row">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="col">Colonne 3</div>
</div>
</div>3. Largeurs spécifiques
Vous pouvez spécifier le nombre de colonnes (sur un total de 12) qu'un élément doit occuper.
<div class="row">
<div class="col-8">Menu principal (8/12)</div>
<div class="col-4">Sidebar (4/12)</div>
</div>4. Responsive Design (Breakpoints)
Utilisez les préfixes pour changer la mise en page selon la taille de l'écran :
col-(mobile)col-sm-(tablette)col-md-(ordinateur portable)col-lg-(grand écran)
Conclusion
La grille est l'outil le plus puissant de Bootstrap. Prochaine étape : Typographie et Couleurs.
Objectifs du chapitre
- Comprendre les concepts clés de Le système de Grille (Grid System).
- Savoir appliquer ces concepts sur un cas concret.
- Éviter les erreurs fréquentes et adopter les bonnes pratiques.
Explication
Ce chapitre vous guide pas à pas sur le thème Le système de Grille (Grid System). L'idée est de partir d'une approche simple, puis de progresser vers des usages plus réalistes.
Exemple pratique
Essayez d'appliquer la notion vue ici dans un mini-exemple de votre projet personnel. Ensuite, comparez votre résultat avec les exercices associés pour valider votre compréhension.
À retenir
Maîtriser Le système de Grille (Grid System) vous permettra d'aller plus vite dans les chapitres suivants.
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les bases : Le système de Grille (Grid System)
Atelier #1Expliquez avec vos mots le concept principal de ce chapitre, puis illustrez-le par un exemple simple.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#2 — Application guidée
Atelier #2Réalisez un exercice pratique en reprenant la structure vue dans le cours et en modifiant au moins 2 paramètres.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#3 — Mini défi
Atelier #3Concevez une petite solution personnelle liée à 'Le système de Grille (Grid System)' et justifiez vos choix techniques.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.