devstory

Le Tutoriel de Bootstrap Spacing Utility

1- Spacing Utility

Spacing Utility (Utilité Spacing) est une partie de Bootstrap. Il donne des classes qui permettent aux utilisateurs d'installer des valeurs margin, padding pour des éléments. Ces classes sont adaptées aves des appareils de différente taille de l'écran.
À la base, ces classes sont nommées comme le format ci-dessous :
  • {property}{sides}-{size}

  • {property}{sides}-{breakpoint}-{size}

Alors :
  • {property} et {size} sont des valeurs obligatoires.
  • {sides} et {breakpoint} sont des valeurs facultatives.

{property}:

{property} obtient la valeur "m" ou "p".
{property}Description
mC'est l'abréviation de "Margin", relative à l'installation de margin des éléments.
pC'est l'abréviation de  "Padding", relative à l'installation de padding des éléments.

{sides}:

{sides}Description
tC'est l'abréviation de  "Top",relative à l'installation de margin-top ou padding-top
bC'est l'abréviation de  "Bottom", relative à l'installation de margin-bottom ou padding-bottom
lC'est l'abréviation de  "Left", relative à l'installation de margin-left ou padding-left
rC'est l'abréviation de  "Right", relative à l'installation de margin-right ou padding-right
xIndique l'axe X (Horizontale), relative à l'installation de margin-left & margin-right ou padding-left & padding-right.
yIndique l'axe Y (Verticale), relative à l'installation de margin-top & margin-bottom ou padding-top & padding-bottom.

{size}:

{size}Description
0Définit la valeur de padding ou margin à 0.
1Définit la valeur de  padding hoặc margin à 0.25 * $spacer.
2Définit la valeur de  padding hoặc margin à 0.5 * $spacer.
3Définit la valeur de  padding hoặc margin à 1 * $spacer.
4Définit la valeur de  padding hoặc margin à 1.5 * $spacer.
5Définit la valeur de  padding hoặc margin à 3 * $spacer.
autoDéfinit la valeur de​​​​​​​  margin à auto.
$spacer est une valeur définie dans le SASS de Bootstrap. Cette valeur est variable selon la largeur différente de l'écran.

{breakpoint}

{breakpoint}Description
smfonctionne lorsque la largeur de l'élément parent est >= 567px.
mdfonctionne lorsque la largeur de l'élément parent est  >= 768px.
lgfonctionne lorsque la largeur de l'élément parent est  >= 992px.
xlfonctionne lorsque la largeur de l'élément parent est​​​​​​​  >= 1200px.

2- Des exemples

margin-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Margin Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid border border-primary mt-5">
         <div class="border border-danger mt-5 mr-4 mb-4 ml-auto" style="width:100px;">
           Div
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>

</html>
 
paddingexample
<div class="border border-danger pt-5 pr-4 pb-4 pl-5" style="width:300px;">
   Bootstrap is a free front-end framework for faster and easier web development.
   Bootstrap includes HTML and CSS based design templates for typography ...
</div>
Si un élément est installé margin automatiquement sur la gauche et sur la droite. Il apparaîtra au centre de l'élément parent horizontalement.
center-example
<div class="container-fluid border border-primary mt-5">

   <div class="mx-auto border border-danger" style="width:100px;">
      Center DIV
   </div>

</div>

Responsive:

<div class="container-fluid border border-primary">

   <div class="border border-danger m-1 m-sm-5" style="width:100px;">
      .m-1 .m-sm-5
   </div>

</div>
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.