Kursplan

Bootstrap 5-Tutorials

• BS5-Tutorial
• BS5-Einführung
• BS5-Container
• BS5-Grid-Grundlagen
• BS5-Typografie
• BS5-Farbe
• BS5-Tabelle
• BS5-Bild
• BS5-Jumbotron
• BS5-Warnungsfeld
• BS5-Button
• BS5-Buttongruppe
• BS5-Medaille
• BS5-Fortschrittsbalken
• BS5-Loader
• BS5-Seitennummerierung
• BS5-Listengruppe
• BS5-Karte
• BS5-Dropdown-Menü
• BS5-Klappliste
• BS5-Navigation
• BS5-Navigationsleiste
• BS5-Slider
• BS5-Modal
• BS5-Tooltip
• BS5-Dialogfeld
• BS5-Toast
• BS5-Scrollspy
• BS5-Offcanvas
• BS5-Praktische Werkzeuge
• BS5-Flex

Bootstrap 5-Formulare

• BS5-Formulare
• BS5- Auswahlmenü
• BS5-Kontrollkästchen und Radio-Buttons
• BS5-Bereich
• BS5-Eingabegruppe
• BS5-Schwimmende Etiketten
• BS5-Formularvalidierung

Bootstrap 5-Gitter

• BS5-Grid-System
• BS5-Stapel/Horizontal
• BS5-Grid-XSmall
• BS5-Grid-Small
• BS5-Grid-Medium
• BS5-Grid-Large
• BS5-Grid-XLarge
• BS5-Grid-XXL
• BS5-Grid-Beispiel

Andere Bootstrap 5

• BS5-Basisvorlage
• BS5-Test

Wahlpflichtkurse

Empfohlene Kurse:

• CodeW3C.com-Bastelkiste

Flexbox

Der größte Unterschied zwischen Bootstrap 3 und Bootstrap 4 & 5 liegt darin, dass Bootstrap 5 jetzt Flexbox anstelle von Floats für das Layout verwendet.

flexiblen Box-Layout-Modul einfacher elastische responsive Layout-Strukturen gestalten, ohne Floats oder Positioning zu verwenden.

Falls Sie mit Flex nicht vertraut sind, können Sie in unserem CSS Flexbox-Tutorial lernen.

Anmerkung:Flexbox wird in IE9 und früheren Versionen nicht unterstützt.

Anmerkung:Falls Sie Unterstützung für IE8-9 benötigen, verwenden Sie Bootstrap 3. Es ist die stabilste Bootstrap-Version und das Team unterstützt sie weiterhin bei kritischen Fehlerbehebungen und Dokumentänderungen. Es werden jedoch keine neuen Funktionen hinzugefügt.

Beispiel

Um einen Flexbox-Container zu erstellen und direkte Kinder in Flex-Elemente zu verwandeln, verwenden Sie bitte d-flex Klasse:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 bg-primary">Flex-Projekt 3</div>
</div>

Probieren Sie es selbst aus

Beispiel

Um einen Inline Flexbox-Container zu erstellen, verwenden Sie bitte d-inline-flex Klasse:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 bg-primary">Flex-Projekt 3</div>
</div>

Probieren Sie es selbst aus

Horizontale Richtung

Verwende .flex-row Horizontale ( nebeneinander liegende ) Anzeige von elastischen Elementen. Dies ist die Standardeinstellung.

Hinweis:Verwenden .flex-row-reverse Kann horizontal rechtsbündig sein:

Beispiel

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 bg-primary">Flex-Projekt 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 bg-primary">Flex-Projekt 3</div>
</div>

Probieren Sie es selbst aus

Vertikale Richtung

Verwende .flex-column Vertikal anzeigen von flex-Elementen (übereinander gestapelt), oder verwenden .flex-column-reverse Die senkrechte Richtung umkehren:

Beispiel

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 bg-primary">Flex-Projekt 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 bg-primary">Flex-Projekt 3</div>
</div>

Probieren Sie es selbst aus

Inhalt ausrichten

Verwenden .justify-content-* Klassen können die Ausrichtung der elastischen Elemente ändern. Gültige Klassen sind:

• start(Standard)
• end
• center
• between
• around

Beispiel

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Probieren Sie es selbst aus

Gleiche Breite

Verwenden Sie auf Flex-Projekten .flex-fill Man kann sie gezwungen, gleich breit zu sein:

Beispiel

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Elastisches Element 1</div>
  <div class="p-2 bg-warning flex-fill">Elastisches Element 2</div>
  <div class="p-2 bg-primary flex-fill">Elastisches Element 3</div>
</div>

Probieren Sie es selbst aus

Ausdehnen

Verwenden Sie auf Flex-Projekten .flex-grow-1 Der zusätzliche Raum kann genutzt werden. In den folgenden Beispielen nehmen die ersten beiden flex-Elemente den erforderlichen Raum ein, während das letzte Element den verbleibenden verfügbaren Raum einnimmt:

Beispiel

<div class="d-flex">
  <div class="p-2 bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flex-Projekt 3</div>
</div>

Probieren Sie es selbst aus

Hinweis:Verwenden Sie auf Flex-Projekten .flex-shrink-1 kann es notwendig machen, sich zu verkleinern.

Reihenfolge

Verwenden .order Klassen können die visuelle Reihenfolge eines bestimmten Flex-Elements ändern. Gültige Klassen reichen von 0 bis 5, wobei die niedrigsten Nummern die höchste Priorität haben (order-1 wird vor order-2 angezeigt, und so weiter):

Beispiel

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flex-Projekt 1</div>
  <div class="p-2 bg-warning order-2">Flex-Projekt 2</div>
  <div class="p-2 bg-primary order-1">Flex-Projekt 3</div>
</div>

Probieren Sie es selbst aus

Automatische Außenabstände

Verwenden .ms-auto（Projekte nach rechts schieben）oder verwenden .me-auto（Projekte nach links schieben）Es ist einfach, automatische Ränder für Flex-Projekte hinzuzufügen:

Beispiel

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 bg-primary">Flex-Projekt 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Flex-Projekt 1</div>
  <div class="p-2 bg-warning">Flex-Projekt 2</div>
  <div class="p-2 me-auto bg-primary">Flex-Projekt 3</div>
</div>

Probieren Sie es selbst aus

Zeilenumbruch

durch .flex-nowrap（Standard）、.flex-wrap oder .flex-wrap-reverse, um zu steuern, wie Flex-Projekte in Flex-Containern verpackt werden.

Beispiel

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

Probieren Sie es selbst aus

Inhalt ausrichten

Verwende .align-content-* Kontrolliert die vertikale Ausrichtung von flexiblen Projekten. Gültige Klassen sind:

• .align-content-start(Standard)
• .align-content-end
• .align-content-center
• .between-content
• .around-content
• .stretch-content

Anmerkung:Diese Klassen haben keinen Einfluss auf die einzeiligen elastischen Elemente.

Klicken Sie auf den folgenden Button, um die Unterschiede zwischen den fünf Klassen zu sehen, indem Sie die vertikale Ausrichtung der elastischen Elemente im Beispielrahmen ändern:

Beispiel

<div class="d-flex flex-wrap start-content">..</div>
<div class="d-flex flex-wrap end-content">..</div>
<div class="d-flex flex-wrap center-content">..</div>
<div class="d-flex flex-wrap around-content">..</div>
<div class="d-flex flex-wrap stretch-content">..</div>

Probieren Sie es selbst aus

Ausrichten der Elemente

Verwende .align-items-* Klassische KontrolleEinzeiligDie vertikale Ausrichtung der elastischen Elemente. Gültige Klassen sind:

• .start-items
• .end-items
• .center-items
• .baseline-items
• .stretch-items(Standard)

Klicken Sie auf den folgenden Button, um die Unterschiede zwischen den fünf Klassen zu sehen:

Beispiel

<div class="d-flex start-items">..</div>
<div class="d-flex end-items">..</div>
<div class="d-flex center-items">..</div>
<div class="d-flex baseline-items">..</div>
<div class="d-flex stretch-items">..</div>

Probieren Sie es selbst aus

Selbstausrichtung

Verwende .align-self-* Klassische KontrolleBestimme den elastischen ElementDie vertikale Ausrichtung. Gültige Klassen sind:

• .start-self
• .end-self
• .center-self
• .baseline-self
• .stretch-self(Standard)

Klicken Sie auf die folgenden Schaltflächen, um die Unterschiede zwischen den fünf Klassen zu sehen:

Beispiel

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

Probieren Sie es selbst aus

Responsives Flex-Format

Alle elastischen Klassen haben zusätzliche responsive Klassen, was die Auswahl einer bestimmten Flex-Klasse bei bestimmten Bildschirmgrößen erleichtert.

* kann durch sm, md, lg, xl oder xxl ersetzt werden, was für kleine, mittlere, große, sehr große und riesige Bildschirme steht.

Suchen Sie eine bestimmte elastische Klasse ..

Werkzeugkasten

JavaScript-Test

Sponsorenlinks