Karty Bootstrap 5

Karta

Karty Bootstrap 5 są ramkowymi ramkami, które mają pewną wewnętrzną margines wokół ich zawartości. Obejmują one nagłówki, stopki, zawartość, kolory i inne opcje.

podstawowej karty

Karta podstawowa jest utworzona za pomocą .card Klasa utworzona, zawartość karty ma .card-body Klasa:

Przykład

<div class="card">
  <div class="card-body">Podstawowa karta</div>
</div>

Spróbuj sam

Nagłówek i stopka

.card-header Aby dodać tytuł do karty, użyj klasy:.card-footer Aby dodać stopkę do karty, użyj klasy:

Przykład

<div class="card">
  <div class="card-header">Nagłówek</div>
  <div class="card-body">Zawartość</div>
  <div class="card-footer">Stopka</div>
</div>

Spróbuj sam

Karta kontekstowa

Aby dodać kolor tła do karty, użyj klas kontekstowych:

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

Przykład

Spróbuj sam

tytułu, tekstu i linku

Proszę użyć .card-title Dodaj tytuł karty do dowolnego elementu nagłówka. Jeśli <p> element jest .card-body Ostatni element (lub jedyny element) wewnątrz .card-text Klasa używana do usunięcia <p> spód marginesu elementu..card-link Dodaj niebieski kolor i efekt podkreślenia dla dowolnych linków.

Przykład

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Tytuł karty</h4>
    <p class="card-text">Kilka przykładów tekstu. Kilka przykładów tekstu.</p>
    <a href="#" class="card-link">Link karty</a>
    <a href="#" class="card-link">Inny link</a>
  </div>
</div>

Spróbuj sam

obraz karty

Zmień .card-img-top lub .card-img-bottom Dodaj do <img>można umieścić obraz na górze lub dole karty.

Proszę zauważyć, że dodaliśmy obraz poza .card-body, aby objąć całą szerokość:

Przykład

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Obraz karty">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates jest programistą i inżynierem. Kilka przykładów tekstu. Kilka przykładów tekstu.</p>
    <a href="#" class="btn btn-primary">Zobacz profil osobisty</a>
  </div>
</div>

Spróbuj sam

nadkładu obrazu karty

Zmień obraz na tło karty i użyj .card-img-overlay Dodaj tekst na górze obrazu:

Przykład

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Obraz karty">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Kilka przykładów tekstu. Kilka przykładów tekstu.</p>
    <a href="#" class="btn btn-primary">Zobacz profil osobisty</a>
  </div>
</div>

Spróbuj sam