Bootstrap 5-Karte
- Vorherige Seite Listengruppe von BS5
- Nächste Seite Dropdown-Menu von BS5
Wahlpflichtkurs
Kursempfehlung:
Karte
Eine grundlegende Karte ist eine umrandete Box in Bootstrap 5, deren Inhalt um einige Innenabstände hat. Es umfasst Kopfzeile, Fußzeile, Inhalt, Farben und andere Optionen. .card
Von der Klasse erstellte, hat der Inhalt in der Karte einen .card-body
Klasse:
Beispiel
<div class="card"> <div class="card-body">Grundlegende Karte</div> </div>
Kopfzeile und Fußzeile
.card-header
Fügen Sie der Karte einen Titel hinzu mit der Klasse:.card-footer
Fügen Sie der Karte eine Fußzeile hinzu mit der Klasse:
Beispiel
<div class="card"> <div class="card-header">Kopfzeile</div> <div class="card-body">Inhalt</div> <div class="card-footer">Fußzeile</div> </div>
Kontextkarte
Um eine Hintergrundfarbe für die Karte hinzuzufügen, verwenden Sie die Kontextklasse:
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light
Beispiel
Titel, Text und Link
Verwenden Sie .card-title
Fügen Sie den KartenTitel zu jedem Titel-Element hinzu. Wenn <p>
Das Element ist .card-body
Der letzte Unterelement (oder einzige Unterelement) im Inneren .card-text
Klasse wird verwendet, um <p>
der unteren Randabstand des Elements..card-link
Fügen Sie blau und Hover-Effekte für beliebige Links hinzu.
Beispiel
<div class="card"> <div class="card-body"> <h4 class="card-title">Kartentitel</h4> <p class="card-text">Einige Beispieltexte. Einige Beispieltexte.</p> <a href="#" class="card-link">Kartenlink</a> <a href="#" class="card-link">weiterer Link</a> </div> </div>
hinzufügen
Kartenbild .card-img-top
oder .card-img-bottom
Fügen Sie zu <img>
Das Bild kann oben oder unten in der Karte platziert werden.
Bitte beachten Sie, dass wir das Bild außerhalb von .card-body hinzugefügt haben, um die gesamte Breite zu überbrücken:
Beispiel
<div class="card" style="width:400px"> <img class="card-img-top" src="avatar.png" alt="Kartenbild"> <div class="card-body"> <h4 class="card-title">Bill Gates</h4> <p class="card-text">Bill Gates ist ein Programmierer und Ingenieur. Einige Beispieltexte. Einige Beispieltexte.</p> <a href="#" class="btn btn-primary">Persönliches Profil anzeigen</a> </div> </div>
Kartenbildüberschlag
Das Bild in einen Kartenhintergrund umwandeln und verwenden .card-img-overlay
Fügen Sie Text auf dem Bild oben hinzu:
Beispiel
<div class="card" style="width:500px"> <img class="card-img-top" src="avatar.png" alt="Kartenbild"> <div class="card-img-overlay"> <h4 class="card-title">Bill Gates</h4> <p class="card-text">Einige Beispieltexte. Einige Beispieltexte.</p> <a href="#" class="btn btn-primary">Persönliches Profil anzeigen</a> </div> </div>
- Vorherige Seite Listengruppe von BS5
- Nächste Seite Dropdown-Menu von BS5