Sprawdź najnowszą wersję komponentu cards zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.
Twórz własny design karty za pomocą generatora kart.
Jeśli korzystaliście z Bootstrap 3 to pewnie znane są Wam takie elementy jak panele, studnie i miniaturki obrazków. W wersji czwartej twórcy połączyli te elementy, dodali wiele nowych funkcjonalności i w ten sposób powstały karty. Możliwości ich użycia jest naprawdę wiele, w tym kursie są one wykorzystane między innymi do boksów na stronie głównej, listy wpisów oraz panelu bocznego z różnymi widgetami.
Gdy zapoznacie się z poniższymi przykładami, na pewno znajdziecie bardzo wiele zastosowań dla kart.
Podstawowy przykład
Podstawową klasą służącą do stworzenia karty jest klasa .card, także tworzenie karty zaczniemy od stworzenia diva właśnie z nią. Pamiętajmy, że karta zajmuje całą szerokość diva w którym się znajduje, więc jeśli chcemy kilka kart obok siebie to musimy je umieścić w kolumnach czyli np. w divach z klasą .col-md-4 Gdybyśmy chcieli na jej górze dodać obrazek to musimy mu nadać klasę .card-img-top, dobrze nadać mu dodatkowo klasę .img-fluid aby uniknąć „wyjeżdzania” obrazka poza kartę. Dobrze by było zamieścić w niej jakąś treść, tutaj najpierw musimy utworzyć diva z klasą .card-body, która doda nam padding i teksty nie będą „dotykały” obramowania karty. Dodanie tytułu polega na zastosowaniu znacznika nagłówka z klasą .card-title a paragrafowi z treścią dodajemy klasę .card-text. Jak widzicie klasy karty są intuicyjne i łatwo je zapamiętać (ale nie musicie ich pamiętać bo zawsze można zerknąć albo tu albo w oficjalną dokumentację:)).
Przykład
Tytuł karty
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Kod
<div class="card">
<img class="card-img-top img-fluid" src="https://placehold.it/320x180" alt="Alternatywny opis obrazka">
<div class="card-block">
<h4 class="card-title">Tytuł karty</h4>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
<a href="#" class="btn btn-primary">Button z linkiem</a>
</div>
</div>Elementy i budowa karty
W poprzednim punkcie dowiedzieliście się jak zbudować podstawową kartę z obrazkiem, tekstem i przyciskiem. Jej możliwości są dużo większe i poniżej przedstawię część z nich. Reszta zależy od Waszego zapotrzebowania i wyobraźni:)
Ciało karty
Jak napisałem wyżej, kartę budujemy poprzez stworzenia diva z klasą .card. Kolejny elementem, który musimy w nim zagnieździć, jest div z klasą .card-body. Dzięki niemu zyskamy paddingi/wypełnienia karty przez co treść, którą w niej umieścimy, będzie delikatnie oddalona od brzegów karty.
Przykład
Kod
<div class="card">
<div class="card-body">
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
</div>
</div>
Tytuł, treść i linki
Skoro mamy już „ciało” naszej karty to dobrze by było w końcu coś w niej umieścić. Zaczniemy od tytułu. Jak już pewnie zauważyliście, nazewnictwo klas w Bootstrapie jest takie, że od razu wiemy za co dana klasa odpowiada. Mieliśmy już .card-body, która odpowiadała za ciało funkcji, więc, jak się pewnie domyślacie, za tytuł odpowiedzialna będzie klasa .card-title. Ja w przykładach do nagłówków używam nagłówka >h5< ale możecie to zmieniać według swoich potrzeb.
Kolejnym elementem będzie podtytuł. Skorzystamy z połączenia klas .card-subtitle oraz klasy .text-mute, która spowoduje, że tekst będzie jaśniejszy, oraz klasy .mb-2, która doda nam pod spodem margines, by wizualnie oddzielić tytuł od treści pod nią zawartej.
Mamy już tytuły, pora na trochę tekstu. Utworzymy go przy użyciu paragrafu z klasą, jakże by inaczej .card-text. Treści dodajemy tyle ile potrzebujemy, ta klasa nie jest ostylowana przez Bootstrap, możecie ją ostylować według swoich wymagań albo nawet zmienić jej nazwę.
Kolejnym elementem, który może się nam przydać jest link. Odnośnikom wewnątrz karty dodajemy klasę .card-link. Dzięki niej linki w naszej karcie będą się układać obok siebie z odstępami.
Poniżej znajduje się przykład w którym zamieściłem opisane elementy.
Przykład
Tytuł karty
Podtytuł karty
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Kod
<div class="card">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<h6 class="card-subtitle mb-2 text-muted">Podtytuł karty</h6>
<p class="card-text"> Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
<a href="#" class="card-link">Link</a>
<a href="#" class="card-link">Drugi link</a>
</div>
</div>Obraz
Jeśli, przykładowo budujemy listę produktów, lub listę wpisów na blogu to warto było by umieścić miniaturę czy to towaru czy jakiegoś zdjęcia zawartego w poście by zachęcić użytkownika do kliknięcia. Pamiętajcie, że klasa .card-body dodaje nam paddingi, więc jeśli chcemy by nasz obraz stykał się bezpośrednio z obramowaniem karty to musimy go umieścić wewnątrz diva z klasą .card ale na zewnątrz diva z klasą .card-body. Nasz obraz musi mieć klasę .card-img-top ( możemy go umieścić również na dole, ale o tym później ). Dobrze jest również dodać naszemu obrazkowi klasę .img-fluid by zachowywał się responsywnie i zmieniał swój rozmiar tak jak karta.
Przykład
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Kod
<div class="card">
<img class="card-img-top" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<div class="card-body">
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>Lista
Wewnątrz naszej karty możemy umieścić listę. Może ona służyć na przykład do wypunktowania elementów naszej oferty bądź produktu, którego obrazek czy ikonę umieścimy na górze karty. Zaczynamy oczywiście do stworzenia diva z klasą .card a w nim, podobnie jak w przypadku obrazów czyli poza klasą .card-body umieszczamy listę z klasami .list-group list-group-flush a każdy element listy musi posiadać klasę .list-group-item. Klasy listy mogą być wam znajome gdyż to standardowa grupowa lista Bootstrapa.
Przykład
- Pierwszy element listy
- Drugi element listy
- Trzeci element listy
Kod
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">Pierwszy element listy</li>
<li class="list-group-item">Drugi element listy</li>
<li class="list-group-item">Trzeci element listy</li>
</ul>
</div>Łączenie elementów w karcie
Tak jak pisałem powyżej, w karcie można umieszczać wiele gotowych elementów jak obrazy czy listy. Poniżej przykład połączenie powyższych elementów. Przeanalizujcie proszę kod bo można w nim zauważyć, że najpierw oczywiście otwieramy klasę .card, następnie używamy obrazka, więc wstawiamy go z klasami .card-img-top oraz .img-fluid. Następnym elementem są teksty, więc otwieramy diva z klasą .card-body i w nim umieszczamy treści. Z racji tego, że następna jest lista to div .card-body musi zostać zamknięty. Dopiero teraz wstawiamy listę z klasami .list-group .list-group-flush. Następnym elementem są linki, je trzeba wstawić wewnątrz kolejnego diva z klasą .card-body, więc takowy tworzymy i dopiero w jego wnętrzu umieszczamy odnośniki z klasą .card-link.
Przykład
Tytuł karty
Podtytuł karty
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
- Pierwszy element listy
- Drugi element listy
- Trzeci element listy
Kod
<div class="card">
<img class="card-img-top img-fluid" src="https://placehold.it/350x180" alt="Alternatywny opis obrazka">
<div class="card-body">
<h4 class="card-title">Tytuł karty</h4>
<h6 class="card-subtitle text-muted">Podtytuł karty</h6>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Pierwszy element listy</li>
<li class="list-group-item">Drugi element listy</li>
<li class="list-group-item">Trzeci element listy</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Pierwszy link</a>
<a href="#" class="card-link">Drugi link</a>
</div>
</div>Nagłówek i stopka
Jeśli korzystaliście z Bootstrap 3 to pewnie są Wam znane panele. Jak pisałem na początku wpisu, karty łączą kilka elementów z BS3. Zatem tak jak w przypadku paneli, mamy do dyspozycji nagłówki oraz stopki naszych kart. Ja na tej stronie korzystam z nagłówków i stopek kart na liście wpisów. W każdym nagłówku mam tytuł wpisu, stopka natomiast służy mi do wyświetlenia kategorii wpisu.
Aby dodać nagłówek naszej karcie korzystamy z klasy .card-header, gdy nadacie tę klasę divowi to możecie w nim umieścić zwykły tekst. Gdybyście chcieli aby nagłówkiem karty był znacznik h* to właśnie jemu nadajemy w/w klasę. Należy pamiętać by element był pierwszym elementem wewnątrz diva z klasą .card ale nie był w środku diva z klasą .card-body.
Dodawanie stopki odbywa się podobnie. Tworzymy sobie diva z klasą .card-footer ale umieszczamy go jako ostatni element wewnątrz elementu z klasą .card.
Przykład
Nagłówek h3
Kod
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">
Zwykły nagłówek
</div>
<div class="card-block">
<h4 class="card-title">Tytuł karty</h4>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
<a href="#" class="btn btn-primary">button</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<h3 class="card-header">
Nagłówek h3
</h3>
<div class="card-block">
<h4 class="card-title">Tytuł karty</h4>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
<a href="#" class="btn btn-primary">button</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Tytuł karty</h4>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
<a href="#" class="btn btn-primary">button</a>
</div>
<div class="card-footer">
Stopka karty
</div>
</div>
</div>
</div>Rozmiary kart
Oczywiście prócz zawartości karty, bardzo ważnym elementem jest jej szerokość. Do zmiany szerokości kart wystarczy użyć, jak się pewnie domyślacie, Bootstrapowych kolumn. Także by kolumna na monitorze komputera zajmowała 1/3 ekranu musimy ją otoczyć divem z klasą .col-xl-4 a gdybyśmy na smarfonie chcieli dwie karty obok siebie to każdą kartę otaczamy divem z klasą .col-xs-6. Domyślnie karty zajmują 100% szerokości diva w którym się znajdują.
Przykład
Kod
<div class="row">
<div class="col-sm-6">
<div class="card card-body">
<h3 class="card-title">Tytuł</h3>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="col-sm-6">
<div class="card card-body">
<h3 class="card-title">Tytuł</h3>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>Niestandardowe rozmiary kart
Bootstrap umożliwia ustalenie własnego rozmiaru karty poprzez dopisanie do diva z klasą .card liniowo stylu CSS z zadaną szerokością (co ja piszę:/ Nie definiujemy liniowo CSSów!) bądź stworzenia nowej klasy ze zdefiniowaną wielkością czyli przykładowo width: 18rem;. Ale gdy zdecydujecie się na takie rozwiązanie to musicie pamiętać o zmianie wielkości dla różnych media queries.
Odnośnie liniowych CSSów: Bardzo złą praktyką jest dopisywanie stylów w dokumencie HTML, ma on służyć tylko do stworzenia struktury dokumentu a od jego stylowania są właśnie CSSy, które powinny być w oddzielnym pliku (ew. w sekcji head). Dodatkowo, wyobraźcie sobie, że stworzyliście motyw do WordPressa, zawiera on bardzo dużo plików i ogrom stylów. Gdzieś z lenistwa ostylowaliście liniowo jakiś element, posiada od także jakąś klasę. Dopisujecie coś do klasy a na stronie nic się nie zmienia – dzieje się tak dlatego, że liniowe style są „ważniejsze” od tych w pliku CSS. Zaczynacie kombinować czy to może cache, czy może jeszcze jakaś inna klasa modyfikuje element itp itd. Czasami dojście do problemu może napsuć krwi. Po to mamy pliki CSS aby nie wpisywać liniowo stylów:)
Przykład
Kod
<style>.card-custom-width { width: 18rem; }</style>
<div class="card card-body card-custom-width">
<h3 class="card-title">Tytuł karty</h3>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>Wyrównanie tekstu
Bootstrap posiada trzy klasy, które służą do wyrównywania tekstu. Są to klasy:
.text-*-left– do wyrówniania tekstu do lewej,.text-*-center– do wyśrodkowania,.text-*right– do wyrównania tekstu do prawej.
Gdzie pod * podstawiamy znane nam z rozmiarów kolumn i wpisie o breakpointach xs, sm, md, lg, xl. Dzięki temu możemy przykładowo wyśrodkować tekst na mobile a wyrównać do prawej na desktopie. Gdy użyjemy zapisu bez breakpointa czyli np .text-right to tekst będzie wyrównywany dla wszystkich rozdzielczości.
Gdy nadamy wybraną przez nas wyżej wymienioną klasę divowi z klasą .card to wszystkie elementy wewnątrz niej będą wyrównane zgodnie z naszym założeniem. Gdybyśmy chcieli na przykład wyśrodkować tylko tytuł to klasę .text-xs-center dodajemy tylko nagłówkowi z klasą .card-title.
Przykład
Wyrównanie całości:
Wyrównanie poszczególnych elementów:
Kod
<!-- Wyrównanie całości -->
<div class="row">
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">Tytuł</h4>
<p class="card-text">Całość tej karty nie ma wyrównywania tekstu, więc ustawia się on domyślnie do lewej.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="col-md-4">
<div class="card card-body text-center">
<h4 class="card-title">Tytuł</h4>
<p class="card-text">Całość tej karty jest wyrównywana do środka.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="col-md-4">
<div class="card card-body text-right">
<h4 class="card-title">Tytuł</h4>
<p class="card-text">Całość tej karty jest wyrównywana do prawej.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- Wyrównanie poszczególnych elementów -->
<div class="row">
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">Tytuł</h4>
<p class="card-text">Całość tej karty nie ma wyrównywania tekstu, więc ustawia się on domyślnie do lewej.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title text-center">Tytuł</h4>
<p class="card-text">Tylko tytuł tej karty jest wyrównany do środka.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">Tytuł</h4>
<p class="card-text text-right">Tylko treść tej karty jest wyrównana do prawej.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>Karta z zakładkami
Wśród wielu gotowych rozwiązań zawartych w Bootstrapie znajdziemy również zakładki/taby. Można je połączyć z kartą gdzie nagłówek karty będzie zawierał poszczególne zakładki a zawartość karty będzie ich zawartością. Ich budowa jest dość rozbudowana, więc prócz opisu, proszę byście przestudiowali cały kod, aby wiedzieć jak to dokładnie działa.
Zaczynamy oczywiście od stworzenia karty czyli diva z klasą .card. Tytułu zakładek będą w nagłówku karty, więc musimy otworzyć div z klasą .card-header. Następnie umieszczamy w nim poniższy kod:
Jest to lista, w której, w dużym uproszczeniu interesuje nas atrybut href="#" gdyż on odpowiada za wyświetlenie zawartości z poniższego kodu, który umieszczamy w divie z klasą .card-body:
Treść karty #homeTreść karty #profileTreść karty #contact
Jak widzicie, pierwszy link w liście #myTab posiada odnośnik do #home a pierwszy div wewnątrz #myTabContent ma właśnie identyfikator #home, więc kliknięcie w pierwszą zakładkę spowoduje wczytanie tej treści itd.
Proces stworzenia karty z nawigacją wygląda tak:
- Utworzenia diva z klasą
.card - W nagłówku karty (
.card-header) umieszczenie listy z klasami.nav .nav-tabs .nav-header-tabs - Utworzenie potrzebnej ilości elementów listy z klasami
.nav-item - Umieszczenie w elementach listy odnośników do treści oraz nadanie im klasy
.nav-link - Utworzenie diva z klasą
.card-bodyw którym będziemy umieszczali treści poszczególnych zakładek - Umieszczenie w w/w divie kolejnego z klasą
.tab-content - Umieszczenie w divie
.tab-contenttylu divów z klasą.tab-paneile umieściliśmy wcześniej odnośników - W każdym divie z klasą
.tab-paneumieszczamy treść naszej karty, gdzie możemy korzystać z tytułów kart, treści, linków itp
Wiem, że brzmi to dość skomplikowanie ale patrząc na kod tego rozwiązania wszystko okazuje się czytelne i nie tak trudne do zaimplementowania:)
Przykład
Kod
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Treść karty #home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Treść karty #profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Treść karty #contact</div>
</div>
</div>
</div>Obrazy w kartach
Już wcześniej pisałem o tym, że w karcie można umieścić obrazy i pokazałem przykład gdzie był on u góry. Tutaj pojawi się jeszcze informacja o tym jak umieścić go na dole karty lub aby był jej tłem.
Obraz w treści karty
Umieszczenie obrazu na górze karty realizowaliśmy poprzez wstawienie go zaraz na początku kodu karty i przed klasą .card-body. Dodawaliśmy temu obrazowi klasę .card-img-top. Umieszczenie go na dole polega na umieszczeniu go za klasą .card-body i zaraz przed zamknięciem diva z klasą .card. Obraz na dole musi mieć klasę .card-img-bottom.
Przykład
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Kod
<div class="card">
<img class="card-img-top" src="https://placehold.it/1280x150" alt="Obrazek w karcie">
<div class="card-body">
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
<img class="card-img-bottom" src="https://placehold.it/1280x150" alt="Obrazek w karcie">
</div>Obraz jako tło karty
Kolejną możliwością połączenia kart i obrazu jest jego wyświetlenie jako jej tło. Aby uzyskać taki efekt, najpierw oczywiście tworzymy kartę czyli diva z klasą .card, następnie w jej wnętrzu umieszczamy obraz, który ma być naszym tłem i nadajemy mu klasę .card-img. Kolejny elementem jest stworzenie diva z klasą .card-img-overlay a w nim umieszczamy już treść naszej karty. Pamiętajcie, że jeśli nasz obraz będzie ciemny to może się okazać, że tekst musi być biały. Uzyskamy go albo za pomocą CSSa albo gdy naszej karcie dodamy klasę .text-white.
Przykład
Kod
<div class="card text-white">
<img class="card-img" src="https://placehold.it/1280x500" alt="Obrazek w karcie">
<div class="card-img-overlay">
<h5 class="card-title">Tytuł karty</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>Stylowanie kart
Wiecie już pewnie, że Bootstrap ma swoje „wbudowane” kolory, które uzyskujemy poprzez klasy z nazwami np .text-primary czy .btn-danger. Mają one również zastosowanie w przypadku kart, tylko tutaj korzystamy z klasy .bg-*, gdzie pod gwiazdkę możemy podstawić primary, secondary, success, danger, warning, info, light, dark w zależności od tego jaki kolor chcemy uzyskać. Podobnie jak w powyższym przykładzie, czasami będziemy potrzebowali białego tekstu. Uzyskamy go poprzez dodanie karcie klasy .text-white. Zauważcie, że karta z klasą .bg-light nie ma klasy .text-white bo biały tekst byłby niewidoczny na jasnej karcie. Myślę, że nie ma się co tu więcej rozpisywać. Poniższe przykłady pokażą Wam kolory kart w akcji.
Przykład
Primary card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Secondary card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Success card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Danger card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Warning card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Info card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Light card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Dark card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Kod
<div class="card text-white bg-primary">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card text-white bg-secondary">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card text-white bg-success">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card text-white bg-danger">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card text-white bg-warning">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card text-white bg-info">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card bg-light">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card text-white bg-dark3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>Obramowanie kart
Możemy zmienić kolory całych kart, ale możemy także zmienić im tylko obramowanie i/lub kolor tekstu w środku. Oczywiście znów mówię o wbudowanych w Bootstrap kolorach. Zmianę koloru obramowania uzyskamy poprzez dodanie do diva z klasą .card klasy .border-*, gdzie podobnie jak w przypadku kolorów całych kart mamy do wyboru primary, secondary, success, danger, warning, info, light, dark. Aby zmienić kolor tekstu wewnątrz karty, divowi z klasą .card-body dodajemy klasę .text-* i już wiecie co podstawić pod gwiazdkę:)
Przykład
Primary card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Secondary card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Success card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Danger card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Warning card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Info card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Light card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Dark card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Kod
<div class="card border-primary">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card border-secondary3">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card border-success">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card border-danger">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card border-warning">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card border-info">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card border-light">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>
<div class="card border-dark">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
</div>Obramowanie nagłówka i stopki karty
Nagłówek i stopka karty czyli divy .card-header oraz .card-footer również mogą posiadać obramowanie. Wystarczy dodać im klasę .border-* z wybranym przez nas kolorem. Jak widzieliście wcześniej, mają one szare tło. Można je łatwo usunąć poprzez dodanie im klasy .bg-transparent. Oczywiście kolor zarówno nagłówka jak i tła możemy również zmienić za pomocą klas .text-*.
Przykład
Success card title
Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.
Kod
<div class="card border-success">
<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">Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.</p>
</div>
<div class="card-footer bg-transparent border-success text-success">Footer</div>
</div>Układ kart
Wcześniej poznaliśmy elementy, które można umieścić wewnątrz kart oraz sposoby na zmianę wyglądu. Nadszedł więc czas by poznać kilka sposobów na układanie kilku kart obok siebie. Na daną chwilę grupy kart nie są responsywne tj nie poukładają się „pod sobą” a jedynie „ścisną” na mniejszych rozdzielczościach dlatego jeśli chcecie uzyskać efekt układania się kart pod sobą, korzystajcie z kolumn.
Grupy kart
Pierwszym elementem, który poznamy jest grupa kilku kart umieszczonych obok siebie i nie posiadających pomiędzy sobą odstępów. Dodatkowo wszystkie karty w grupie mają tę samą wysokość. Taki efekt uzyskamy otaczając wybraną przez nas ilość pojedynczych kart divem z klasą .card-group
Przykład
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison.
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs.
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs. Brisket pancetta leberkas chicken, doner drumstick corned beef cow landjaeger t-bone pork loin pork chop tongue.
Kod
<div class="card-group">
<div class="card">
<img class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<p class="card-text">Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison.</p>
</div>
</div>
<div class="card">
<img class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<p class="card-text">Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs.</p>
</div>
</div>
<div class="card">
<img class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<p class="card-text">Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs. Brisket pancetta leberkas chicken, doner drumstick corned beef cow landjaeger t-bone pork loin pork chop tongue.</p>
</div>
</div>
</div>Jeśli potrzebujemy dodać naszym kartom stopki czyli divy z klasą .card-footer to będą się one automatycznie układały równo na dole.
Przykład
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison.
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs.
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs. Brisket pancetta leberkas chicken, doner drumstick corned beef cow landjaeger t-bone pork loin pork chop tongue.
„Talie kart”
Nie za bardzo wiedziałem jak to nazwać, więc posłużyłem się tłumaczeniem z dokumentacji:) Różnica pomiędzy grupą a talią kart jest taka, że nie są one „przyklejone” do siebie a posiadają odstępy pomiędzy. Tutaj podobnie jak w powyższym przykładzie, stopki wyrównają się na dole. Talie uzyskujemy otaczając potrzebną nam ilość kart divem z klasą .card-deck
Przykład
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison.
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs.
Tytuł karty
Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs. Brisket pancetta leberkas chicken, doner drumstick corned beef cow landjaeger t-bone pork loin pork chop tongue.
Kod
[bs-example]
<div class="card-deck">
<div class="card">
<img class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<p class="card-text">Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison.</p>
</div>
</div>
<div class="card">
<img class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<p class="card-text">Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs.</p>
</div>
</div>
<div class="card">
<img class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<div class="card-body">
<h5 class="card-title">Tytuł karty</h5>
<p class="card-text">Spicy jalapeno bacon ipsum dolor amet pork loin pastrami filet mignon, andouille bacon pancetta shankle capicola drumstick tri-tip fatback corned beef ground round venison. Drumstick boudin capicola spare ribs. Brisket pancetta leberkas chicken, doner drumstick corned beef cow landjaeger t-bone pork loin pork chop tongue.</p>
</div>
</div>
</div>
[/bs-example]Kolumny kart ( Masonry )
Pewnie kojarzycie taki sposób wyświetlania, zwykle postów na blogach, lub galerii zdjęć, gdzie elementy, niezależnie od swoich rozmiarów, same dopasowują się tak by nie tworzyć pustych przestrzeni. Nazywa się to potocznie „masonry” i jest już wbudowane w Bootstrapie:) Nasze karty mogą mieć różne typu zawartości oraz różną ilość tekstu, zdjęć itp a owa biblioteka zadba by „poukładały” się one obok i pod sobą. Aby uzyskać taki efekt, otaczamy nasze karty divem z klasą .card-columns.
P.S Wybaczcie za brak tłumaczenia wewnątrz poniższych kart ale ten wpis był tak długi, że już mi się zwyczajnie nie chce;)
Przykład
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
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.
Last updated 3 mins ago
Kod
<div class="card-columns">
<div class="card">
<img class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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 class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<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 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 class="card-img" src="https://placehold.it/300x150" alt="Obrazek w karcie">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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 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>
(23 głosów, średnia: 4,91 na 5)
Loading...
4 komentarzy w “Karty / Cards”
Paweł
I to już koniec? A taki fajny tutorial się zapowiadał:)
Robert Autor
Zdaję sobie sprawę, że od dawna się nic nie pojawiło. Od kilku miesięcy doskwiera mi permanentny brak czasu:( Czasami też po pracy zwyczajnie nie mogę patrzeć na komputer;) ale na pewno w końcu uzupełnię ten tutorial!
Mikołaj
Czekam na dalszą część 🙂
Patryk
Może trochę późno, ale nikt nie zwrócił uwagi, że w pierwszym przykładzie zamiast
powinno być
i teraz powinno działać 😉