Bootstrap 5 Kaart

Kaart

Bootstrap 5-kaarten zijn gebufferde dozen met randen, waarvan de inhoud een beetje ingesprongen is. Het bevat opties zoals koptekst, voettekst, inhoud, kleuren, enz.

Basiskaart

Een basiskaart is gemaakt met .card Klasse gecreëerd, de inhoud in de kaart heeft een .card-body Klasse:

Voorbeeld

<div class="card">
  <div class="card-body">Basiskaart</div>
</div>

Probeer het zelf

Koptekst en voettekst

.card-header Voeg een titel toe aan de kaart met de klasse:.card-footer Voeg een voettekst toe aan de kaart met de klasse:

Voorbeeld

<div class="card">
  <div class="card-header">Koptekst</div>
  <div class="card-body">Inhoud</div>
  <div class="card-footer">Voettekst</div>
</div>

Probeer het zelf

Contextkaart

Om een achtergrondkleur toe te voegen aan de kaart, gebruik dan de contextklasse:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Voorbeeld

Probeer het zelf

titel, tekst en link

Gebruik dan .card-title Voeg de kaarttitel toe aan elk titel-element. Als <p> het element is .card-body de laatste onderliggende element (of enige onderliggende element), dan .card-text Klasse wordt gebruikt om te verwijderen <p> Elementen ondersteunen de ondersteuningsmarge..card-link Voeg een blauwe en hover-effect toe aan elke link van het type klasse.

Voorbeeld

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Kaarttitel</h4>
    <p class="card-text">Enkele voorbeeldtekst. Enkele voorbeeldtekst.</p>
    <a href="#" class="card-link">Kaartlink</a>
    <a href="#" class="card-link">Een andere link</a>
  </div>
</div>

Probeer het zelf

Kaartafbeelding

Verplaats .card-img-top of .card-img-bottom Voeg toe aan <img>，u kunt de afbeelding plaatsen aan de top of onderkant van de kaart.

Let op, we hebben een afbeelding buiten .card-body toegevoegd om de hele breedte te overschrijden:

Voorbeeld

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Kaartafbeelding">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates is een programmeur en ingenieur. Enkele voorbeeldtekst. Enkele voorbeeldtekst.</p>
    <a href="#" class="btn btn-primary">Persoonlijke profiel bekijken</a>
  </div>
</div>

Probeer het zelf

Kaartafbeeldingsoverleg

Maak het beeld tot kaartachtergrond en gebruik .card-img-overlay Voeg tekst toe aan het bovenste deel van het beeld:

Voorbeeld

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Kaartafbeelding">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Enkele voorbeeldtekst. Enkele voorbeeldtekst.</p>
    <a href="#" class="btn btn-primary">Persoonlijke profiel bekijken</a>
  </div>
</div>

Probeer het zelf