Ce tutoriel Bootstrap 5 vous explique comment écrire les classes bootstrap pour gérer les marges internes (padding) et externes (margin).
>> Les classes utilitaires : les bordures
Dans ce tutoriel vidéo dédié à notre formation sur Bootstrap, nous allons plonger dans les détails des marges internes et externes, explorant ainsi la façon dont Bootstrap organise les éléments sur une page. Si vous débutez tout juste avec nous, je vous encourage à consulter la playlist complète pour suivre cette formation du début. Assurez-vous également de vous abonner pour ne pas manquer les prochaines vidéos de cette série.
Comprendre les Marges et les Espacements
Dans cette session, nous avons créé un fichier nommé « marge.html » et installé Bootstrap pour notre projet. Nous commençons par ajouter du contenu à notre page, en commençant par un simple paragraphe. Pour rendre les éléments plus visibles, nous appliquons une classe de couleur, en utilisant ici « bg-primary ».
Bootstrap offre un moyen simple de gérer les marges et les espacements en utilisant des classes prédéfinies. Pour ajouter une marge externe, nous utilisons des classes commençant par « M », suivies d’un indicateur pour spécifier la direction de la marge (par exemple, « T » pour le haut, « S » pour le début – gauche, « E » pour la fin – droite, « B » pour le bas). Les valeurs numériques de 0 à 5 contrôlent l’espace ajouté.
Application Pratique
En expérimentant avec différentes valeurs, nous ajustons les marges pour obtenir l’apparence souhaitée. Par exemple, pour ajouter une marge de 2 vers le haut, nous utilisons la classe « mt-2 ». De même, pour ajouter une marge de 3 vers la gauche, nous utilisons « ms-3 ».
Bootstrap simplifie également la gestion des marges horizontales et verticales en introduisant les classes « MX » et « MY ». Par exemple, « mx-3 » ajoutera une marge de 3 à gauche et à droite, tandis que « my-5 » ajoutera une marge de 5 en haut et en bas.
Gérer les Espacements Internes
En plus des marges externes, Bootstrap offre un contrôle similaire sur les espacements internes en utilisant des classes commençant par « P » pour padding. Les principes sont similaires à ceux des marges externes.
Conclusion
En résumé, Bootstrap fournit des outils simples, mais puissants pour gérer les marges et les espacements dans vos projets web. En comprenant les différentes classes disponibles et en expérimentant avec les valeurs, vous pouvez contrôler efficacement la mise en page de votre contenu. N’oubliez pas de consulter la documentation officielle de Bootstrap pour une référence détaillée sur ces fonctionnalités.
C’est tout pour cette leçon sur les marges et les espacements avec Bootstrap. Nous espérons que cela vous a été utile et nous vous donnons rendez-vous dans notre prochaine vidéo pour continuer notre exploration de ce framework populaire. À bientôt !
