13. diel - Bootstrap - Karty

V predchádzajúcom cvičení, Riešené úlohy k 11.-12. lekcii CSS frameworku Bootstrap, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriáli CSS frameworku Bootstrap nás čakajú karty.

Karty v Bootstrape

Karty (Cards) sú v Bootstrape multifunkčné komponenty, ktoré poskytujú univerzálne kontajnery pre ďalší HTML obsah. V starších verziách sa k tejto funkcionalite využívali panely, wells (studne) a miniatúry (thumbnails). Teraz je možné všetky tieto kontajnery vytvoriť len s pomocou kariet s príslušnými modifikačnými triedami.

Ukážme si kód karty, ktorá sa často používa napr. na výpis položiek v e-shope. Bude obsahovať obrázok, titulok, podtitulok, popis a tlačidlo:

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/ictdemy_tshirt.png" alt="ICTdemy T-shirt">
    <div class="card-body">
        <h4 class="card-title">ICTdemy T-shirt</h4>
        <h6 class="card-subtitle mb-2 text-muted">Spring-Summer Collection</h6>
        <p class="card-text">100% cotton programmer T-shirt for all real geeks</p>
        <a href="#" class="btn btn-primary">Add to the cart</a>
    </div>
</div>

Do karty sme vložili naozaj mnoho položiek, aby sme si ich predstavili. V praxi by lepšie vyzerala len s niektorými z nich. Výsledok v prehliadači:

Kartu vytvoríme elementom <div> s triedou .card. V predvolenom nastavení sa karty rozťahujú cez celú šírku rodičovského elementu, tu sme tej našej špecifikovali šírku 20 rem. Úplne ideálne by bolo vložiť kartu do gridu, čím by bola jej šírka responzívna (viď ďalej). Rovnako môžeme použiť utility triedy ako napr. .w-50 pre 50 % šírku a podobne.

Na obrázok sme použili triedu .card-img-top. Pokiaľ by sme obrázok umiestnili dole, priradili by sme mu triedu .card-img-bottom. Posledná <div> má triedu .card-body a obsahuje akýkoľvek HTML obsah karty. Všimnime si, že aj nadpis má priradenú triedu .card-title, podnadpis .card-subtitle a nejaké ďalšie triedy pre margin a farbu. Odsek s textom má triedu .card-text.

Karta len s .card-body

Jednoduché karty môžeme vytvoriť iba pomocou divov s triedami .card a .card-body. Na štýlovanie môžeme použiť štandardné background a text utility, o ktorých sme hovorili v lekcii Bootstrap - Tabuľky:

Ako vždy pri použití farebných utilít by sme mali pridať aj <span> s triedou .visually-hidden s informáciami, čo farba označuje pre hlasové čítačky.

Pomocou border utilít, ktoré poznáme z lekcie Bootstrap - Obrázky, môžeme upravovať aj rámček. To sa hodí pre jemné farebné zvýraznenie karty:

Hlavička/päta, list groups a odkazy

Karty sú vo frameworku Bootstrap skutočne veľkým pomocníkom. V ďalšej ukážke si predvedieme, ako definovať hlavičku alebo pätu karty a ako do nej vložiť list group a odkazy:

<div class="card" style="width: 20rem;">
    <h4 class="card-header">
        John Doe
    </h4>
<ul class="list-group list-group-flush">
    <li class="list-group-item active">Events</li>
    <li class="list-group-item">News</li>
    <li class="list-group-item">Articles</li>
    <li class="list-group-item disabled">Auctions</li>
</ul>
<div class="card-body">
    <a href="#" class="card-link">Link 1</a>
    <a href="#" class="card-link">Link 2</a>
</div>

</div>

Hlavičku kariet definujeme pomocou elementu s triedou .card-header. Namiesto elementu <h4> by sme mohli použiť aj element <div>. Taká hlavička by potom mohla obsahovať ľubovoľný HTML obsah a bola by stále podfarbená sivo. List groupu priraďujeme triedu .list-group-flush, ktorá spôsobí, že rohy okolo list groupu nebudú zaoblené. Odkazom pridávame triedu .card-link, ktorá odkazom pridá pravý okraj a môžeme ich ľahko skladať vedľa seba.

Výsledok v prehliadači:

Obsahy samozrejme môžeme miešať so všetkým, čo sme si už ukázali vyššie (obrázky, nadpisy, ...). Pätu by sme pridali podobne, a to pomocou elementu <div> na konci karty, ktorému by sme priradili triedu .card-footer.

Použitie gridu

Karty môžeme vložiť do responzívneho gridu. Keďže sa rozťahujú cez celý rodičovský element, budú sa krásne prispôsobovať a zalamovať presne tak, ako si v gride definujeme:

<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card 1</h4>
                <p class="card-text">A card put inside a responsive grid. Try to reduce the window size and watch it wrap.</p>
                <a href="#" class="btn btn-primary">Button</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card 2</h4>
                <p class="card-text">A card put inside a responsive grid. Try to reduce the window size and watch it wrap.</p>
                <a href="#" class="btn btn-primary">Button</a>
            </div>
        </div>
    </div>
</div>

Výsledok:

Ďalšie podrobnosti sa o gride dozvieme ďalej v kurze. Potom sa sem môžete vrátiť a vyskúšať si jeho ďalšie funkcie s kartami vo vnútri.

Navigácia

Ďalej sa pozrieme na navigácie. Komponenty Bootstrapu sú medzi sebou rôzne prepletené, a preto je nemožné vysvetliť ich v kurze postupne. To ale vôbec nevadí, pozrime sa, ako sa do hlavičky karty vloží navigačná lišta a zvyšok si vysvetlíme neskôr:

<div class="card text-center">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Inactive</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <h4 class="card-title">Heading</h4>
        <p class="card-text">The card contents.</p>
    </div>
</div>

Výsledok:

Pre alternatívny vzhľad, kde sú namiesto záložiek v lište tlačidla, využijeme triedy .nav-pills a .card-header-pills a triedy .nav-tabs a .card-header-tabs odoberieme.

Výsledok:

Obrázkové pozadie

Vďaka podpore image overlays môžeme kartám priradiť obrázkové pozadie. To však nevložíme ako obrázok na pozadí, ale ako element <img> s triedou .card-img. Ďalší obsah karty bude cez obrázok zobrazený ako tzv. overlay, prekrývajúca vrstva, pomocou triedy .card-img-overlay:

<div class="card text-white" style="text-shadow: black 0px 0px 5px;">
    <img class="card-img" src="/images/wood_background.jpeg" alt="Wood">
    <div class="card-img-overlay" style="text-shadow: black 0px 0px 5px;">
        <h4 class="card-title">Do you ever have a rest?</h4>
        <p class="card-text">Did you know you can go to the woods to take a break from information technology? :)</p>
    </div>
</div>

Výsledok:

Farby môžeme používať aj pri hlavičkách a pätách. Pokiaľ by sme chceli, aby bola hlavička alebo päta priehľadná, použijeme triedu .bg-transparent.

Layouty

Okrem tvorby layoutov pomocou gridu pre nás Bootstrap pripravil aj takzvané skupiny kariet (card groups). Tie sú na rozdiel od gridu nalepené tesne na seba. Asi je zbytočné podotýkať, že výsledok je plne responzívny. Pokiaľ zmenšíme okno prehliadača a karty sa vedľa seba nezmestia, začnú sa radiť nad seba:

<div class="card-group">
    <div class="card">
        <img class="card-img-top" src="images/wood_background.jpeg" alt="Wood">
        <div class="card-body">
            <h4 class="card-title">Wood</h4>
            <p class="card-text">Did you know you can go to the woods to take a break from information technology? :) Bear Mountain State Park is very pretty.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">September 21st</small>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="images/desert_background.jpeg" alt="Desert">
        <div class="card-body">
            <h4 class="card-title">Desert</h4>
            <p class="card-text">This card is very short.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">November 12th</small>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="images/lake_background.jpeg" alt="Jezero">
        <div class="card-body">
            <h4 class="card-title">Lake</h4>
            <p class="card-text">Lakes are very common in poetry, probably for the feelings based upon the calm large surface of the water. It's no coincidence that there are many lakes named after famous poets, let's take Karel Macha as an example.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">February 6th</small>
        </div>
    </div>
</div>

Výsledok:

Všimnime si, že päty sa zarovnali vedľa seba, aj keď je každá karta v skutočnosti inak vysoká.

V ďalšej lekcii, Bootstrap - Carousely a Progress, nás čakajú komponenty carousel a progress.