codestory

Die Anleitung zu Bootstrap Spacing Utility

View more Tutorials:

1- Spacing Utility

Spacing Utility  ist ein Teil im Bootstrap, das die Klasse gibt, damit der Benutzer die Wert von margin, padding für die Elemente setzt. Diese Klasse ist freundlich mit der Geräten mit der unterschiedlichen Bildschirmsgröße
Im Grunde haben die Klasse den Name in die folgenden Format:
  • {property}{sides}-{size}

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

Davon:
  • {property} und {size} sind die zwanghafte Wert.
  • {sides} und {breakpoint} sind unzwanghaft.

{property}:

{property} hat die Wert  "m" oder "p".
{property}Die Bezeichnung
mDas ist die Abkürzung vom "Margin", das die Einstellung von margin für Element betrifft.
pDas ist die Abkürzung vom  "Padding", das die Einstellung von padding für Element betrifft.

{sides}:

{sides}Mô tả
tDas ist die Abkürzung vom "Top", das die Einstellung von margin-top oder padding-top betrifft
bDas ist die Abkürzung vom  "Bottom", das die Einstellung von margin-bottom oder padding-bottom betriff
lDas ist die Abkürzung vom  "Left", das die Einstellung von  margin-left oder padding-left  betrifft
rDas ist die Abkürzung vom  "Right", das die Einstellung von  margin-right oder padding-right betrifft
xDie X Achse andeuten (horizontal), das die Einstellung von margin-left & margin-right oder padding-left & padding-right betrifft
yDie Y Achse andeuten (vertikal), das die Einstellung von margin-top & margin-bottom oder padding-top & padding-bottom betrifft

{size}:

{size}Die Bezeichnung
0Die Wert für padding oder margin in 0 stellen.
1Die Wert für padding oder margin in  0.25 * $spacer stellen
2Die Wert für padding oder margin in  0.5 * $spacer ​​​​​​​stellen.
3Die Wert für padding oder margin in  1 * $spacer ​​​​​​​stellen.
4Die Wert für padding oder margin in  1.5 * $spacer ​​​​​​​stellen.
5Die Wert für padding oder margin in  3 * $spacer ​​​​​​​stellen.
autoDie Wert für margin in auto ​​​​​​​stellen.
$spacer ist eine bereit definierte Definition in SASS vom Bootstrap. Diese Wert kann für die Geräten mit den verschiedenen Bildschirmsbreite unterschiedlich sein

{breakpoint}

{breakpoint}Die Bezeichnung
smfunktionieren wenn die Breite des Vater-Element  >= 567px ist.
mdfunktionieren wenn die Breite des Vater-Element >= 768px ist.
lgfunktionieren wenn die Breite des Vater-Element  >= 992px ist.
xlfunktionieren wenn die Breite des Vater-Element  >= 1200px ist.​​​​​​​

2- Die Beispiele

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>
Wenn ein Element wird rechte und linke Auto margin gemacht, wird es in der Mittel des Vater-Element in die horizontale Richtung erscheinen
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>

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.