Bootstrap 5-Karte

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>

Probieren Sie es selbst aus

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>

Probieren Sie es selbst aus

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

Probieren Sie es selbst aus

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>

Probieren Sie es selbst aus

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>

Probieren Sie es selbst aus

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>

Probieren Sie es selbst aus