Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

11. díl - Bootstrap - Karty

HTML a CSS Bootstrap Bootstrap - Karty

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - List groups, jsme si představili list group. V té dnešní nás v CSS frameworku Bootstrap čekají karty.

Karty

Cards jsou v Bootstrapu 4 novinkou a působí zde jako univerzální kontejnery na další HTML obsah. Ve starších verzích se k této funkcionalitě využívaly panely, wells (studny) a miniatury (thumbnails). Tyto všechny 3 kontejnery nyní vytvoříme jen za pomoci karet přiřazením modifikačních tříd.

Ukázka

Ukažme si kód karty, která se často používá např. k výpisu položek v e-shopu. Bude obsahovat obrázek, titulek, podtitulek, popis a tlačítko.

<div class="card" style="width: 20rem;">
        <img class="card-img-top" src="https://www.dropbox.com/s/j81olx214b9wjoc/itnetwork_tshirt.jpg?dl=1" alt="Tričko ITnetwork">
        <div class="card-body">
                <h4 class="card-title">Tričko ITnetwork</h4>
                <p class="card-text">Programátorské tričko ze 100% bavlny pro všechny pravé geeky.</p>
                <a href="#" class="btn btn-primary">Do košíku</a>
        </div>
</div>

Do karty jsme vložili opravdu mnoho položek, abychom si je představili. V praxi by lépe vypadala jen s některými z nich. Výsledek v prohlížeči:

Karty v Bootstrap
cards.html

Kartu vytvoříme jak jinak, než divem se třídou .card. Ve výchozím nastavení se karty roztahují přes celou šířku rodičovského elementu, zde jsme té naší specifikovali šířku 20 rem. Úplně ideální by bylo vložit kartu do gridu, čímž by byla její šířka responzivní (viz dále). Stejně tak můžeme použít utility třídy jako např. .w-50 pro 50% šířky a podobně.

Pro obrázek jsme použili třídu .card-img-top. Pokud bychom obrázek umístili dolů, přiřadili bychom mu třídu .card-img-bottom. Poslední <div> má třídu .card-body a obsahuje jakýkoli HTML obsah karty. Všimněte si, že i nadpis má přiřazenou třídu .card-title, podnadpis .card-subtitle a nějaké další třídy pro margin a barvu. Odstavec s textem má třídu .card-text.

Karta jen s .card-body

Jednoduché karty můžeme vytvořit pouze pomocí divů se třídami .card a .card-body. Ke stylování můžeme použít standardní background a text utility.

Karty v Bootstrap
cards_pozadi.html

Jako vždy při použití barevných utilit bychom měli přidat i <span> se třídou .sr-only s informacemi co barva označuje pro hlasové čtečky.

Pomocí border utilit můžeme upravovat i rámeček, to se hodí pro jemné barevné zvýraznění karty:

Karty v Bootstrap
cards_pozadi.html

Hlavička/patička, list groups a odkazy

Karty jsou ve frameworku Bootstrap opravdu mocným pomocníkem. V další ukázce si předvedeme jak definovat hlavičku nebo patičku karty, jak do ní vložit list group a odkazy.

<div class="card" style="width: 20rem;">
        <h4 class="card-header">
                Jan Novák
        </h4>
        <ul class="list-group list-group-flush">
                <li class="list-group-item active">Události</li>
                <li class="list-group-item">Zprávy</li>
                <li class="list-group-item">Články</li>
                <li class="list-group-item disabled">Aukce</li>
        </ul>
        <div class="card-body">
                <a href="#" class="card-link">Odkaz 1</a>
                <a href="#" class="card-link">Odkaz 2</a>
        </div>
</div>

Hlavičku karet definujeme pomocí elementu se třídou .card-header. Místo elementu <h4> bychom mohli použít i element <div>. Taková hlavička by poté mohla obsahovat libovolný HTML obsah a byla by stále podbarvena šedě. List group přiřazujeme třídu list-group-flush, která způsobí, že rohy okolo list group nebudou zaoblené. Odkazům dodáváme třídu .card-link, která odkazům dodá pravý okraj a můžeme je snadno skládat vedle sebe.

Výsledek v prohlížeči:

Karty v Bootstrap
cards_dalsi_e­lementy.html

Obsahy samozřejmě můžeme míchat se vším, co jsme si již ukázali výše (obrázky, nadpisy, ...). Patičku bychom přidali obdobně a to pomocí elementu <div> na konci karty, kterému bychom přiřadili třídu .card-footer.

Použití Gridu

Karty můžeme vložit do responzivního gridu. Jelikož se roztahují přes celý rodičovský element, budou se krásně přizpůsobovat a zalamovat přesně jak si na gridu definujeme.

<div class="row">
        <div class="col-sm-6">
                <div class="card">
                        <div class="card-body">
                                <h4 class="card-title">Karta 1</h4>
                                <p class="card-text">Karta vložená v responzivním gridu. Zkuste si zmenšit velikost okna a zalomí se.</p>
                                <a href="#" class="btn btn-primary">Tlačítko</a>
                        </div>
                </div>
        </div>
        <div class="col-sm-6">
                <div class="card">
                        <div class="card-body">
                                <h4 class="card-title">Karta 2</h4>
                                <p class="card-text">Karta vložená v responzivním gridu. Zkuste si zmenšit velikost okna a zalomí se.</p>
                                <a href="#" class="btn btn-primary">Tlačítko</a>
                        </div>
                </div>
        </div>
</div>

Výsledek:

Karty v Bootstrap
cards_grid.html

Podrobnosti o GRIDu se dozvíme dále v kurzu, poté se sem můžete vrátit a vyzkoušet si další jeho funkce s kartami uvnitř.

Navigace

Další nakouknutí bude k navigacím, ke kterým se teprve dostaneme. Komponenty Bootstrapu jsou mezi sebou různě provázané a proto je nemožné vysvětlit je v kurzu postupně. To ale vůbec nevadí, podívejme se jak se do hlavičky karty vloží navigační lišta a zbytek si vysvětlíme později.

<div class="card text-center">
        <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                                <a class="nav-link active" href="#">Aktivní</a>
                        </li>
                        <li class="nav-item">
                                <a class="nav-link" href="#">Odkaz</a>
                        </li>
                        <li class="nav-item">
                                <a class="nav-link disabled" href="#">Neaktivní</a>
                        </li>
                </ul>
        </div>
        <div class="card-body">
                <h4 class="card-title">Nadpis</h4>
                <p class="card-text">Obsah karty.</p>
        </div>
</div>

Výsledek:

Karty v Bootstrap
cards_navigace.html

Pro alternativní vzhled, kde jsou místo záložek v liště tlačítka, využijeme tříd .nav-pills a .card-header-pills a třídy .nav-tabs a .card-header-tabs odebereme.

Výsledek:

Karty v Bootstrap
cards_navigace_pi­lls.html

Obrázkové pozadí

Díky podpoře image overlays můžeme kartám přiřadit obrázkové pozadí. To však nevložíme jako obrázek na pozadí, ale jako element <img> se třídou .card-img. Další obsah karty bude přes obrázek zobrazen jako tzv. overlay, překryvná vrstva, pomocí třídy .card-img-overlay:

<div class="card text-white" style="text-shadow: black 0px 0px 5px;">
        <img class="card-img" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_les.jpeg" alt="Les">
        <div class="card-img-overlay" style="text-shadow: black 0px 0px 5px;">
                <h4 class="card-title">Odpočíváte také někdy?</h4>
                <p class="card-text">Ne, vážně. Tohle není ukázkový text. Zajděte si do lesa, svět není jen počítač.</p>
        </div>
</div>

Výsledek:

Karty v Bootstrap
cards_overlay.html

Barvy můžeme používat i u hlavičky a patičky. Pokud bychom chtěli, aby byla hlavička nebo patička průhledná, použijeme třídu .bg-transparent.

Layouty

Kromě tvorby layoutů pomocí gridu pro nás Bootstrap připravil i tzv. skupiny karet (card groups). Ty jsou na rozdíl od gridu nalepené těsně na sebe. Asi je zbytečně podotýkat, je výsledek je plně responzivní. Pokud zmenšíte okno prohlížeče a karty se vedle sebe nevejdou, začnou se řadit nad sebe.

<div class="card-group">
        <div class="card">
                <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_les.jpeg" alt="Les">
                <div class="card-body">
                        <h4 class="card-title">Les</h4>
                        <p class="card-text">Víte, že do lesa si můžete zajít odpočinou od informačních technologií? :) Dobrý je např. ten Klánovický hned u Prahy.</p>
                </div>
                <div class="card-footer">
                        <small class="text-muted">21. září</small>
                </div>
        </div>
        <div class="card">
                <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_poust.jpeg" alt="Poušť">
                <div class="card-body">
                        <h4 class="card-title">Poušť</h4>
                        <p class="card-text">Tato karta je velmi krátká.</p>
                </div>
                <div class="card-footer">
                        <small class="text-muted">12. listopadu</small>
                </div>
        </div>
        <div class="card">
                <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_jezero.jpeg" alt="Jezero">
                <div class="card-body">
                        <h4 class="card-title">Jezero</h4>
                        <p class="card-text">Jezera se často vyskytovala v poezii, pravděpodobně pro pocity plynoucí z klidné hladiny rozlehlé vodní plochy. Není náhodou, že jedno z nejznámějších českých jezer nese jméno Karla Hynka Máchy, autora známé básně Máj.</p>
                </div>
                <div class="card-footer">
                        <small class="text-muted">6. února</small>
                </div>
        </div>
</div>

Výsledek:

Karty v Bootstrap
cards_skupiny.html

Všimněte si, že patičky se zarovnaly vedle sebe, i když je každá karta ve skutečnosti jinak vysoká. Co více si může webdesigner přát? :)

Kromě třídy .card-group můžeme použít i .card-deck. Karty jsou potom dále od sebe.

Zdi

Máte mnoho karet různých výšek, např. fotografií, a chtěli byste z nich poskládat zdi jako vypadají např. na Google+? Tato fíčura je pravděpodobně jedna z nejlepších v Bootstrapu, posuďte sami.

Všechny karty obalíme elementem <div> se třídou .card-columns. Poté již není k dosažení rozložení využíván flex box, ale CSS columns. Položky se řadí shora dolů a zleva doprava. Druhá položka je tedy stále v prvním sloupci a tak dále.

<div class="card-columns">
        <div class="card">
                <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_les.jpeg" alt="Les">
                <div class="card-body">
                        <h4 class="card-title">Les</h4>
                        <p class="card-text">Víte, že do lesa si můžete zajít odpočinou od informačních technologií? :) Dobrý je např. ten Klánovický hned u Prahy.</p>
                </div>
                <div class="card-footer">
                        <small class="text-muted">21. září</small>
                </div>
        </div>
        <div class="card">
                <img class="card-img-top" src="https://www.dropbox.com/s/j81olx214b9wjoc/itnetwork_tshirt.jpg?dl=1" alt="Tričko ITnetwork">
                <div class="card-body">
                        <h4 class="card-title">Tričko ITnetwork</h4>
                        <p class="card-text">Programátorské tričko ze 100% bavlny pro všechny pravé geeky.</p>
                        <a href="#" class="btn btn-primary">Do košíku</a>
                </div>
        </div>
        <div class="card">
                <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_poust.jpeg" alt="Poušť">
                <div class="card-body">
                        <h4 class="card-title">Poušť</h4>
                        <p class="card-text">Tato karta je velmi krátká.</p>
                </div>
                <div class="card-footer">
                        <small class="text-muted">12. listopadu</small>
                </div>
        </div>
        <div class="card bg-danger text-white">
                <div class="card-body">
                        Nikdy nevkládejte neošetřené proměnné přímo do SQL dotazů!
                </div>
        </div>
        <div class="card border-success">
                <div class="card-body text-success">
                        <h4 class="card-title">Splacená částka</h4>
                        Splaceno 100%
                </div>
        </div>
        <div class="card">
                <h4 class="card-header">
                        Jan Novák
                </h4>
                <ul class="list-group list-group-flush">
                        <li class="list-group-item active">Události</li>
                        <li class="list-group-item">Zprávy</li>
                        <li class="list-group-item">Články</li>
                        <li class="list-group-item disabled">Aukce</li>
                </ul>
                <div class="card-body">
                        <a href="#" class="card-link">Odkaz 1</a>
                        <a href="#" class="card-link">Odkaz 2</a>
                </div>
        </div>
        <div class="card">
                <img class="card-img-top" src="https://www.itnetwork.cz/images/5/css/bootstrap/pozadi_jezero.jpeg" alt="Jezero">
                <div class="card-body">
                        <h4 class="card-title">Jezero</h4>
                        <p class="card-text">Jezera se často vyskytovala v poezii, pravděpodobně pro pocity plynoucí z klidné hladiny rozlehlé vodní plochy. Není náhodou, že jedno z nejznámějších českých jezer nese jméno Karla Hynka Máchy, autora známé básně Máj.</p>
                </div>
                <div class="card-footer">
                        <small class="text-muted">6. února</small>
                </div>
        </div>
</div>

Výsledek v prohlížeči:

Karty v Bootstrap
cards_zdi.html

V příští lekci, Bootstrap - Carousely a Progress, nás čekají komponenty carousel a progress.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
1 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - List groups
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Carousely a Progress
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!