Bootstrap 4 Karten
Karten
Eine Karte in Bootstrap 4 ist eine umrandete Box mit etwas Polsterung um ihren Inhalt. Es enthält Optionen für Kopfzeilen, Fußzeilen, Inhalt, Farben usw.
John Doe
Einige Beispieltexte Einige Beispieltexte. John Doe ist Architekt und Ingenieur
Siehe ProfilBasiskarte
Eine einfache Karte wird mit der .cardKlasse erstellt, und der Inhalt der Karte hat eine .card-bodyKlasse:
Beispiel
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Wenn Sie mit Bootstrap 3 vertraut sind, ersetzen Karten alte Panels, Wells und Thumbnails.
Kopf-und Fußzeile
Die .card-headerKlasse fügt der Karte eine Überschrift hinzu und die .card-footerKlasse fügt der Karte eine Fußzeile hinzu:
Beispiel
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Kontextbezogene Karten
Um der Karte eine Hintergrundfarbe hinzuzufügen, verwenden Sie kontextbezogene Klassen ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkund .bg-light.
Beispiel
Titel, Text und Links
Verwenden .card-titleSie diese Option, um jedem Überschriftenelement Kartentitel hinzuzufügen. Die .card-textKlasse wird verwendet, um untere Ränder für ein <p>-Element zu entfernen, wenn es das letzte Kind (oder das einzige) innerhalb von ist .card-body. Die .card-linkKlasse fügt jedem Link eine blaue Farbe und einen Hover-Effekt hinzu.
Beispiel
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Kartenbilder
John Doe
Einige Beispieltexte Einige Beispieltexte. John Doe ist Architekt und Ingenieur
Siehe Profil
Fügen Sie .card-img-topoder .card-img-bottomzu einem hinzu
<img>, um das Bild oben oder unten auf der Karte zu platzieren. Beachten Sie, dass wir das Bild außerhalb von hinzugefügt haben .card-body, um die gesamte Breite zu überspannen:
Beispiel
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Gestreckter Link
Fügen Sie die .stretched-linkKlasse zu einem Link innerhalb der Karte hinzu, und die gesamte Karte wird anklickbar und schwebbar (die Karte fungiert als Link):
John Doe
Einige Beispieltexte Einige Beispieltexte. John Doe ist Architekt und Ingenieur
Siehe ProfilBeispiel
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Kartenbild-Overlays
Verwandeln Sie ein Bild in einen Kartenhintergrund und verwenden .card-img-overlay
Sie, um Text über dem Bild hinzuzufügen:
Beispiel
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Kartenspalten
Etwas Text in der ersten Karte
Etwas Text in der zweiten Karte
Etwas Text innerhalb der dritten Karte
Etwas Text auf der vierten Karte
Etwas Text auf der fünften Karte
Etwas Text auf der sechsten Karte
Die .card-columnsKlasse erstellt ein Mauerwerk-ähnliches Kartenraster (wie Pinterest). Das Layout passt sich automatisch an, wenn Sie weitere Karten einlegen.
Hinweis: Die Karten werden auf kleinen Bildschirmen (weniger als 576 Pixel) vertikal angezeigt:
Beispiel
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Kartendeck
Etwas Text in der ersten Karte
Etwas mehr Text, um die Höhe zu erhöhen
Etwas mehr Text, um die Höhe zu erhöhen
Etwas mehr Text, um die Höhe zu erhöhen
Etwas Text in der zweiten Karte
Etwas Text innerhalb der dritten Karte
Etwas Text auf der vierten Karte
Die .card-deckKlasse erstellt ein Raster aus Karten gleicher Höhe und Breite . Das Layout passt sich automatisch an, wenn Sie weitere Karten einlegen.
Hinweis: Die Karten werden auf kleinen Bildschirmen (weniger als 576 Pixel) vertikal angezeigt:
Beispiel
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Kartengruppe
Etwas Text in der ersten Karte
Etwas mehr Text, um die Höhe zu erhöhen
Etwas mehr Text, um die Höhe zu erhöhen
Etwas mehr Text, um die Höhe zu erhöhen
Etwas Text in der zweiten Karte
Etwas Text innerhalb der dritten Karte
Etwas Text auf der vierten Karte
Die .card-groupKlasse ist ähnlich wie .card-deck. Der einzige Unterschied besteht darin, dass die .card-groupKlasse den linken und rechten Rand zwischen jeder Karte entfernt.
Hinweis: Die Karten werden auf kleinen Bildschirmen (weniger als 576px) vertikal angezeigt, MIT oberem und unterem Rand:
Beispiel
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>