Karty

Karty Bootstrap zapewniają elastyczny i rozszerzalny kontener zawartości z wieloma wariantami i opcjami.

Na tej stronie

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ś

html

<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.

To jest tekst w treści karty.

html

<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

html

<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.

html

<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

html

<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>

Wyróżniony

Przedmiot
Druga pozycja
Trzeci element

html

<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

Stopka karty

html

<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

Link do karty Kolejny link

html

<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.

Wyróżniony

Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś

html

<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ś

html

<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>

Cytat

Dobrze znany cytat zawarty w elemencie blockquote.

Ktoś sławny w tytule źródła

html

<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>

Wyróżniony

Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś

2 dni temu

html

<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ś

html

<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.

Przycisk

Tytuł karty

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Przycisk

html

<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ś

html

<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ś

html

<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-end" 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>

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ś

html

<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" aria-current="true" 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ś

html

<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

html

<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.

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Pamiętaj, że treść nie powinna być większa niż wysokość obrazu. Jeśli zawartość jest większa niż obraz, zawartość zostanie wyświetlona poza obrazem.

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 .g-0i 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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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

Dodano w wersji 5.2.0

Ustaw background-colorkontrast na pierwszym planie colorz naszymi .text-bg-{color}pomocnikami . Wcześniej konieczne było ręczne sparowanie wybranych narzędzi .text-{color}i .bg-{color}narzędzi do stylizacji, z których nadal możesz korzystać, jeśli wolisz.

nagłówek

Główny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Dodatkowy tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Tytuł karty sukcesu

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Tytuł karty zagrożenia

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Tytuł karty ostrzegawczej

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Tytuł karty informacyjnej

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Jasny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Ciemny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

html

<div class="card text-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-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-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-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-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-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 text-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-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 .visually-hiddenklasą.

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.

nagłówek

Główny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Dodatkowy tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Tytuł karty sukcesu

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Tytuł karty zagrożenia

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Tytuł karty ostrzegawczej

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Tytuł karty informacyjnej

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Jasny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Ciemny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

html

<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">
    <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">
    <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.

nagłówek

Tytuł karty sukcesu

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

Stopka

html

<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

html

<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.

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

Ostatnia aktualizacja 3 minuty temu

html

<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>

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.

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Podobnie jak w przypadku grup kart, stopki kart 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.

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

Ostatnia aktualizacja 3 minuty temu

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Kamieniarstwo

Użyliśmy v4techniki opartej tylko na CSS, aby naśladować zachowanie kolumn podobnych do Masonry , ale ta technika miała wiele nieprzyjemnych skutków ubocznych . Jeśli chcesz mieć taki układ w programie v5, możesz po prostu skorzystać z wtyczki Masonry. Masonry nie jest zawarte w Bootstrap , ale przygotowaliśmy przykład demonstracyjny , który pomoże Ci zacząć.

CSS

Zmienne

Dodano w wersji 5.2.0

W ramach ewoluującego podejścia Bootstrap do zmiennych CSS, karty używają teraz lokalnych zmiennych CSS, .cardaby usprawnić dostosowywanie w czasie rzeczywistym. Wartości zmiennych CSS są ustawiane przez Sass, więc dostosowywanie Sass jest nadal obsługiwane.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Zmienne Sassa

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

Karty

O

Przykład

Tytuł karty

Rodzaje treści

Ciało

Tytuły, tekst i linki

Tytuł karty

Podtytuł karty

Obrazy

Lista grup

Zlew kuchenny

Tytuł karty

Nagłówek i stopka

Specjalne traktowanie tytułów

Wyróżniony

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Rozmiary

Korzystanie ze znaczników siatki

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Korzystanie z narzędzi

Tytuł karty

Tytuł karty

Korzystanie z niestandardowego CSS

Specjalne traktowanie tytułów

Wyrównanie tekstu

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Nawigacja

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Obrazy

Czapki z obrazkami

Tytuł karty

Tytuł karty

Nakładki graficzne

Tytuł karty

Poziomy

Tytuł karty

Style kart

Tło i kolor

Główny tytuł karty

Dodatkowy tytuł karty

Tytuł karty sukcesu

Tytuł karty zagrożenia

Tytuł karty ostrzegawczej

Tytuł karty informacyjnej

Jasny tytuł karty

Ciemny tytuł karty

Nadawanie znaczenia technologiom wspomagającym

Granica

Główny tytuł karty

Dodatkowy tytuł karty

Tytuł karty sukcesu

Tytuł karty zagrożenia

Tytuł karty ostrzegawczej

Tytuł karty informacyjnej

Jasny tytuł karty

Ciemny tytuł karty

Narzędzia do mieszania

Tytuł karty sukcesu

Układ karty

Grupy kart

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Karty siatkowe

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty