Bootstrap 4 karty
Karty
Karta w Bootstrap 4 to obramowane pudełko z pewnym wypełnieniem wokół jego zawartości. Zawiera opcje nagłówków, stopek, treści, kolorów itp.
nieznany z nazwiska
Jakiś przykładowy tekst, jakiś przykładowy tekst. John Doe jest architektem i inżynierem
Zobacz profilKarta podstawowa
Z .cardklasą tworzona jest podstawowa karta, a zawartość karty ma .card-bodyklasę:
Przykład
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Jeśli znasz Bootstrap 3, karty zastępują stare panele, studzienki i miniatury.
Nagłówek i stopka
Klasa .card-headerdodaje nagłówek do karty, a .card-footerklasa dodaje stopkę do karty:
Przykład
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Karty kontekstowe
Aby dodać kolor tła karty, użyj klas kontekstowych ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondaryi .bg-dark..bg-light
Przykład
Tytuły, tekst i linki
Służy .card-titledo dodawania tytułów kart do dowolnego elementu nagłówka. Klasa .card-textsłuży do usuwania dolnych marginesów dla elementu <p>, jeśli jest to ostatnie dziecko (lub jedyne) wewnątrz .card-body. Klasa .card-linkdodaje niebieski kolor do każdego łącza i efekt najechania.
Przykład
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Obrazy kart
nieznany z nazwiska
Jakiś przykładowy tekst, jakiś przykładowy tekst. John Doe jest architektem i inżynierem
Zobacz profil
Dodaj .card-img-toplub .card-img-bottomdo ,
<img>aby umieścić obraz na górze lub na dole wewnątrz karty. Zwróć uwagę, że dodaliśmy obraz na zewnątrz, .card-bodyaby obejmował całą szerokość:
Przykład
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Rozciągnięty link
Dodaj .stretched-linkklasę do linku na karcie, a cała karta będzie klikalna i aktywna (karta będzie działać jako link):
nieznany z nazwiska
Jakiś przykładowy tekst, jakiś przykładowy tekst. John Doe jest architektem i inżynierem
Zobacz profilPrzykład
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Nakładki z obrazami kart
Zmień obraz w tło karty i użyj .card-img-overlay
, aby dodać tekst na górze obrazu:
Przykład
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Kolumny kart
Jakiś tekst wewnątrz pierwszej karty
Jakiś tekst wewnątrz drugiej karty
Jakiś tekst wewnątrz trzeciej karty
Jakiś tekst wewnątrz czwartej karty
Jakiś tekst wewnątrz piątej karty
Jakiś tekst wewnątrz szóstej karty
Klasa .card-columnstworzy siatkę kart przypominającą mur (jak Pinterest). Układ dostosuje się automatycznie, gdy włożysz więcej kart.
Uwaga: karty są wyświetlane pionowo na małych ekranach (mniej niż 576px):
Przykład
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Talia kart
Jakiś tekst wewnątrz pierwszej karty
Trochę więcej tekstu, aby zwiększyć wysokość
Trochę więcej tekstu, aby zwiększyć wysokość
Trochę więcej tekstu, aby zwiększyć wysokość
Jakiś tekst wewnątrz drugiej karty
Jakiś tekst wewnątrz trzeciej karty
Jakiś tekst wewnątrz czwartej karty
Klasa .card-decktworzy siatkę kart o jednakowej wysokości i szerokości . Układ dostosuje się automatycznie, gdy włożysz więcej kart.
Uwaga: karty są wyświetlane pionowo na małych ekranach (mniej niż 576px):
Przykład
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Grupa kart
Jakiś tekst wewnątrz pierwszej karty
Trochę więcej tekstu, aby zwiększyć wysokość
Trochę więcej tekstu, aby zwiększyć wysokość
Trochę więcej tekstu, aby zwiększyć wysokość
Jakiś tekst wewnątrz drugiej karty
Jakiś tekst wewnątrz trzeciej karty
Jakiś tekst wewnątrz czwartej karty
Klasa .card-groupjest podobna do .card-deck. Jedyna różnica polega na tym, że .card-groupklasa usuwa lewy i prawy margines między każdą kartą.
Uwaga: Karty są wyświetlane pionowo na małych ekranach (mniej niż 576px), Z górnym i dolnym marginesem:
Przykład
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>