Karty
Karty Bootstrap zapewniają elastyczny i rozszerzalny kontener zawartości z wieloma wariantami i opcjami.
O
Karta to elastyczny i rozszerzalny pojemnik na zawartość . Zawiera opcje nagłówków i stopek, szeroką gamę treści, kontekstowe kolory tła i zaawansowane opcje wyświetlania. Jeśli znasz Bootstrap 3, karty zastępują nasze stare panele, zagłębienia i miniatury. Podobna funkcjonalność do tych komponentów jest dostępna jako klasy modyfikujące dla kart.
Przykład
Karty są zbudowane z jak najmniejszą ilością znaczników i stylów, ale nadal zapewniają mnóstwo kontroli i dostosowywania. Zbudowane z flexboxem, zapewniają łatwe dopasowanie i dobrze łączą się z innymi komponentami Bootstrap. marginDomyślnie nie mają , więc w razie potrzeby użyj narzędzi do rozmieszczania .
Poniżej znajduje się przykład karty podstawowej o mieszanej zawartości i stałej szerokości. Karty nie mają ustalonej szerokości na początku, więc naturalnie wypełniają całą szerokość elementu nadrzędnego. Można to łatwo dostosować dzięki naszym różnym opcjom rozmiarów .
Tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Iść gdzieś<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Rodzaje treści
Karty obsługują szeroką gamę treści, w tym obrazy, tekst, grupy list, linki i inne. Poniżej znajdują się przykłady obsługiwanych elementów.
Ciało
Elementem budulcowym karty jest .card-body. Użyj go, gdy potrzebujesz wyściełanej sekcji w karcie.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Tytuły, tekst i linki
Tytuły kart są używane przez dodanie .card-titledo <h*>tagu. W ten sam sposób linki są dodawane i umieszczane obok siebie poprzez dodanie .card-linkdo <a>tagu.
Napisy są używane przez dodanie .card-subtitledo <h*>tagu. Jeśli elementy .card-titlei .card-subtitlesą umieszczone w .card-bodyelemencie, tytuł karty i podtytuł są dobrze wyrównane.
Tytuł karty
Podtytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Link do karty Kolejny link<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Obrazy
.card-img-topumieszcza obraz na górze karty. Dzięki .card-text, tekst może być dodany do karty. Tekst wewnątrz .card-textmoże być również stylizowany za pomocą standardowych znaczników HTML.
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Lista grup
Twórz listy treści na karcie z grupą list opróżniających.
- Przedmiot
- Druga pozycja
- Trzeci element
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>- Przedmiot
- Druga pozycja
- Trzeci element
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>- Przedmiot
- Druga pozycja
- Trzeci element
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>Zlew kuchenny
Mieszaj i dopasowuj różne rodzaje treści, aby utworzyć kartę, której potrzebujesz, lub wrzuć wszystko do niej. Poniżej pokazano style obrazów, bloki, style tekstu i grupę list — wszystko w karcie o stałej szerokości.
Tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
- Przedmiot
- Druga pozycja
- Trzeci element
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Nagłówek i stopka
Dodaj opcjonalny nagłówek i/lub stopkę na karcie.
Specjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieś<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Nagłówki kart mogą być stylizowane przez dodawanie .card-headerdo <h*>elementów.
Wyróżniony
Specjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieś<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Dobrze znany cytat zawarty w elemencie blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>Specjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieś<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>Rozmiary
Karty zakładają , że widthna początku nie są określone, więc będą miały 100% szerokości, chyba że zaznaczono inaczej. Możesz to zmienić w razie potrzeby za pomocą niestandardowego CSS, klas siatki, mixinów siatki Sass lub narzędzi.
Korzystanie ze znaczników siatki
Używając siatki, owiń karty w kolumny i rzędy zgodnie z potrzebami.
Specjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieśSpecjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieś<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Korzystanie z narzędzi
Skorzystaj z naszych kilku dostępnych narzędzi do zmiany rozmiaru , aby szybko ustawić szerokość karty.
Tytuł karty
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
PrzyciskTytuł karty
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Przycisk<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>Korzystanie z niestandardowego CSS
Użyj niestandardowego CSS w swoich arkuszach stylów lub jako style wbudowane, aby ustawić szerokość.
Specjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieś<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Wyrównanie tekstu
Możesz szybko zmienić wyrównanie tekstu dowolnej karty — w całości lub w określonych częściach — dzięki naszym klasom wyrównania tekstu .
Specjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieśSpecjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieśSpecjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieś<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Nawigacja
Dodaj nawigację do nagłówka (lub bloku) karty za pomocą komponentów nawigacji Bootstrap .
Specjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieś<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Specjalne traktowanie tytułów
Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Iść gdzieś<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Obrazy
Karty zawierają kilka opcji pracy z obrazami. Wybieraj spośród dołączania „zakończeń obrazu” na obu końcach karty, nakładania obrazów z treścią karty lub po prostu osadzania obrazu na karcie.
Czapki z obrazkami
Podobnie jak nagłówki i stopki, karty mogą zawierać górne i dolne „zakończenia obrazów” — obrazy na górze lub na dole karty.
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.
Ostatnia aktualizacja 3 minuty temu
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.
Ostatnia aktualizacja 3 minuty temu
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>Nakładki graficzne
Zmień obraz w tło karty i nałóż na nią tekst. W zależności od obrazu możesz potrzebować dodatkowych stylów lub narzędzi.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>Poziomy
Wykorzystując kombinację klas siatki i użyteczności, karty mogą być poziome w sposób przyjazny dla urządzeń mobilnych i responsywny. W poniższym przykładzie usuwamy rynny siatki .no-guttersi używamy .col-md-*klas, aby ustawić kartę poziomo w punkcie mdprzerwania. W zależności od zawartości karty mogą być potrzebne dalsze korekty.
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.
Ostatnia aktualizacja 3 minuty temu
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Style kart
Karty zawierają różne opcje dostosowywania tła, obramowania i koloru.
Tło i kolor
Użyj narzędzi tekstu i tła , aby zmienić wygląd karty.
Główny tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Dodatkowy tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Tytuł karty sukcesu
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Tytuł karty zagrożenia
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Tytuł karty ostrzegawczej
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Tytuł karty informacyjnej
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Jasny tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Ciemny tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Nadawanie znaczenia technologiom wspomagającym
Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w inny sposób, np. dodatkowy tekst ukryty z .sr-onlyklasą.
Granica
Użyj narzędzi granicznych , aby zmienić tylko border-colorkartę. Pamiętaj, że możesz umieścić .text-{color}klasy na rodzicu .cardlub podzbiorze zawartości karty, jak pokazano poniżej.
Główny tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Dodatkowy tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Tytuł karty sukcesu
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Tytuł karty zagrożenia
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Tytuł karty ostrzegawczej
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Tytuł karty informacyjnej
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Jasny tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
Ciemny tytuł karty
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Narzędzia do mieszania
W razie potrzeby możesz także zmienić obramowanie nagłówka i stopki karty, a nawet usunąć je background-colorza pomocą .bg-transparent.
Tytuł karty sukcesu
Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>Układ karty
Oprócz stylizowania zawartości kart, Bootstrap zawiera kilka opcji układania serii kart. Na razie te opcje układu nie są jeszcze responsywne .
Grupy kart
Użyj grup kart, aby renderować karty jako pojedynczy, dołączony element o równych kolumnach szerokości i wysokości. Grupy kart zaczynają się ułożone w stos i służą display: flex;do dołączania z jednolitymi wymiarami, zaczynając od smpunktu przerwania.
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.
Ostatnia aktualizacja 3 minuty temu
Tytuł karty
Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.
Ostatnia aktualizacja 3 minuty temu
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.
Ostatnia aktualizacja 3 minuty temu
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>W przypadku korzystania z grup kart ze stopkami ich zawartość zostanie automatycznie wyrównana.
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.
Tytuł karty
Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Talie kart
Potrzebujesz zestawu kart o jednakowej szerokości i wysokości, które nie są ze sobą połączone? Używaj talii kart.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
Ostatnia aktualizacja 3 minuty temu
Tytuł karty
Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.
Ostatnia aktualizacja 3 minuty temu
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.
Ostatnia aktualizacja 3 minuty temu
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Podobnie jak w przypadku grup kart, stopki kart w taliach zostaną automatycznie wyrównane.
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.
Tytuł karty
Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.
Tytuł karty
To jest szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Karty siatkowe
Użyj systemu siatek Bootstrap i jego .row-colsklas, aby kontrolować, ile kolumn siatki (owiniętych wokół twoich kart) wyświetlasz w rzędzie. Na przykład tutaj .row-cols-1układamy karty w jednej kolumnie i .row-cols-md-2dzielimy cztery karty na równą szerokość w wielu rzędach, od średniego punktu przerwania w górę.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Zmień go na .row-cols-3, a zobaczysz czwarte opakowanie karty.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Kiedy potrzebujesz równej wysokości, dodaj .h-100do kart. Jeśli chcesz domyślnie równe wysokości, możesz ustawić $card-height: 100%w Sass.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
Tytuł karty
To jest krótka karta.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.
Tytuł karty
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Kolumny kart
Karty można organizować w kolumny przypominające murarstwo za pomocą samego kodu CSS, pakując je w .card-columns. Karty są zbudowane z columnwłaściwościami CSS zamiast flexbox dla łatwiejszego wyrównania. Karty są uporządkowane od góry do dołu i od lewej do prawej.
Heads-up! Twój przebieg z kolumnami kart może się różnić. Aby zapobiec rozbijaniu kart przez kolumny, musimy je ustawić, display: inline-blockponieważ column-break-inside: avoidnie jest to jeszcze kuloodporne rozwiązanie.
Tytuł karty, który zawija się do nowej linii
Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.
Dobrze znany cytat zawarty w elemencie blockquote.
Tytuł karty
Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.
Ostatnia aktualizacja 3 minuty temu
Dobrze znany cytat zawarty w elemencie blockquote.
Tytuł karty
Ta karta ma normalny tytuł i krótki akapit tekstu poniżej.
Ostatnia aktualizacja 3 minuty temu
Dobrze znany cytat zawarty w elemencie blockquote.
Tytuł karty
To kolejna karta z tytułem i tekstem pomocniczym poniżej. Ta karta ma dodatkową zawartość, dzięki czemu jest nieco wyższa.
Ostatnia aktualizacja 3 minuty temu
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Kolumny kart można również rozszerzyć i dostosować za pomocą dodatkowego kodu. Poniżej pokazano rozszerzenie .card-columnsklasy wykorzystujące ten sam CSS, którego używamy — kolumny CSS — do generowania zestawu responsywnych warstw do zmiany liczby kolumn.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}