Bootstrap - Rastersystem: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftige Webentwickler! Heute machen wir uns auf eine aufregende Reise in die Welt von Bootstraps Rastersystem. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – ich bin hier für dich und erkläre alles Schritt für Schritt. Also hol dir eine Tasse Kaffee (oder Tee, wenn das dein Favorit ist) und tauchen wir ein!

Was ist das Bootstrap Rastersystem?

Bevor wir loslegen, lasse mich dir eine kleine Geschichte erzählen. Stell dir vor, du versuchst, deinen Bücherregal zu organisieren. Du möchtest deine Bücher ordentlich anordnen, aber sie sind alle unterschiedlich groß. Frustrierend, oder?Nun, das Bootstrap Rastersystem ist wie ein magisches Bücherregal, das deinen Inhalt automatisch organisiert, egal welche Größe oder Form er hat!

In Begriffen des Webdesigns ist das Rastersystem ein leistungsstarkes Layoutwerkzeug, das dir hilft, responsive und gut strukturierte Webseiten zu erstellen. Es ist wie ein persönlicher Assistent, der den Inhalt deiner Webseite perfekt anordnet, egal ob er auf einem großen Desktopmonitor oder einem kleinen Handyscreen angezeigt wird.

Grundlegendes Beispiel

Lassen wir mit einem einfachen Beispiel anfangen, um unsere Füße nass zu machen. Hier ist eine grundlegende Struktur des Bootstrap Rastersystems:

<div class="container">
<div class="row">
<div class="col-sm">
Eine von drei Spalten
</div>
<div class="col-sm">
Eine von drei Spalten
</div>
<div class="col-sm">
Eine von drei Spalten
</div>
</div>
</div>

Was passiert hier? Lassen wir es auseinandernehmen:

1. Wir beginnen mit einer container-Klasse. Das ist wie die äußere Box, die alles enthält.
2. Innerhalb des Containers haben wir eine row-Klasse. Denke daran als eine Schublade in unserem Bücherregalbeispiel.
3. Innerhalb der Reihe haben wir drei col-sm-Klassen. Das sind unsere Bücher, die nebeneinander auf dem Regal stehen.

Wie es funktioniert

Das Bootstrap Rastersystem basiert auf einem 12-Spalten-Layout. Warum 12? Nun, es ist eine magische Zahl im Webdesign, weil sie durch 1, 2, 3, 4 und 6 teilbar ist, was uns viel Flexibilität bietet!

Hier ist eine visuelle Darstellung:

1	2	3	4	5	6	7	8	9	10	11	12
Spalte	Spalte	Spalte	Spalte	Spalte	Spalte	Spalte	Spalte	Spalte	Spalte	Spalte	Spalte

Jede dieser Spalten kann kombiniert werden, um breitere Inhaltsbereiche zu erstellen. Zum Beispiel könntest du ein Layout mit zwei Spalten à 6 Einheiten oder drei Spalten à 4 Einheiten haben. Es ist wie das Spielen mit Bausteinen!

Automatische Spaltenanordnung

Nun schauen wir uns einige coole Tricks an. Bootstrap kann die Spaltenbreiten automatisch für dich verwalten. Schau dir das an:

<div class="container">
<div class="row">
<div class="col">
1 von 2
</div>
<div class="col">
2 von 2
</div>
</div>
<div class="row">
<div class="col">
1 von 3
</div>
<div class="col">
2 von 3
</div>
<div class="col">
3 von 3
</div>
</div>
</div>

In diesem Beispiel geben wir keine Spaltenbreiten an. Bootstrap ist schlau genug, den Raum gleichmäßig unter den Spalten aufzuteilen. Es ist wie ein Roboter, der dein Bücherregal für dich anordnet!

Gleiche Breite

Möchtest du alle Spalten gleich breit haben, unabhängig vom Inhalt? Ganz einfach!

<div class="container">
<div class="row">
<div class="col">
1 von 3
</div>
<div class="col">
2 von 3 (breiter)
</div>
<div class="col">
3 von 3
</div>
</div>
</div>

Auch wenn die mittlere Spalte mehr Inhalt hat, bleiben alle drei Spalten gleich breit. Es ist wie Bücher, die sich ausdehnen können und immer perfekt auf dem Regal passen!

Festgelegte Spaltenbreite

Manchmal möchtest du eine Spalte eine bestimmte Breite haben lassen und die anderen automatisch anpassen. So geht's:

<div class="container">
<div class="row">
<div class="col">
1 von 3
</div>
<div class="col-6">
2 von 3 (breiter)
</div>
<div class="col">
3 von 3
</div>
</div>
</div>

In diesem Fall wird die mittlere Spalte 6 Einheiten (die Hälfte der Breite) einnehmen, und die anderen beiden Spalten teilen den verbleibenden Raum gleichmäßig.

Inhaltsabhängige Breite

Was ist, wenn du möchtest, dass eine Spalte ihre Breite basierend auf ihrem Inhalt anpasst? Bootstrap hat auch das im Angebot:

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 von 3
</div>
<div class="col-md-auto">
Inhaltsabhängige Breite
</div>
<div class="col col-lg-2">
3 von 3
</div>
</div>
</div>

Die col-md-auto-Klasse ermöglicht es dieser Spalte, zu wachsen oder zu schrumpfen, basierend auf ihrem Inhalt. Es ist wie ein Buch, das seine Größe ändern kann, um perfekt zwischen seinen Nachbarn zu passen!

Responsive Klassen

Nun, lassen wir uns über die Anpassung an verschiedene Bildschirmgrößen unterhalten. Bootstrap verwendet Breakpoints, um das Layout basierend auf der Bildschirmgröße anzupassen. Hier sind die wichtigsten Breakpoints:

Breakpoint	Klassenzusatz	Abmessungen
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Alle Breakpoints

So verwendest du diese Breakpoints:

<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>

Dieses Layout bleibt auf allen Bildschirmgrößen gleich. Es ist wie ein Bücherregal, das von weit weg oder nah dran gleich aussieht!

Gestapelt zu Horizontal

Aber was ist, wenn wir want, dass unser Layout basierend auf der Bildschirmgröße ändert? Schau dir das an:

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

Auf kleinen Bildschirmen und darüber werden diese Spalten nebeneinander angezeigt. Auf extra kleinen Bildschirmen werden sie vertikal gestapelt. Es ist wie ein Bücherregal, das sich in einen Bücherstack verwandelt, wenn wenig Platz ist!

Mischen und Kombinieren

Du kannst auch Spaltenbreiten für verschiedene Bildschirmgrößen mischen und kombinieren:

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

Dieses Layout sieht auf kleinen Bildschirmen anders aus als auf mittleren und größeren Bildschirmen. Es ist wie ein shape-shifting Bücherregal!

Spalten in Zeilen

Möchtest du schnell gleichbreite Spalten erstellen? Verwende Spalten in Zeilen:

<div class="container">
<div class="row row-cols-2">
<div class="col">Spalte</div>
<div class="col">Spalte</div>
<div class="col">Spalte</div>
<div class="col">Spalte</div>
</div>
</div>

Dies erstellt eine Zeile mit zwei Spalten, egal wie viele col-Divs du hast. Es ist wie ein Bücherregal, das deine Bücher immer paarweise anordnet!

Verschachtelung

Last but not least, du kannst Gitter in Gitter verschachteln:

<div class="container">
<div class="row">
<div class="col-sm-3">
Ebene 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Ebene 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Ebene 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

Dies erstellt ein Gitter innerhalb eines Gitters. Es ist wie kleine Bücherregale in einem größeren Bücherregal!

Und das war's, Leute! Du hast deine ersten Schritte in die Welt von Bootstraps Rastersystem gemacht. Denke daran, Übung macht den Meister. Probiere diese Beispiele aus, mische und kombiniere verschiedene Klassen und sieh, was passiert. Vor kurzem wirst du beautiful, responsive Layouts wie ein Profi erstellen!

Happy Coding und möge deine Webseiten immer perfekt organisiert sein!

Credits: Image by storyset