Historique des conversations
Chargement...
Chapitre 10 : Utilitaires Flex/Spacing
1. Spacing (Marges et Padding)
Bootstrap utilise un système simple pour les marges (m) et le padding (p).
m-3: Marge de 1rem sur tous les côtés.mb-4: Marge en bas (bottom) de 1.5rem.px-2: Padding horizontal (gauche et droite) de 0.5rem.mt-auto: Marge en haut automatique (très utile en Flexbox).- Comprendre les concepts clés de Utilitaires (Spacing, Flex, Shadow).
- Savoir appliquer ces concepts sur un cas concret.
- Éviter les erreurs fréquentes et adopter les bonnes pratiques.
Objectifs du chapitre
2. Flexbox
Alignez vos éléments sans effort.
<div class="d-flex justify-content-between align-items-center">
<div>Élément 1</div>
<div>Élément 2</div>
</div>3. Shadows (Ombres)
Donnez de la profondeur à vos composants.
<div class="shadow-sm p-3 mb-5 bg-body rounded">Petite ombre</div>
<div class="shadow p-3 mb-5 bg-body rounded">Ombre normale</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Grande ombre</div>Conclusion
Ces utilitaires vous éviteront d'écrire 80% de votre CSS habituel. Dans le prochain chapitre : Personnalisation avec SASS.
Explication
Ce chapitre vous guide pas à pas sur le thème Utilitaires (Spacing, Flex, Shadow). 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 Utilitaires (Spacing, Flex, Shadow) 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 : Utilitaires (Spacing, Flex, Shadow)
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 à 'Utilitaires (Spacing, Flex, Shadow)' 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.