Karty / Cards

4 717 3

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

Obrazek w karcie

Tytuł karty

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Button z linkiem

Kod

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

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Kod

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

LinkDrugi link

Kod

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

Obrazek w karcie

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Kod

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

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

Alternatywny opis obrazka

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

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

Zwykły nagłówek

Tytuł karty

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

button

Nagłówek h3

Tytuł karty

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

button

Tytuł karty

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

button

Kod

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

Tytuł

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Button

Tytuł

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Button

Kod

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

Tytuł karty

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Button

Kod

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:

Tytuł

Całość tej karty nie ma wyrównywania tekstu, więc ustawia się on domyślnie do lewej.

Button

Tytuł

Całość tej karty jest wyrównywana do środka.

Button

Tytuł

Całość tej karty jest wyrównywana do prawej.

Go somewhere

Wyrównanie poszczególnych elementów:

Tytuł

Całość tej karty nie ma wyrównywania tekstu, więc ustawia się on domyślnie do lewej.

Button

Tytuł

Tylko tytuł tej karty jest wyrównany do środka.

Button

Tytuł

Tylko treść tej karty jest wyrównana do prawej.

Go somewhere

Kod

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:

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-body w 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-content tylu divów z klasą .tab-pane ile umieściliśmy wcześniej odnośników
  • W każdym divie z klasą .tab-pane umieszczamy 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

Treść karty #home
Treść karty #profile
Treść karty #contact

Kod

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

Obrazek w karcie

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

Obrazek w karcie

Kod

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

Obrazek w karcie

Tytuł karty

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Kod

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

Header
Primary card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Secondary card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Success card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Danger card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Warning card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Info card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Light card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Dark card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Kod

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

Header
Primary card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Secondary card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Success card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Danger card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Warning card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Info card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Light card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Header
Dark card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Kod

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

Header
Success card title

Treść naszej karty, czyli jakiś opis czy cokolwiek chcemy w niej zamieścić.

Kod

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

Obrazek w karcie

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.

Obrazek w karcie

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.

Obrazek w karcie

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

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

Obrazek w karcie

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.

Obrazek w karcie

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.

Obrazek w karcie

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

Obrazek w karcie

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.

Obrazek w karcie

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.

Obrazek w karcie

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

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

Obrazek w karcie

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.


Someone famous in Source Title

Obrazek w karcie

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.


Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Obrazek w karcie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Someone famous in Source Title

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

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (19 głosów, średnia: 4,89 na 5)
Loading...

3 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ęść 🙂

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*