Le spacing est un outil très pratique de Bootstrap qui vous permet d’insérer directement dans une balise la marge souhaitée par le biais d’une classe, et vous évite de faire des allers-retours incessants entre votre feuille de style et le fichier HTML.
Depuis son apparition dans la quatrième version de Bootstrap, il épate les utilisateurs par sa simplicité et surtout par sa facilité d’utilisation.
Si c’est votre première fois de découvrir cet outil Bootstrap, ou vous le connaissez, mais sans savoir l’utiliser, ne vous inquiéter pas.
Car à la fin de ce tutoriel, non seulement vous allez savoir l’utiliser, mais aussi il vous sera difficile de vous en passer de cet outil lors de vos prochaines réalisations.
Fonctionnement du spacing de Bootstrap
LA SUITE APRÈS CETTE PUBLICITÉ
Comme je vous l’expliquais dans le premier paragraphe, tout se passe au sein de la balise de l’élément auquel vous souhaitez appliquer la marge.
Il vous faut insérer dans la balise, la classe correspondante à la marge que vous voulez appliquer.
Cette classe se constitue selon ces éléments : {Périphérie}{direction}-{taille}.
Périphérie :
Pour définir l’élément périphérie, on utilise soit la lettre m ou la lettre p.
m désigne la marge externe tandis que la lettre p lui désigne la marge interne.
Direction :
La direction lui permet de cibler l’endroit où la marge doit être appliquée.
Voici la liste des directions possibles :
- t(top)=désigne le haut de l’élément
- b(bottom)=désigne le bas de l’élément
- r(right)=désigne la droite de l’élément
- l(left)=désigne la gauche de l’élément
- x(horizontal)=désigne la droite et la gauche de l’élément
- y(vertical)=désigne le haut et le bas de l’élément
- quand vous ne signifiez rien, alors la marge est appliquée à tous els compartiment de l’élément.
La taille :
La taille est définie entre 0et 5.
- 0 correspond à 0rem
- 1 correspond à 0.25rem
- 2 correspond à 0.5rem
- 3 correspond à 1rem
- 4 correspond à 1.5rem
- 5 correspond à 3rem
Le rem est une unité qui rend proportionnelle une taille par rapport à la taille du texte à la racine du document
Exemple :
- mt-3 = correspond à une marge externe de 1rem au compartiment nord de l’élément
- px-2 = correspond à une marge interne de 0.5rem à droite et à gauche de l’élément
Définissez la marge en fonction de l’écran d’affichage :
Bootstrap vous offre la possibilité de jongler avec les marges en fonction de différent type d’écran.
‘’Bien avant de continuer, je vous invite à redécouvrir comment Bootstrap a défini les différents contextes en fonction des types d’écran dans sa documentation officielle sur les breakpoints ou dans mon tutoriel sur la grille de Bootstrap ‘’
Pour spécifier le type d’écran sur lequel la marge doit être appliquée à l’élément, il faut insérer le suffixe correspondant au type d’écran juste avant la taille.
Exemple :
- mb-lg-2 = correspond à une marge externe de 0.5rem à l’élément sur les écrans larges, c’est-à-dire les écrans dont leurs tailles sont supérieures ou égales à 992px
- p-md-5 = correspond à une marge interne de 3rem à l’élément sur les écrans de taille moyenne
Bootstrap avec son outil spacing nous permet de gagner du temps et d’alléger les codes de nos applis web. Essayer-le et découvrez à quel point il est pratique et vous fait gagner de précieux temps. Si vous désirez en savoir plus sur le spacing de Bootstrap, consultez la documentation officielle de Bootstrap en cliquant ici.
Divi, numéro 1 des thèmes WordPress, il totalise près d’1.000.000 de téléchargements.
Il inclut les éléments suivants :