Share
In diesem Tutorial zeige ich Ihnen, wie Sie mit den responsiven Flexbox-Dienstprogrammen von Bootstraps 4 schnell Layouts erstellen. Um diese Dienstprogramme besser zu verstehen, werden wir vier verschiedene Beispiele untersuchen.
Hinweis: Dieses Tutorial setzt voraus, dass Sie mit Bootstrap 4 und Flexbox vertraut sind. Schauen Sie sich diese Kurse an, um Sie in die richtige Richtung zu bringen.
Bevor wir unsere Beispiele durchgehen, werfen wir einen Blick auf die Medienabfragen von Bootstrap. Das Framework definiert fünf pixelbasierte Haltepunkte für Rasterspalten, die in der folgenden Tabelle gezeigt werden:
| Bildschirm | Größe des Ansichtsfensters | Klassenpräfix |
|---|---|---|
| Extra klein | < 576px | .col- * |
| Klein | ≥ 576px | .col-sm- * |
| Mittel | ≥ 768px | .col-md- * |
| Groß | ≥ 992px | .col-lg- * |
| Extra groß | ≥ 1200px | .col-xl- * |
Runter zum Geschäft! Im ersten Beispiel ist es unser Ziel, den Inhalt innerhalb eines Abschnitts horizontal und vertikal zu zentrieren:
Hier ist unser HTML:
Beachten Sie, dass wir eine Reihe von Flexbox-Klassen von Bootstrap verwendet haben. Zum Beispiel bezeichnen wir das als Sektion Element ist ein Flexcontainer, indem es das gibt d-flex Klasse. Darüber hinaus zentrieren Sie den Inhalt der .Reihe Element (standardmäßig ein Flex-Container) in beiden Richtungen verwenden wir das Ausrichtungsgegenstände zentrieren und Rechtfertigen-Inhalts-Center Klassen.
Hier ist das zugehörige CSS:
Abschnitt min-height: 70vh; Hintergrundfarbe: rgba (86,61,124, 0,15);
Und die Codepen-Demo:
Im zweiten Beispiel ist es unser Ziel, das folgende Layout mit Blöcken zu erstellen, die Text enthalten, der am unteren und oberen Rand des Blocks angeordnet ist.
Dies ist das gewünschte Layout für große Bildschirme (wenn die Breite des Ansichtsfensters ≥ 1200px ist). Überprüfen Sie die Demo und passen Sie die Größe des Browser-Fensters an, um zu sehen, wie sich das Layout bei kleineren Bildschirmgrößen ändert.
Wir beginnen mit diesem typischen Bootstrap-Markup:
……………
Zunächst konzentrieren wir uns auf das Markup, das das Layout für den Inhalt der Spalten festlegt. In jede unserer Spalten fügen wir die folgenden Markierungen hinzu:
……
Im obigen Code haben wir wieder eine Reihe von in Bootstrap integrierten Klassen für die Flexbox verwendet:
Accentsconagua
d-flex: Um einen Flex-Container zu erstellen, verwandeln Sie direkte untergeordnete Elemente in Flex-ElementeFlex-Säule: Um eine vertikale Richtung festzulegenAusrichten-Elemente-Ende: Flex-Elemente am Ende der x-Achse (in diesem Fall aufgrund der Spaltenrichtung) ausrichtenbegründen-Inhalt-dazwischen: um die Elemente mit gleichem Abstand zwischen zu rechtfertigenDas für unser Layout benötigte CSS:
Körper Rand oben: 30px; a, a: hover Farbe: # 212529; a: hover Textdekoration: keine; .block height: 350px; Hintergrund: rgba (86,61,124, 0,15); Rand unten: 30px; .label font-size: .85rem; Schriftdicke: fett;
Die Codepen-Demo:
Lassen Sie uns nur zum Üben zwei Minuten lang überlegen, um das gleiche Layout für den Inhalt der Spalten zu erreichen.
Zuerst entfernen wir das begründen-Inhalt-dazwischen Klasse aus dem Link und fügen Sie die mb-auto Klasse zum Element mit der Klasse von .Etikette. Alternativ hätten wir das auch ändern können .Beschreibung Element, indem Sie ihm die Klasse von geben mt-auto.
Das aktualisierte HTML:
……
Schauen wir uns noch einmal die Demo an:
Das Ergebnis sieht gleich aus, richtig?
Für einen zweiten Versuch könnten wir einige Zeilen unseres Markups durch diesen neuen Code ersetzen:
……
An dieser Stelle überprüfen wir die aktualisierte Demo:
Wieder einmal ist das generierte Layout genau das, was wir wollen!
Im dritten Beispiel beginnen wir mit einem Layout, das dem vorherigen Beispiel ähnlich ist. Unser Ziel ist es, die Reihenfolge der dritten und vierten Spalte in Abhängigkeit von der Größe des Ansichtsfensters zu ändern.
Wenn das Ansichtsfenster mindestens 1200 Pixel breit ist, sollte die Reihenfolge der Spalten folgendermaßen lauten:
In allen anderen Fällen ändert sich die Reihenfolge der Spalten. Das dritte Element sollte nach dem vierten Element kommen:
Das Markup, das das Rasterlayout definiert:
……………
Beachten Sie die Auftrag-* Klassen, die in der dritten, vierten und fünften Spalte erscheinen.
Wenn Sie die Reihenfolge der dritten und vierten Spalte ändern möchten, müssen Sie auch die Reihenfolge für die fünfte Spalte angeben. Wenn wir dies nicht tun, folgt die letzte Spalte immer der zweiten.
In jeder der Spalten zentrieren wir den Inhalt in beide Richtungen mit den folgenden bekannten Dienstprogrammklassen:
Hier ist das zugehörige CSS:
Körper Rand oben: 30px; .block height: 250px; Farbe: # 212529; Hintergrund: rgba (86,61,124, 0,15); Rand unten: 30px;
Und natürlich die Codepen-Demo:
Im letzten Beispiel ist es unser Ziel, einen responsiven Header zu erstellen.
Wenn das Browserfenster mindestens 768px breit ist, sollte der Header so aussehen:
Auf kleineren Bildschirmen ändert sich das Layout wie folgt:
Um das Menü anzuzeigen, klicken wir auf die Schaltfläche in der rechten Ecke.
Unser HTML sieht so aus:
In diesem Fall verwenden wir eine Kombination aus benutzerdefinierten Klassen zusammen mit den Bootstrap-Klassen.
Danke an die ml-auto Klasse verschieben wir die zweite Liste in die rechte Ecke des übergeordneten Containers.
Ein Teil des erforderlichen CSS wird unten gezeigt:
.Nav-Top Hintergrund: Rgba (86, 61, 124, 0,15); .container-fluid max-width: 1200px; .list-top margin-left: 50px; .list li: nicht (: letztes Kind) margin-right: 15px; .list li a color: rgba (0, 0, 0, 0,5); Übergang: Farbe 0,2 s; .list li a: hover color: rgba (0, 0, 0, 0,7); Textdekoration: keine; @media screen und (max-width: 767px) .list-top position: absolut; oben: 70px; links: 0; rechts: 0; transform: translateX (-100%); Rand links: 0; Polsterung: 1rem; Übergang: 0,3s transformieren; .nav-top.is-active .list-top transform: none; .list-top li flex-grow: 1;
Hier ist das JavaScript, das für die Umschaltung der Sichtbarkeit des mobilen Menüs verantwortlich ist:
const toggleMenu = document.querySelector (". toggle-menu"); const navTop = document.querySelector (". nav-top"); toggleMenu.addEventListener ("click", () => navTop.classList.toggle ("is-active"););Und die letzte Demo:
In diesem ausführlichen Lernprogramm haben wir vier Beispiele aus der Praxis behandelt, die die responsiven Flexbox-Dienstprogramme von Bootstrap 4 nutzen. Ich hoffe, es hat Ihnen gefallen, was wir hier gebaut haben, und es hat Sie motiviert, das Erlernte in Ihren nächsten Bootstrap-Projekten anzuwenden.
Wenn Sie Fragen haben, lassen Sie es mich wie folgt wissen.
