Bootstrap 5-Nützliche Werkzeuge

Utilities / Helper-Klassen

Bootstrap 5 verfügt über viele Utility/Helper-Klassen, mit denen Elementstile ohne CSS-Code schnell eingestellt werden können.

Rahmen

Fügt oder entfernt Rahmen mit Rahmenklassen hinzu:

Beispiel

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Probieren Sie es selbst aus

Umrandungsbreite

Verwendung .border-1 bis .border-5 Verändern Sie die Breite der Umrandung durch folgende Werte:

Beispiel

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Probieren Sie es selbst aus

Umrandungsfarbe

Fügen Sie einer Umrandung Farbe hinzu, indem Sie eine beliebige Kontextumrandungsfarbeklasse verwenden:

Beispiel

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Probieren Sie es selbst aus

Ecken der Umrandung

Verwendung abgerundet Elemente mit abgerundeten Ecken hinzufügen:

Beispiel

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Probieren Sie es selbst aus

Floaten und Aufheben des Floatens

Verwendung .float-end Klasse zum Rechtsfloaten von Elementen oder verwenden Sie .float-start Nach links floaten und verwenden Sie .clearfix Klasse zum Aufheben des Floatens:

Beispiel

<div class="clearfix">
  <span class="float-start">Nach links floaten</span>
  <span class="float-end">Nach rechts floaten</span>
</div>

Probieren Sie es selbst aus

Responsives Floaten

Elemente links oder rechts ausrichten, die sich an die Bildschirmbreite anpassen, verwenden Sie die responsiven Float-Klassen (.float-*-left|right)，wobei * ist:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Beispiel

<div class="float-sm-end">Auf kleinen oder breiteren Bildschirmen nach rechts floaten</div><br>
<div class="float-md-end">Auf mittleren oder breiteren Bildschirmen nach rechts floaten</div><br>
<div class="float-lg-end">Auf großen oder breiteren Bildschirmen nach rechts floaten</div><br>
<div class="float-xl-end">Auf großen oder breiteren Bildschirmen nach rechts floaten</div><br>
<div class="float-xxl-end">Auf großen oder breiteren Bildschirmen nach rechts floaten</div><br>
<div class="float-none">Keine Float-Ausrichtung</div>

Probieren Sie es selbst aus

Zentriert ausrichten

Verwendung .mx-auto Zentrierte Elemente (fügen Sie margin-left und margin-right: auto hinzu):

Beispiel

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

Probieren Sie es selbst aus

宽度

使用 w-* 类（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）设置元素的宽度：

Beispiel

<div class="w-25 bg-warning">宽度 25%</div>
<div class="w-50 bg-warning">宽度 50%</div>
<div class="w-75 bg-warning">宽度 75%</div>
<div class="w-100 bg-warning">宽度 100%</div>
<div class="w-auto bg-warning">自动宽度</div>
<div class="mw-100 bg-warning">最大宽度 100%</div>

Probieren Sie es selbst aus

高度

使用 h-* 类（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）设置元素的高度：

Beispiel

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">高度 25%</div>
  <div class="h-50 bg-warning">高度 50%</div>
  <div class="h-75 bg-warning">高度 75%</div>
  <div class="h-100 bg-warning">高度 100%</div>
  <div class="h-auto bg-warning">自动高度</div>
  <div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
</div>

Probieren Sie es selbst aus

间距

Bootstrap 5 拥有广泛的响应式 margin 和 padding 实用程序类。它们适用于所有断点：

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

这些类的使用格式为：{Eigenschaft}{Seiten}-{Größe} verwendet xs， sowie {Eigenschaft}{Seiten}-{breakpoint}-{Größe} verwendet sm、md、lg、xl und xxl。

Eigenschaft ist eines der folgenden:

  • m - Setzen Sie Marke
  • p - Setzen Sie Padding

Seiten ist eines der folgenden:

  • t - Setzen Sie oberer Abstand oder oberer Abstand
  • b - Setzen Sie unterer Abstand oder untener Abstand
  • s - Setzen Sie linker Abstand oder linker Abstand
  • e - Setzen Sie rechter Abstand oder rechter Abstand
  • x - Gleichzeitig setzen linker Abstand und rechter Abstand oder linker Abstand und rechter Abstand
  • y - Gleichzeitig setzen oberer Abstand und untener Abstand oder oberer Abstand und unterer Abstand
  • leer - Auf allen vier Seiten des Elements setzen Marke oder Padding

Größe ist eines der folgenden:

  • 0 - Setzen Sie Marke oder Padding setzen auf 0
  • 1 - Setzen Sie Marke oder Padding setzen auf .25rem
  • 2 - Setzen Sie Marke oder Padding setzen auf .5rem
  • 3 - Setzen Sie Marke oder Padding setzen auf 1rem
  • 4 - Setzen Sie Marke oder Padding setzen auf 1.5rem
  • 5 - Setzen Sie Marke oder Padding setzen auf 3rem
  • auto - Setzen Sie Marke auf auto setzen

Beispiel

<div class="pt-4 bg-warning">Ich habe nur oberen Innenabstand (1.5rem)</div>
<div class="p-5 bg-success">Ich habe an allen Seiten Innenabstand (3rem)</div>
<div class="m-5 pb-5 bg-info">Ich habe an allen Seiten und unteren Innenabstand (3rem)</div>

Probieren Sie es selbst aus

weitere Abstandsbeispiele

.m-# / m-*-# Außenabstand an allen Seiten Versuchen Sie es aus
.mt-# / mt-*-# oben Außenabstand Versuchen Sie es aus
.mb-# / mb-*-# unten Außenabstand Versuchen Sie es aus
.ms-# / ms-*-# links Außenabstand Versuchen Sie es aus
.me-# / me-*-# rechts Außenabstand Versuchen Sie es aus
.mx-# / mx-*-# links und rechts Innenabstand Versuchen Sie es aus
.my-# / my-*-# oben und unten Außenabstand Versuchen Sie es aus
.p-# / p-*-# Innenabstand an allen Seiten (Füllung) Versuchen Sie es aus
.pt-# / pt-*-# oben Innenabstand Versuchen Sie es aus
.pb-# / pb-*-# unten Innenabstand Versuchen Sie es aus
.ps-# / ps-*-# links Innenabstand Versuchen Sie es aus
.pe-# / pe-*-# rechts Innenabstand Versuchen Sie es aus
.py-# / py-*-# oben und unten Innenabstand Versuchen Sie es aus
.px-# / px-*-# links und rechts Innenabstand Versuchen Sie es aus

Sie können in unseren CSS-Einheiten-Referenzhandbuch Lesen Sie mehr über rem und verschiedene Größenheiten im Artikel.

Schatten

Verwenden Sie shadow- Klasse zur Hinzufügung von Schatten an Elemente:

Beispiel

<div class="shadow-none p-4 mb-4 bg-light">keine Schatten</div>
<div class="shadow-sm p-4 mb-4 bg-white">Kleiner Schatten</div>
<div class="shadow p-4 mb-4 bg-white">Standard Schatten</div>
<div class="shadow-lg p-4 mb-4 bg-white">Große Schatten</div>

Probieren Sie es selbst aus

vertikale Ausrichtung

Verwenden Sie align- Klassen ändern die Ausrichtung von Elementen (nur für inline, inline-block, inline-table und Tabellenzellen):

Beispiel

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Probieren Sie es selbst aus

Seitenverhältnis

Erstellen Sie responsives Video oder Diashow basierend auf der Breite des übergeordneten Elements.

Fügen Sie .ratio Klassen und das von Ihnen gewählte Seitenverhältnis .aspect-ratio-* Fügen Sie sie dem übergeordneten Element hinzu und fügen Sie in es ein (Video oder iframe):

Beispiel

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Probieren Sie es selbst aus

Sichtbarkeit

Verwendung .visible oder .invisible Klassen können die Sichtbarkeit von Elementen steuern:

Anmerkung:Diese Klassen ändern den CSS Display-Wert nicht. Sie fügen nur hinzu visibility:visible oder visibility: hidden;

Beispiel

<div class="visible">Ich bin sichtbar.</div>
<div class="invisible">Ich bin unsichtbar.</div>

Probieren Sie es selbst aus

Schließungssymbol

Verwendung .btn-close Klassen können das Stil des Schließungssymbols festlegen. Sie werden in Warnfenstern und Modalen verwendet.

Beispiel

<button type="button" class="btn-close"></button>

Probieren Sie es selbst aus

Screenreader

Verwendung .visually-hidden Klassen können Elemente auf allen Geräten verstecken, außer für Screenreader:

Beispiel

<span class="visually-hidden">Ich werde auf allen Bildschirmen außer für Screenreader versteckt sein.</span>

Probieren Sie es selbst aus

Farben

Wie im Kapitel "Farben" beschrieben, finden Sie unten eine Liste aller Text- und Hintergrundfarbeklassen:

Klassen für Textfarben sind:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(Standardfarbe des Körpers / in der Regel schwarz)
  • .text-light

Beispiel

Probieren Sie es selbst aus

Kontexttextklassen können auch für Links verwendet werden:

Beispiel

Probieren Sie es selbst aus

Sie können auch die Klassen .text-black-50 oder .text-white-50 verwenden, um 50% Transparenz für schwarzen oder weißen Text hinzuzufügen:

Beispiel

Probieren Sie es selbst aus

Hintergrundfarbe

Klassen für Hintergrundfarben sind:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Bitte beachten Sie, dass die Hintergrundfarbe die Textfarbe nicht einstellt, daher müssen Sie sie in einigen Fällen mit .text-* Klassen können gemeinsam verwendet werden.

Beispiel

Probieren Sie es selbst aus