13. diel - Bootstrap - Karty

V predchádzajúcom cvičení, Riešené úlohy k 11.-12. lekciu Bootstrap CSS frameworku, 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) v Bootstrape sú 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 za pomoci 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 % šírky a podobne.

Pre 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ätička, list groups a odkazy

Karty sú vo frameworku Bootstrap skutočne mocným pomocníkom. V ďalšej ukážke si predvedieme ako definovať hlavičku alebo pätičku karty, 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 group priraďujeme triedu .list-group-flush, ktorá spôsobí, že rohy okolo list group nebudú zaoblené. Odkazom dodávame triedu .card-link, ktorá odkazom dodá 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ätičku by sme pridali obdobne 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 na 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:

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

Navigácia

Ďalšie nahliadnutie bude k navigáciám, ku ktorým sa ešte len dostaneme. Komponenty Bootstrapu sú medzi sebou rôzne previazané 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, prekryvná 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ätičkách. Pokiaľ by sme chceli, aby bola hlavička alebo pätička 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 ich zbytočne 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ätičky sa zarovnali vedľa seba, aj keď je každá karta v skutočnosti inak vysoká.

V budúcej lekcii, Bootstrap - Carousely a Progress, nás čakajú komponenty carousel a progress.