Bootstrap - CSS Grid: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die wunderbare Welt von Bootstrap's CSS Grid-System. Keine Sorge, wenn ihr noch nie kodiert habt – ich werde euer freundlicher Guide auf dieser aufregenden Reise sein. Also, holt euch eine Tasse Kaffee (oder Tee, wenn das mehr euer Ding ist) und los geht's!

Wie es funktioniert

Bootstrap's CSS Grid ist wie ein magisches Layout-Werkzeug, das uns hilft, Inhalte auf unseren Webseiten zu organisieren. Stellt euch vor,你们的房间布置家具 – das ist genau, was wir machen, aber mit Website-Elementen!

Das Rastersystem basiert auf einem 12-Spalten-Layout, das bedeutet, wir können unsere Seite in 12 gleiche Teile aufteilen. Das gibt uns unglaubliche Flexibilität bei der Gestaltung unserer Layouts. Sehen wir uns ein einfaches Beispiel an:

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

In diesem Beispiel haben wir drei gleiche Spalten erstellt, jede nimmt 4 Teile unseres 12-Spalten-Rasters ein (4 + 4 + 4 = 12). Es ist wie ein Pizza in drei gleiche Stücke zu schneiden!

Hauptunterschiede

Nun könnte ihr euch fragen, "Was macht Bootstrap's CSS Grid so besonders?"Nun, lassen Sie mich Ihnen sagen – es geht um Einfachheit und Kraft. Im Gegensatz zu traditionellen CSS-Layouts:

1. Verwendet es Flexbox, was es flexibler und responsiver macht
2. Bietet es leicht zu bedienende Klassen für schnelle Layout-Erstellung
3. Stellt es eingebauten Responsiven für verschiedene Bildschirmgrößen zur Verfügung

Drei Spalten

Lassen Sie uns ein interessanteres Layout mit drei Spalten unterschiedlicher Größe erstellen:

<div class="container">
<div class="row">
<div class="col-3">Seitenleiste</div>
<div class="col-6">Hauptinhalt</div>
<div class="col-3">Rechte Leiste</div>
</div>
</div>

In diesem Beispiel haben wir eine Seitenleiste und eine rechte Leiste (jede nimmt 3 Spalten ein) mit einem größeren Hauptinhaltbereich in der Mitte (6 Spalten). Es ist wie eine große TV an der Wand eures Wohnzimmers, mit Bücherregalen auf jeder Seite!

Responsiv

Eine der coolsten Dinge an Bootstrap's Grid ist seine Responsivität. Wir können unsere Layouts mit Leichtigkeit an verschiedene Bildschirmgrößen anpassen. Sehen wir uns an, wie:

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

Dieses Layout wird vertikal gestapelt auf kleinen Bildschirmen, wird zu zwei Spalten auf mittleren Bildschirmen und zu drei Spalten auf großen Bildschirmen. Es ist wie ein shape-shifting-Website!

Beispiel

Lassen Sie uns ein einfaches responsives Blog-Layout erstellen:

<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<h1>Mein cooler Blogbeitrag</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="col-12 col-lg-4">
<h2>Letzte Beiträge</h2>
<ul>
<li>Beitrag 1</li>
<li>Beitrag 2</li>
<li>Beitrag 3</li>
</ul>
</div>
</div>
</div>

Dieses Layout hat den Hauptinhalt und die Seitenleiste auf kleinen Bildschirmen gestapelt, aber nebeneinander auf größeren Bildschirmen. Es ist wie ein Buch, das seine Seiten basierend darauf, wie man es hält, umordnet!

Umbruch

Manchmal möchten wir, dass unser Inhalt zum nächsten Zeilenrand umgebrochen wird, wenn er die Rasterbreite überschreitet. Bootstrap macht das super einfach:

<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Seit 9 + 4 = 13 > 12 wird diese 4-spaltige div auf eine neue Zeile umgebrochen als ein zusammenhängendes Element.</div>
<div class="col-6">.col-6<br>Nachfolgende Spalten setzen sich auf der neuen Zeile fort.</div>
</div>
</div>

Dieses Beispiel zeigt, wie Spalten automatisch umgebrochen werden, wenn sie die 12-Spalten-Grenze überschreiten. Es ist wie Tetris mit deinem Layout zu spielen!

Start

Wir können auch steuern, wo unsere Spalten im Raster beginnen:

<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 class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
</div>

Die offset-* Klassen erlauben es uns, Spalten nach rechts zu verschieben. Es ist wie einen Vorsprung für dein Inhalt in einem Rennen zu geben!

Automatische Spalten

Bootstrap ermöglicht auch flexible, automatisierte Spalten:

<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>

Hier werden die erste und dritte Spalten automatisch um die mittlere Spalte herum skaliert. Es ist wie Möbel zu haben, die sich an den Raum anpassen!

Einbettung

Wir können sogar Raster in Raster einbetten, um komplexere Layouts zu erstellen:

<div class="container">
<div class="row">
<div class="col-sm-9">
Ebene 1: .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 Raster innerhalb eines Rasters, was komplexe Layouts ermöglicht. Es ist wie Räume innerhalb von Räumen in deinem Haus zu haben!

Anpassung

Bootstrap's Rastersystem ist stark anpassungsfähig. Du kannst die Anzahl der Spalten, die Fugen und die Breakpoints deinen Bedürfnissen anpassen. Hier ist ein Beispiel, wie man das Raster mit Sass anpasst:

$grid-columns: 15;
$grid-gutter-width: 20px;

@import "bootstrap/scss/bootstrap";

Dies ändert das Standard-12-Spalten-Raster in ein 15-Spalten-Raster und passt die Fugenbreite an. Es ist wie Architekt deiner eigenen digitalen Stadt zu sein!

Abstände

Bootstrap 5 führt das Konzept der Abstände ein, das es ermöglicht, den Abstand zwischen Spalten zu steuern:

<div class="container">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Benutzerdefinierte Spaltenpolsterung</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Benutzerdefinierte Spaltenpolsterung</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Benutzerdefinierte Spaltenpolsterung</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Benutzerdefinierte Spaltenpolsterung</div>
</div>
</div>
</div>

Die gy-5 Klasse fügt vertikale Abstände zwischen Zeilen hinzu. Es ist wie das Hinzufügen von Atemraum zwischen Elementen in deinem Layout!

Schlussfolgerung

Und da habt ihr es, Leute! Wir haben die Reise durch das Land von Bootstrap's CSS Grid-System unternommen. Von einfachen Layouts bis hin zu responsiven Designs, Einbettungen und Anpassungen, ihr habt nun die Macht, erstaunliche Layouts für eure Webprojekte zu erstellen.

Denkt daran, Übung macht den Meister. Also experimentiert mit diesen Konzepten und bald werdet ihr Layouts wie ein Profi erstellen! Frohes Coden und möge eure Gitter immer perfekt ausgerichtet sein! ?

Methode	Beschreibung
container	Erstellt einen responsiven festen Breitenbehälter
row	Erstellt eine Zeile, um Spalten zu halten
col-*	Erstellt Spalten verschiedener Größen (1-12)
col-*-*	Erstellt responsive Spalten für verschiedene Bildschirmgrößen
offset-*-*	Verschiebt Spalten
col	Erstellt automatische Breitenspalten
g-*	Fügt Abstände zwischen Spalten hinzu
gy-*	Fügt vertikale Abstände zwischen Zeilen hinzu
gx-*	Fügt horizontale Abstände zwischen Spalten hinzu

Credits: Image by storyset