Bootstrap - Stacks: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Web-Entwickler! Heute tauchen wir in die wundervolle Welt der Bootstrap Stacks ein. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide auf dieser aufregenden Reise sein. Am Ende dieses Tutorials wirst du Elemente wie ein Profi stapeln können!

Was sind Bootstrap Stacks?

Bevor wir loslegen, lassen wir uns über das Konzept von Stacks in Bootstrap unterhalten. Stell dir vor, du baust einen Turm aus Lego-Steinen. Du kannst sie vertikal (einander aufgesetzt) oder horizontal (nebeneinander) stapeln. Bootstrap Stacks funktionieren auf ähnliche Weise, aber anstatt Lego-Steine zu verwenden, ordnen wir HTML-Elemente auf einer Webseite an.

Nun lassen wir uns die beiden Hauptarten von Stacks in Bootstrap ansehen:

Vertikaler Stack

Ein vertikaler Stack ist wie ein Stapel von Pancakes – jedes Element liegt auf dem darunter liegenden. In Bootstrap erstellen wir vertikale Stacks mit der Klasse .vstack.

Grundlegender Vertikaler Stack

Lassen wir mit einem einfachen Beispiel beginnen:

<div class="vstack gap-3">
<div class="p-2">Erstes Element</div>
<div class="p-2">Zweites Element</div>
<div class="p-2">Drittes Element</div>
</div>

In diesem Code:

• Wir erstellen einen Container <div> mit der Klasse vstack.
• gap-3 fügt etwas Abstand zwischen unseren gestapelten Elementen hinzu.
• Jedes Element ist ein <div> mit der Klasse p-2 für die Polsterung.

Wenn du diesen Code ausführst, siehst du drei Kästchen vertikal gestapelt, jedes mit Text. Es ist so einfach!

Vertikaler Stack mit unterschiedlichem Inhalt

Lassen wir die Dinge ein wenig interessanter gestalten:

<div class="vstack gap-3">
<button class="btn btn-secondary">Klicke mich!</button>
<div class="bg-light border">Ich bin eine Box</div>
<div class="bg-light border">
<h3$Ich bin eine Überschrift</h3>
<p>Und ich bin etwas Text</p>
</div>
</div>

Hier haben wir verschiedene Inhalte gemischt:

• Eine Schaltfläche (verwendet Bootstrap's Button-Klassen)
• Ein einfaches <div> mit hellem Hintergrund und Rand
• Ein komplexeres <div> mit einer Überschrift und einem Absatz

Dies zeigt, wie vielseitig vertikale Stacks sein können. Du bist nicht auf einfache Textkästchen beschränkt!

Horizontaler Stack

Nun wechseln wir die Perspektive und sprechen über horizontale Stacks. Wenn vertikale Stacks wie Pancakes sind, sind horizontale Stacks wie eine Reihe von Dominos – Elemente werden nebeneinander angeordnet. Wir verwenden die Klasse .hstack dafür.

Grundlegender Horizontaler Stack

Hier ist ein einfaches Beispiel:

<div class="hstack gap-3">
<div class="p-2">Erstes</div>
<div class="p-2">Zweites</div>
<div class="p-2">Drittes</div>
</div>

Dieser Code ist sehr ähnlich zu unserem vertikalen Stack, aber wir verwenden hstack anstelle von vstack. Das Ergebnis? Drei Kästchen nebeneinander!

Horizontaler Stack mit Ausrichtung

Lassen wir die Dinge interessanter gestalten:

<div class="hstack gap-3">
<div class="bg-light border">Erstes Element</div>
<div class="bg-light border ms-auto">Zweites Element</div>
<div class="bg-light border">Drittes Element</div>
</div>

In diesem Beispiel:

• Wir haben Hintergründe und Ränder zu unseren Elementen hinzugefügt.
• Die Klasse ms-auto auf dem zweiten Element schiebt es nach rechts und schafft Abstand zwischen dem ersten und zweiten Element.

Dies zeigt, wie wir die Positionierung innerhalb unseres horizontalen Stacks steuern können.

Kombination von vertikalen und horizontalen Stacks

Nun, hier ist die Magie. Wir können vertikale und horizontale Stacks kombinieren, um komplexe Layouts zu erstellen:

<div class="vstack gap-3">
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Füge dein Element hier ein...">
<button type="button" class="btn btn-secondary">Einreichen</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Zurücksetzen</button>
</div>
<div class="bg-light border">Benutzerdefiniertes Element</div>
<div class="bg-light border">Benutzerdefiniertes Element</div>
</div>

Dieses komplexe Beispiel zeigt:

• einen vertikalen Stack als Hauptcontainer
• einen horizontalen Stack innerhalb des vertikalen Stacks (die Eingabe und Buttons)
• mehr Elemente im vertikalen Stack darunter

Das Ergebnis ist eine Formularähnliche Struktur mit zusätzlichen Elementen darunter – ein gängiges Muster im Webdesign!

Tabelle der Stack-Methoden

Hier ist eine praktische Tabelle, die die wichtigsten Klassen und Methoden zusammenfasst, die wir besprochen haben:

Klasse/Methode	Beschreibung	Beispiel
.vstack	Erstellt einen vertikalen Stack	<div class="vstack">
.hstack	Erstellt einen horizontalen Stack	<div class="hstack">
gap-{größe}	Fügt Abstand zwischen Stack-Elementen hinzu	<div class="vstack gap-3">
ms-auto	Schiebt ein Element in einer hstack nach rechts	<div class="ms-auto">
.vr	Erstellt eine vertikale Linie (Trenner) in einer hstack	<div class="vr"></div>

Schlussfolgerung

Und das war's, Leute! Wir haben die Welt der Bootstrap Stacks durchquert, von einfachen vertikalen Anordnungen bis hin zu komplexen Kombinationen von horizontalen und vertikalen Stacks. Denke daran, Webdesign ist wie das Bauen mit Lego – beginne mit diesen einfachen Teilen, und bald wirst du erstaunliche Strukturen erstellen!

Übe mit diesen Beispielen, experimentiere mit verschiedenen Kombinationen und habe keine Angst vor Fehlern. Das ist, wie wir alle lernen und wachsen als Entwickler. Bevor du es weißt, wirst du Elemente wie ein erfahrener Profi stapeln!

Frohes Coden und möge deine Stacks immer perfekt ausgerichtet sein! ?

Credits: Image by storyset