Bootstrap - Spalten: Erstellung von responsiven Layouts mit Leichtigkeit

Hallo da draußen, angehende Web-Entwickler! Heute tauchen wir in eine der leistungsstärksten Funktionen von Bootstrap ein: Spalten. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, dich auf dieser Reise zu führen. Glaub mir, am Ende dieses Tutorials wirst du responsive Layouts wie ein Profi erstellen können!

Wie es funktioniert

Bevor wir ins Detail gehen, lassen wir uns die Grundlagen erklären. Bootstrap's Rastersystem basiert auf einem 12-Spalten-Layout. Stell dir vor, du teilst eine Pizza in 12 Scheiben – du kannst sie alle selbst essen (eine ganzzahlige Spalte) oder mit Freunden teilen (mehrere Spalten).

Hier ist ein einfaches Beispiel, um loszulegen:

<div class="container">
<div class="row">
<div class="col-sm-4">Spalte 1</div>
<div class="col-sm-4">Spalte 2</div>
<div class="col-sm-4">Spalte 3</div>
</div>
</div>

In diesem Beispiel haben wir drei gleichbreite Spalten auf kleinen Bildschirmen und darüber erstellt. Die Klasse col-sm-4 bedeutet "nehme 4 von 12 Spalten auf kleinen Bildschirmen". Es ist, als würdest du sagen: "Ich möchte bitte 4 Scheiben von der 12-Scheiben-Pizza!"

Ausrichtung

Jetzt, wo wir unsere Spalten haben, lernen wir, wie man sie ausrichtet. Es ist wie das Arrangieren von Möbeln in einem Raum – du möchtest, dass alles perfekt aussieht!

Vertikale Ausrichtung

Um Spalten vertikal auszurichten, verwenden wir Klassen auf der Zeile:

<div class="container">
<div class="row align-items-start">
<div class="col">Oben</div>
<div class="col">Oben</div>
<div class="col">Oben</div>
</div>
<div class="row align-items-center">
<div class="col">Mitte</div>
<div class="col">Mitte</div>
<div class="col">Mitte</div>
</div>
<div class="row align-items-end">
<div class="col">Unten</div>
<div class="col">Unten</div>
<div class="col">Unten</div>
</div>
</div>

Hier verwenden wir align-items-start, align-items-center und align-items-end, um unsere Spalten an die Oberkante, die Mitte und die Unterkante der Zeile auszurichten.

Horizontale Ausrichtung

Für die horizontale Ausrichtung verwenden wir justify-content-Klassen:

<div class="container">
<div class="row justify-content-start">
<div class="col-4">Eins</div>
<div class="col-4">Zwei</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Eins</div>
<div class="col-4">Zwei</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Eins</div>
<div class="col-4">Zwei</div>
</div>
</div>

Diese Klassen (justify-content-start, justify-content-center, justify-content-end) richten unsere Spalten links, mittig und rechts im Behälter aus.

Spaltenumbruch

Manchmal hast du möglicherweise mehr als 12 SpaltenEinheiten in einer Zeile. Keine Sorge, Bootstrap hat dich im Rücken! Es wird die zusätzlichen Spalten automatisch zu einer neuen Zeile umbrechen:

<div class="container">
<div class="row">
<div class="col-9">Spalte 1</div>
<div class="col-4">Spalte 2</div>
<div class="col-6">Spalte 3</div>
</div>
</div>

In diesem Beispiel ergibt 9 + 4 = 13, was mehr als 12 ist, sodass die zweite Spalte zu einer neuen Zeile umbrechen muss.

Spaltenumbruch

Aber was ist, wenn du selbst eine neue Zeile erzwingen möchtest? Hier kommt der Spaltenumbruch ins Spiel:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Das <div class="w-100"></div> erstellt einen 100%igen Breitenumbruch, der die nächsten Spalten zu einer neuen Zeile startet.

Umordnung

Order-Klassen

Bootstrap ermöglicht es dir, die visuelle Reihenfolge deiner Spalten zu ändern:

<div class="container">
<div class="row">
<div class="col order-3">Erster, aber letzter</div>
<div class="col order-2">Zweiter, aber zweiter</div>
<div class="col order-1">Dritter, aber erster</div>
</div>
</div>

Die order- Klassen bestimmen die Reihenfolge der Spalten. Es ist, als ob deine Spalten Muschel椅子 spielen!

Abstand vor Spalten

Offset-Klassen

Manchmal möchtest du vor einer Spalte etwas Platz hinzufügen. Hier kommen die Offset-Klassen ins Spiel:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
</div>

Die Klasse offset-md-4 fügt eine Margin-left hinzu, die gleich 4 Spalten ist, und schiebt unsere zweite Spalte nach rechts.

Spalten klären an responsiven Breakpoints

Wenn sich dein Layout über verschiedene Bildschirmgrößen ändert, musst du möglicherweise flottierte Spalten klären:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Hier versteckt d-none d-md-block den Umbruch auf kleinen Bildschirmen, aber zeigt ihn auf mittleren Bildschirmen und darüber.

Margen-Utilities

Bootstrap bietet Margen-Utilities für schnelle Abstandsanpassungen:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

Die Klasse ml-auto schiebt die zweite Spalte nach rechts, indem sie die linke Margen automatisch anpasst.

Selbständige Spaltenklassen

Schließlich kannst du Spaltenklassen ohne Row-Wrapper für mehr Flexibilität verwenden:

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: Breite von 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: Breite von 75% über sm Breakpoint
</div>
</div>

Dieser Ansatz gibt dir mehr Kontrolle über dein Layout, insbesondere für komplexe Designs.

Und das war's, Leute! Du hast gerade die Ins und Outs der Bootstrap-Spalten gelernt. Erinnere dich daran, Übung macht den Meister, also fürchte dich nicht, mit diesen Konzepten zu experimentieren. Bald wirst du responsive Layouts erstellen, die selbst erfahrene Web-Entwickler neidisch machen würden!

Hier ist eine schnelle Referenztabelle der Spaltenklassen, die wir behandelt haben:

Klasse	Beschreibung
col-*	Grundlegende Spaltenklasse (* kann 1-12 sein)
col-sm-*	Spalte für kleine Bildschirme und darüber
col-md-*	Spalte für mittlere Bildschirme und darüber
col-lg-*	Spalte für große Bildschirme und darüber
col-xl-*	Spalte für extra große Bildschirme
offset--	Offset-Spalte (* kann sm, md, lg, xl sein)
order-*	Spalten neu anordnen (* kann 1-12 sein)

Frohes Coden und möge deine Layouts stets responsiv sein!

Credits: Image by storyset