Bootstrap - Karten: Ein Anfängerguide

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die wundervolle Welt der Bootstrap Karten. Als dein freundlicher Nachbarcomputellehrer freue ich mich darauf, dich auf dieser Reise zu führen. Lassen wir uns vorstellen, dass wir gemeinsam ein digitales Scrapbook erstellen – das ist im Grunde, was wir mit Bootstrap Karten machen werden!

Was ist eine Bootstrap Karte?

Bevor wir uns dem Code zuwenden, lassen wir uns darstellen, was eine Bootstrap Karte ist. Stell dir vor, es ist ein flexibler Behälter, wie eine Box, in die du verschiedene Arten von Inhalten platzieren kannst – Text, Bilder, Links und mehr. Es ist wie eine digitale Version dieser Sammelkarten, die du vielleicht als Kind gesammelt hast, aber viel cooler und vielseitiger!

Grundlegende Kartenstruktur

Lassen wir mit der grundlegenden Kartenstruktur beginnen:

<div class="card">
<div class="card-body">
<h5 class="card-title">Hallo, ich bin eine Karte!</h5>
<p class="card-text">Ich kann alle Arten von interessanten Informationen enthalten.</p>
</div>
</div>

Dieser Code erstellt eine einfache Karte mit einer Überschrift und etwas Text. Die card-Klasse erstellt den Behälter, und card-body umgibt den Inhalt.

Inhaltstypen

Nun tauchen wir ein in die verschiedenen Arten von Inhalten, die wir in unseren Karten platzieren können:

Überschriften, Text und Links

<div class="card">
<div class="card-body">
<h5 class="card-title">Kartentitel</h5>
<h6 class="card-subtitle mb-2 text-muted">Kartensubtitel</h6>
<p class="card-text">Einige schnelle Beispieltexte, um den Kartentitel zu erweitern und den Hauptteil des Kartengehaltes zu bilden.</p>
<a href="#" class="card-link">Kartenlink</a>
<a href="#" class="card-link">Ein weiterer Link</a>
</div>
</div>

Dieses Beispiel zeigt, wie wir einen Untertitel, mehr Text und Links zu unserer Karte hinzufügen können. Es ist, als ob wir verschiedene Abschnitte zu unserer digitalen Scrapbook-Seite hinzufügen!

Bilder

Lassen wir etwas visuelle Anziehungskraft mit Bildern hinzufügen:

<div class="card">
<img src="pfad/zu/deinem/bild.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Schau dir dieses schöne Bild an!</p>
</div>
</div>

Die card-img-top-Klasse platzierst das Bild an der Oberseite der Karte. Es ist, als ob du ein Foto an die Oberseite deiner Scrapbook-Seite klebst!

Listen groups

Wir können sogar Listen zu unseren Karten hinzufügen:

<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">Ein Element</li>
<li class="list-group-item">Ein zweites Element</li>
<li class="list-group-item">Ein drittes Element</li>
</ul>
</div>

Dies erstellt eine Karte mit einer Liste darin. Perfect für Todo-Listen oder Aufzählungspunkte!

Alles rein

Nun kombinieren wir alles, was wir gelernt haben, zu einer "alles rein"-Karte:

<div class="card" style="width: 18rem;">
<img src="pfad/zu/deinem/bild.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"> Kartentitel</h5>
<p class="card-text">Einige schnelle Beispieltexte, um den Kartentitel zu erweitern und den Hauptteil des Kartengehaltes zu bilden.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Ein Element</li>
<li class="list-group-item">Ein zweites Element</li>
<li class="list-group-item">Ein drittes Element</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Kartenlink</a>
<a href="#" class="card-link">Ein weiterer Link</a>
</div>
</div>

Diese Karte hat alles – ein Bild, Titel, Text, Liste und Links. Es ist wie das Schweizer Army Knife der Karten!

Kopf und Fuß

Wir können Kopf- und Fußzeilen zu unseren Karten hinzufügen, um zusätzliche Struktur zu schaffen:

<div class="card">
<div class="card-header">
Ausgewählt
</div>
<div class="card-body">
<h5 class="card-title">Besondere Titelbehandlung</h5>
<p class="card-text">Mit unterstützendem Text darunter als natürlicher Einstieg in zusätzlichen Inhalt.</p>
<a href="#" class="btn btn-primary">Gehe somewhere</a>
</div>
<div class="card-footer text-muted">
Vor 2 Tagen
</div>
</div>

Die Kopf- und Fußzeilen verleihen unserer Karte ein schönes, poliertes Aussehen.

Größenanpassung

Wir können die Größe unserer Karten mit Grid-Klassen oder benutzerdefiniertem CSS steuern:

<div class="card w-75">
<div class="card-body">
<h5 class="card-title"> Kartentitel</h5>
<p class="card-text">Diese Karte ist 75% breit.</p>
</div>
</div>

Diese Karte wird 75% der Breite ihres Behälters einnehmen.

Verwendung von Rastermarkierungen

Wir können das Rastersystem von Bootstrap verwenden, um unsere Karten zu organisieren:

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Besondere Titelbehandlung</h5>
<p class="card-text">Mit unterstützendem Text darunter als natürlicher Einstieg in zusätzlichen Inhalt.</p>
<a href="#" class="btn btn-primary">Gehe somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Besondere Titelbehandlung</h5>
<p class="card-text">Mit unterstützendem Text darunter als natürlicher Einstieg in zusätzlichen Inhalt.</p>
<a href="#" class="btn btn-primary">Gehe somewhere</a>
</div>
</div>
</div>
</div>

Dies erstellt zwei Karten nebeneinander auf größeren Bildschirmen und stapelt sie auf kleineren Bildschirmen.

Navigation

Wir können unsere Karten sogar in Navigations-elemente verwandeln:

<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Aktiv</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deaktiviert</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Besondere Titelbehandlung</h5>
<p class="card-text">Mit unterstützendem Text darunter als natürlicher Einstieg in zusätzlichen Inhalt.</p>
<a href="#" class="btn btn-primary">Gehe somewhere</a>
</div>
</div>

Dies erstellt eine Karte mit Navigations tabs oben.

Kartenstile

Bootstrap bietet verschiedene Stile für Karten:

Hintergrund und Farbe

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Kopfzeile</div>
<div class="card-body">
<h5 class="card-title">Primary Kartentitel</h5>
<p class="card-text">Einige schnelle Beispieltexte, um den Kartentitel zu erweitern und den Hauptteil des Kartengehaltes zu bilden.</p>
</div>
</div>

Dies erstellt eine blaue Karte mit weißem Text. Du kannst bg-primary durch andere Farb-klassen wie bg-success, bg-warning usw. ersetzen.

Schlussfolgerung

Und das war's, Leute! Wir haben die Welt der Bootstrap Karten durchquert, von grundlegenden Strukturen bis zu fortgeschrittenen Layouts. Denke daran, Übung macht den Meister. Versuche, verschiedene Elemente und Stile zu kombinieren, um deine einzigartigen Karten zu erstellen. Wer weiß? Vielleicht erstellst du das nächste große Ding im Webdesign!

Hier ist eine Tabelle, die die wichtigsten Bootstrap Kartenklassen zusammenfasst, die wir behandelt haben:

Klasse	Beschreibung
.card	Erstellt den grundlegenden Kartenbehälter
.card-body	Umgibt den Kartengehalt
.card-title	Stylt den Kartentitel
.card-text	Stylt den Kartentext
.card-link	Stylt Links innerhalb der Karte
.card-img-top	Plaziert ein Bild an der Oberseite der Karte
.card-header	Erstellt eine Kartenkopfzeile
.card-footer	Erstellt eine Kartenfußzeile
.bg-*	Ändert die Hintergrundfarbe der Karte
.text-*	Ändert die Textfarbe der Karte

Nun, geht los und erstellt erstaunliche Kartenlayouts! Denke daran, im Webdesign, wie im Leben, geht es darum, außerhalb der Box zu denken – oder in diesem Fall, innerhalb der Karte! Viel Spaß beim Coden!

Credits: Image by storyset