27. diel - Bootstrap - Multimediálne objekty a kontajnery

V minulej lekcii, Bootstrap - Tooltipy, sme si predstavili Tooltipy, ich inicializáciu a ovládanie JavaScriptom.

V dnešnom tutoriáli CSS frameworku Bootstrap si predstavíme takzvané mediálne objekty a kontajnery.

Multimediálne objekty v Bootstrape

Media objects, po slovensky mediálne objekty, sú komponenty, ktoré poznáme zo sociálnych médií, kde reprezentujú statusy alebo komentáre. V ľavej časti komponentu sa nachádza avatar alebo všeobecný obrázok, v pravej potom nadpis a text. V Bootstrape si môžeme všetko jednoducho vytvoriť. Vo väčšine webových projektov využijeme minimálne komentáre/refe­rencie užívateľov.

Začnime ukážkou. Základná HTML štruktúra mediálneho objektu je nasledovná:

<div class="d-flex">
    <img class="flex-shrink-0" src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/avatar.png" alt="David Hartinger" width="64" height="64">
    <div class="flex-grow-1 ms-3">
        <h5 class="mt-0">David Hartinger, 13:05</h5>
        Today, when asking for a mortgage, I was asked what my last job was. I replied that I've never been employed :)
    </div>
</div>

Celý komponent je obalený elementom <div> s triedou .d-flex. Dovnútra vkladáme obrázok, zvyčajne s triedou definujúcou margin, napríklad .me-3. Druhým vnoreným elementom je <div> s triedou .flex-grow-1, obsahujúcou telo mediálneho objektu.

Live ukážka v prehliadači:

Skladanie

Ako ďalšia ukážka nasleduje skladanie mediálnych objektov do seba, čím môžeme jednoducho vyrenderovať nejakú zanorenú diskusiu, napríklad komentáre pod statusom. Ďalšie mediálne objekty umiestňujeme do tela pod obsah objektu, ktorého sa týkajú:

<div class="d-flex">
    <img class="flex-shrink-0 me-3" src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/avatar.png" alt="David Hartinger" width="64" height="64">
    <div class="flex-grow-1">
        <h5 class="mt-0">David Hartinger, 13:05</h5>
        Today, when asking for a mortgage, I was asked what my last job was. I replied that I've never been employed :)
        <div class="d-flex mt-3">
            <a class="flex-shrink-0 ms-3" href="https://www.itnetwork.sk/portfolio/17">
                <img class="flex-shrink-0" src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/avatar_david.png" alt="David Jančík" width="64" height="64">
            </a>
            <div class="flex-grow-1">
                <h5 class="mt-0">David Jančík, 14:22</h5>
                Better go to the gym with me! :P
            </div>
        </div>
    </div>
</div>

Výsledok:

Zarovnanie a poradie

Keďže layout mediálnych objektov docielime pomocou flexboxu, môžeme ho prispôsobovať pomocou flex utilities z lekcie Bootstrap - Flex utilities. Ukážme si, ako zarovnať avatary na koniec príspevku namiesto na začiatok priradením triedy .align-self-end elementu <img>. Rovnako tak môžeme zmeniť aj poradie elementov a obrázok presunúť napríklad napravo. Prehodíme elementy <img> a <div> a obrázku namiesto pravého marginu nastavíme ľavý:

<div class="d-flex">
    <div class="flex-shrink-0 me-3">
        <h5 class="mt-0">David Hartinger, 13:05</h5>
        Today, when asking for a mortgage, I was asked what my last job was. <br /><br />I replied that I've never been employed :)
    </div>
    <img class="align-self-end ms-3" src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/avatar.png" alt="David Hartinger" width="64" height="64">
</div>

Výsledok:

Mediálne zoznamy

Triedu .media môžeme použiť aj na elementy <li> zoznamov <ul> alebo <ol>. Zo zoznamu však musíme prvýkrát odstrániť predvolené štýly triedou .list-unstyled. Podobné zoznamy na sieti používame na výpis lekcií online kurzov:

<ul class="list-unstyled">
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/bootstrap-stack.png" alt="Bootstrap course" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Introduction to the Bootstrap CSS Framework</h5>
            An introduction to the most popular CSS framework explains why to use frameworks. We'll create our first website and show where to find free templates.
        </div>
    </li>
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/bootstrap-stack.png" alt="Bootstrap course" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Bootstrap - Reboot</h5>
            In this tutorial, we'll describe how Reboot resets the default CSS style and which conventions we should follow while working with the Bootstrap framework.
        </div>
    </li>
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/bootstrap-stack.png" alt="Bootstrap course" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Bootstrap - Typography</h5>
            In this tutorial, we'll mention first Bootstrap classes for styling headings and subheadings, abbreviations, and lists. We'll introduce utility classes.
        </div>
    </li>
</ul>

Výsledok:

Kontajnery

Vráťme sa ešte na chvíľku ku kontajnerom. Tie v Bootstrape používame najmä kvôli centrovaniu a grid systému. Ten najjednoduchší kontajner na ďalšie elementy vytvoríme z elementu <div> pridaním triedy .container. Kontajner sa na malých viewportoch rozťahuje, ale na väčších si drží fixnú šírku podľa aktuálneho breakpointu. Farebné pozadie v ukážke pridávame len preto, aby boli vidieť hranice kontajnera:

<div class="container bg-primary">
    Container
</div>

Výsledok v prehliadači:

Môžeme použiť aj triedu .container-fluid. Tá na rozdiel od .container rozťahuje kontajner vždy na 100 % šírky, ako by ste od divu očakávali:

<div class="container-fluid bg-primary">
    Fluid container
</div>

Výsledok:

Z-index

Bootstrap svojim komponentom, ktoré sa zobrazujú cez nejaký obsah, prideľuje aj hodnoty CSS vlastnosti z-index, aby nedochádzalo ku kolíziám. Napríklad dropdown tlačidlo z lekcie Bootstrap – Dropdowns by sa malo vždy zobraziť nad klasickým obsahom. Pokiaľ niekde použijeme modálny dialóg z lekcie Bootstrap - Modálne dialógy, mal by sa zobraziť nad klasickým obsahom aj nad dropdown tlačidlami. Tooltipy z lekcie Bootstrap - Tooltipy by sa mali zobraziť úplne nad všetkým, pretože môžu byť ako v klasickom obsahu, tak aj v tom modálnom.

Bootsrap priraďuje týmto prekrývajúcim komponentom nasledujúce hodnoty z-index. Pokiaľ by sme na stránku pridávali nejaký vlastný komponent, ktorý obsah prekrýva, mali by sme priradiť taký z-index, aby bol s týmito hodnotami v súlade:

• Dropdowny - 1000,
• Sticky elementy - 1020,
• Fixed elementy - 1030,
• Pozadie (backdrop) modálnych prvkov - 1040,
• Modálne prvky - 1050,
• Popovery - 1060,
• Tooltipy - 1070.

Gratulujem! Teraz ovládate mocný nástroj, ktorý vám umožní tvoriť šablóny oveľa rýchlejšie, ako to zvládnu ostatní, ktorí ho nepoznajú. A to sa vám určite bude hodiť! Vývoj softvéru zaberie veľa času a keď ho niekde dokážete ušetriť, budete úspešnejší

V nasledujúcom kvíze, Kvíz - Bootstrap, si vyskúšame nadobudnuté skúsenosti z kurzu.