Bootstrap4 Hilfsprogramme

Bootstrap4 bietet einige Dienstprogramme, mit denen wir die gewünschten Effekte erzielen können, ohne CSS-Code zu schreiben.

Rahmen

Verwenden Sie die Klasseborder, um Rahmen hinzuzufügen oder zu entfernen:

Beispiel

Ausprobieren »

Rahmenfarbe

Bootstrap4 bietet einige Klassen zum Festlegen der Rahmenfarbe:

Beispiel

Ausprobieren »

Rahmenradius

Mit der Klasseroundedlassen sich abgerundete Rahmen hinzufügen:

Beispiel

Ausprobieren »

Float

.float-rightDie Klasse wird verwendet, um das Element nach rechts schweben zu lassen,.float-leftlässt das Element nach links schweben,.clearfixDie Klasse wird verwendet, um Floats zu bereinigen:

Beispiel

<div class="clearfix"> <span class="float-left">Links floaten</span> <span class="float-right">Rechts floaten</span> </div>

Ausprobieren »

Responsive Float-Klassen

Wir können Floats setzen (.float-*-left|right- * kann sm, md, lg oder xl sein); die Richtung hängt von der Bildschirmgröße ab:

Beispiel

<div class="float-sm-right">Nach rechts floaten auf Bildschirmen, die größer als small sind</div><br> <div class="float-md-right">Nach rechts floaten auf Bildschirmen, die größer als medium sind</div><br> <div class="float-lg-right">Nach rechts floaten auf Bildschirmen, die größer als large sind</div><br> <div class="float-xl-right">Nach rechts floaten auf Bildschirmen, die größer als extra large sind</div><br> <div class="float-none">Kein Float</div>

Ausprobieren »

Zentrierte Ausrichtung

Verwenden Sie.mx-auto-Klasse, um die Zentrierung festzulegen:

Beispiel

<div class="mx-auto bg-warning" style="width:150px">Zentriert</div>

Ausprobieren »

Width

Verwenden Sie w-*-Klassen für Elemente (.w-25, .w-50, .w-75, .w-100, .mw-100), um die Breite festzulegen:

Beispiel

<div class="w-25 bg-warning">Breite 25%</div> <div class="w-50 bg-warning">Breite 50%</div> <div class="w-75 bg-warning">Breite 75%</div> <div class="w-100 bg-warning">Breite 100%</div> <div class="mw-100 bg-warning">Maximale Breite 100%</div>

Ausprobieren »

Height

Verwenden Sie h-* Klassen für Elemente (.h-25, .h-50, .h-75, .h-100, .mh-100), um die Höhe festzulegen:

Beispiel

<div style="height:200px;background-color:#ddd"> <div class="h-25 bg-warning">Höhe 25%</div> <div class="h-50 bg-warning">Höhe 50%</div> <div class="h-75 bg-warning">Höhe 75%</div> <div class="h-100 bg-warning">Höhe 100%</div> <div class="mh-100 bg-warning" style="height:500px">Maximale Höhe 100%</div> </div>

Ausprobieren »

Abstände

Die Syntax für Abstände ist wie folgt:

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)

Breakpoints beziehen sich auf Bildschirmbreiten: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px).

propertysteht für die Eigenschaft, einschließlich:

m- dient zum Festlegenmargin
p- dient zum Festlegenpadding

sidesbezieht sich hauptsächlich auf die Richtung:

t- dient zum Festlegenmargin-topoderpadding-top
b- dient zum Festlegenmargin-bottomoderpadding-bottom
l- dient zum Festlegenmargin-leftoderpadding-left
r- dient zum Festlegenmargin-rightoderpadding-right
x- dient zum Festlegen*-leftund*-right
y- dient zum Festlegen*-topund*-bottom
leer - dient zum Festlegen des Elements in vier Richtungenmarginoderpadding

sizebezieht sich auf die Größe des Abstands:

0- setztmarginoderpaddingist0
1- setztmarginoderpaddingist$spacer * .25
2- setztmarginoderpaddingist$spacer * .5
3- setztmarginoderpaddingist$spacer
4- setztmarginoderpaddingist$spacer * 1.5
5- setztmarginoderpaddingist$spacer * 3
auto- setztmarginauf auto

marginmarginSie können negative Zahlen festlegen, indem Sie einen Buchstaben vor die Zahl setzen."n" :

n1- margin auf -.25rem setzen (-4px, wenn font-size 16px ist)
n2- margin auf -.5rem setzen (-8px, wenn font-size 16px ist)
n3- margin auf -1rem setzen (-16px, wenn font-size 16px ist)
n4- margin auf -1.5rem setzen (-24px, wenn font-size 16px ist)
n5- margin auf -3rem setzen (-48px, wenn font-size 16px ist)

Siehe die Quellcode-Einstellungen für einige Margins:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Beispiel

<div class="mx-auto" style="width: 200px;">Das Element zentrieren</div> <form > <div class="form-row"> <div class="form-group"> <label for="text" class="mt-2">Setze margin-top:</label> <input type="text" class="form-control" id="text" placeholder="email"> <label for="color" class="mt-2">Farben:</label> <input type="color" id="color" class="form-control" style="width: 60px;padding: 4px;" autocomplete="off" value="#656565"> </div> </div> </form>

Ausprobieren »

Weitere Beispiele

`.m-# / m-*-#`	Außenabstände auf allen Seiten festlegen	Ausprobieren
`.mt-# / mt-*-#`	Außenabstand oben	Ausprobieren
`.mb-# / mb-*-#`	Außenabstand unten	Ausprobieren
`.ml-# / ml-*-#`	Außenabstand links	Ausprobieren
`.mr-# / mr-*-#`	Außenabstand rechts	Ausprobieren
`.mx-# / mx-*-#`	Margin links und rechts	Ausprobieren
`.my-# / my-*-#`	Margin oben und unten	Ausprobieren
`.p-# / p-*-#`	Verwenden Sie Seiten, um Padding festzulegen	Ausprobieren
`.pt-# / pt-*-#`	Padding oben	Ausprobieren
`.pb-# / pb-*-#`	Padding unten	Ausprobieren
`.pl-# / pl-*-#`	Padding links	Ausprobieren
`.pr-# / pr-*-#`	Padding rechts	Ausprobieren
`.py-# / py-*-#`	Padding oben und unten	Ausprobieren
`.px-# / px-*-#`	Padding links und rechts	Ausprobieren

Weitere Erweiterungen