Bootstrap - Vertikale Ausrichtung: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, angehende Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von Bootstrap und der vertikalen Ausrichtung zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen sagen, dass das Beherrschen der vertikalen Ausrichtung so ist wie das Fahrradfahren zu lernen - es mag initially schwierig erscheinen, aber wenn Sie den Dreh raus kriegen, werden Sie im Handumdrehen munter vorankommen!

Verständnis der Vertikalen Ausrichtung in Bootstrap

Bevor wir uns den Details widmen, lassen Sie uns einen Moment innehalten, um zu verstehen, was vertikale Ausrichtung überhaupt bedeutet. Stellen Sie sich vor, Sie richten Bücher auf einem Regal an. Manchmal möchten Sie sie alle sauber an der Unterseite ausrichten, andere Male vielleicht zentriert oder sogar an der Oberseite ausgerichtet. Genau das machen wir mit Elementen auf einer Webseite, nur dass wir anstelle von Büchern mit Text, Bildern und anderen Inhalten arbeiten.

Warum Vertikale Ausrichtung Wichtig ist

Vielleicht fragen Sie sich, "Warum sollte ich mir um vertikale Ausrichtung kümmern?" Nun, lassen Sie mich Ihnen eine kleine Geschichte erzählen. Ich hatte einmal einen Schüler, der eine wunderschöne Webseite erstellt hat, aber alle Inhalte waren oben in jedem Abschnitt zusammengequetscht. Es sah aus, als ob die Webseite ihre Hose zu hoch trug! Eine richtige vertikale Ausrichtung kann den Unterschied zwischen einer professionell aussehenden Webseite und einer, die ein bisschen... seltsam aussieht, ausmachen.

Bootstrap's Vertikale Ausrichtungs-Klassen

Bootstrap, unser freundlicher Nachbar-CSS-Framework, bringt eine Reihe von Klassen mit, die die vertikale Ausrichtung zum Kinderspiel machen. Lassen Sie uns diese Klassen und ihre Anwendung ansehen.

Align Items Klassen

Bootstrap bietet Klassen zur Ausrichtung von Elementen innerhalb eines Flex-Containers. Hier ist eine Tabelle dieser Klassen und ihrer Wirkungen:

Klasse	Wirkung
.align-items-start	Ausrichtet Elemente an der Startposition des Containers
.align-items-center	Zentriert Elemente vertikal im Container
.align-items-end	Ausrichtet Elemente an der Endposition des Containers
.align-items-baseline	Ausrichtet Elemente an derBaseline des Containers
.align-items-stretch	Dehnt Elemente aus, um den Container zu füllen (Standard)

Sehen wir uns diese in Aktion mit einigen Codebeispielen an:

<div class="d-flex align-items-start" style="height: 200px;">
<div>Start</div>
<div>Ausgerichtet</div>
<div>Inhalt</div>
</div>

In diesem Beispiel verwenden wir d-flex, um einen Flex-Container zu erstellen, und align-items-start, um die Elemente an der Oberseite des Containers auszurichten. Das style="height: 200px;" gibt unserem Container nur eine Höhe, damit wir die Ausrichtung in Aktion sehen können.

Nun probieren wir, unseren Inhalt zu zentrieren:

<div class="d-flex align-items-center" style="height: 200px;">
<div>Zentriert</div>
<div>Vertikal</div>
<div>Ausgerichtet</div>
</div>

Sehen Sie, wie einfach das war? Wir haben nur start auf center geändert, und jetzt ist unser Inhalt perfekt vertikal zentriert.

Align Self Klassen

Manchmal möchten Sie möglicherweise einzelne Elemente innerhalb eines Containers unterschiedlich ausrichten. Hier kommen die align-self Klassen ins Spiel. Hier ist eine Tabelle dieser Klassen:

Klasse	Wirkung
.align-self-start	Ausrichtet das Element an der Startposition des Containers
.align-self-center	Zentriert das Element vertikal im Container
.align-self-end	Ausrichtet das Element an der Endposition des Containers
.align-self-baseline	Ausrichtet das Element an derBaseline des Containers
.align-self-stretch	Dehnt das Element aus, um den Container zu füllen (Standard)

Sehen wir uns ein Beispiel an:

<div class="d-flex" style="height: 200px;">
<div class="align-self-start">Start</div>
<div class="align-self-center">Zentriert</div>
<div class="align-self-end">Ende</div>
</div>

In diesem Beispiel ist jeder div innerhalb desselben Containers unterschiedlich ausgerichtet. Es ist, als ob drei Bücher auf einem Regal in verschiedenen Höhen stehen!

Vertikale Ausrichtung mit Flexbox-Utilities

Bootstrap's Flexbox-Utilities bieten sogar mehr Kontrolle über die vertikale Ausrichtung. Lassen Sie uns einige davon erkunden.

Justify Content Klassen

Diese Klassen ermöglichen es Ihnen, Elemente entlang der Hauptachse eines Flex-Containers auszurichten. Hier ist eine Tabelle dieser Klassen:

Klasse	Wirkung
.justify-content-start	Ausrichtet Elemente an der Startposition des Containers
.justify-content-center	Zentriert Elemente horizontal im Container
.justify-content-end	Ausrichtet Elemente an der Endposition des Containers
.justify-content-between	Verteilt Elemente gleichmäßig mit Platz dazwischen
.justify-content-around	Verteilt Elemente gleichmäßig mit Platz drumherum

Sehen wir uns ein Beispiel an:

<div class="d-flex justify-content-center" style="height: 200px;">
<div>Zentriert</div>
<div>Horizontal</div>
</div>

Dies wird unseren Inhalt horizontal im Container zentrieren.

Kombination von Vertikaler und Horizontaler Ausrichtung

Jetzt kommt die Magie. Wir können diese Klassen kombinieren, um sowohl vertikale als auch horizontale Ausrichtung zu erreichen. Sehen Sie sich das an:

<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
<div>Perfekt</div>
<div>Zentriert</div>
</div>

Dieser Code erstellt einen Container, in dem der Inhalt sowohl vertikal als auch horizontal perfekt zentriert ist. Es ist wie ein Treffer ins Schwarze beim Darts, aber viel einfacher zu erreichen!

Responsives Ausrichten

Bootstrap wäre nicht Bootstrap ohne Responsivität. Sie können Ihre Ausrichtung responsiv machen, indem Sie Breakpoint-Abkürzungen zu den Klassen hinzufügen. Zum Beispiel:

<div class="d-flex align-items-start align-items-sm-center align-items-md-end" style="height: 200px;">
<div>Responsives</div>
<div>Ausrichten</div>
</div>

Dies wird den Inhalt an der Oberseite auf extra kleinen Geräten ausrichten, auf kleinen Geräten zentrieren und an der Unterseite auf mittelgroßen Geräten und größer ausrichten. Es ist, als ob Ihr Inhalt Yoga macht, sich biegt und streckt, um verschiedene Bildschirmgrößen anzupassen!

Fazit

Und da haben Sie es, meine Freunde! Wir haben die Welt der Bootstrap-vertikalen Ausrichtung durchwandert, von grundlegenden Konzepten bis zu fortgeschrittenen Techniken. Denken Sie daran, Übung macht den Meister. Scheuen Sie sich nicht, mit diesen Klassen zu experimentieren und zu sehen, wie sie Ihre Layouts beeinflussen.

Als wir uns verabschieden, erinnere ich mich an einen Schüler, der mir einmal sagte, dass das Lernen von Bootstrap wie das Lernen einer neuen Sprache ist. Zunächst erschien es ihr beängstigend, aber als sie den Dreh raus bekam, fühlte sie sich in der Lage, ihre Designideen effektiver als je zuvor zu kommunizieren.

Also los, meine jungen Padawan, möge die Kraft der perfekten Ausrichtung mit Ihnen sein! Frohes Coden!

Credits: Image by storyset