Bootstrap 5 Kort

kort

Bootstrap 5 kort er rammer med kant, og deres indhold har lidt indre margin. Det inkluderer toppelement, fodnote, indhold, farver og andre valgmuligheder.

grunnleggende kort

Et grundlæggende kort er oprettet med .card oprettet af klassen, har indholdet i kortet en .card-body Klasser:

Eksempel

<div class="card">
  <div class="card-body">Basis kort</div>
</div>

Prøv det selv

Toppelement og fodnote

.card-header For at tilføje en titel til kortet, brug klassen:.card-footer For at tilføje en fodnote til kortet, brug klassen:

Eksempel

<div class="card">
  <div class="card-header">Toppelement</div>
  <div class="card-body">Indhold</div>
  <div class="card-footer">Fodnote</div>
</div>

Prøv det selv

Kontekstkort

For at tilføje en baggrundsfar til kortet, brug kontekstklassen:

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

Eksempel

Prøv det selv

titel, tekst og link

brug .card-title Tilføj korttitlen til hvilken som helst titelkomponent. Hvis <p> element er .card-body Den sidste underelement (eller den eneste underelement) i .card-text Klassen bruges til at fjerne <p> Elementets bundmargen..card-link Tilføj blå farve og hover-effekt til ethvert link.

Eksempel

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Korttitel</h4>
    <p class="card-text">Nogle eksempler på tekst. Nogle eksempler på tekst.</p>
    <a href="#" class="card-link">Kortlink</a>
    <a href="#" class="card-link">En anden link</a>
  </div>
</div>

Prøv det selv

kortbilledet

Omdan .card-img-top eller .card-img-bottom Tilføj til <img>，kan billedet placeres øverst eller nederst på kortet.

Bemærk, at vi har tilføjet et billede uden for .card-body for at krydse hele bredden:

Eksempel

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Kort billede">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates er en programmør og ingeniør. Nogle eksempler på tekst. Nogle eksempler på tekst.</p>
    <a href="#" class="btn btn-primary">Se profil</a>
  </div>
</div>

Prøv det selv

Kortbilledoverlejring

Omdan billedet til kortbaggrund og brug .card-img-overlay Tilføj tekst til toppen af billedet:

Eksempel

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Kort billede">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Nogle eksempler på tekst. Nogle eksempler på tekst.</p>
    <a href="#" class="btn btn-primary">Se profil</a>
  </div>
</div>

Prøv det selv