Lekce 27 - Bootstrap - Multimediální objekty a kontejnery

V minulé lekci, Bootstrap - Tooltipy, jsme si představili Tooltipy, jejich inicializace a ovládání JavaScriptem.

V dnešním tutoriálu CSS frameworku Bootstrap si představíme takzvané mediální objekty a kontejnery.

Multimediální objekty v Bootstrapu

Media objects, česky mediální objekty, jsou komponenty, které známe ze sociálních médií, kde reprezentují statusy nebo komentáře. V levé části komponenty se nalézá avatar nebo obecný obrázek, v pravé potom nadpis a text. V Bootstrapu si vše můžeme jednoduše vytvořit. Minimálně komentáře/reference uživatelů určitě využijeme ve většině webových projektů.

Začněme ukázkou. Základní HTML struktura mediálního objektu je následující:

<div class="d-flex">
    <img class="flex-shrink-0" src="https://www.itnetwork.cz/images/5/css/bootstrap/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>
        Dnes se mě při žádosti o hypotéku ptali, jaké bylo mé poslední zaměstnání. Odpověděl jsem, že jsem nikdy zaměstnaný nebyl :)
    </div>
</div>

Celá komponenta je obalena elementem <div> se třídou .d-flex. Dovnitř vkládáme obrázek, obvykle se třídou definující margin, například .me-3. Druhým vnořeným elementem je <div> se třídou .flex-grow-1, obsahující tělo mediálního objektu.

Živá ukázka v prohlížeči:

Skládání

Jako další ukázka následuje skládání mediálních objektů do sebe, čímž můžeme jednoduše vyrenderovat nějakou zanořenou diskuzi, například komentáře pod statusem. Další mediální objekty umisťujeme do těla pod obsah objektu, kterého se týkají:

<div class="d-flex">
    <img class="flex-shrink-0 me-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Hartinger" width="64" height="64">
    <div class="flex-grow-1">
        <h5 class="mt-0">David Hartinger, 13:05</h5>
        Dnes se mě při žádosti o hypotéku ptali, jaké bylo mé poslední zaměstnání. Odpověděl jsem, že jsem vlastně nikdy zaměstnaný nebyl :D

        <div class="d-flex mt-3">
            <a class="flex-shrink-0 ms-3" href="https://www.itnetwork.cz/portfolio/17">
                <img class="flex-shrink-0" src="https://www.itnetwork.cz/images/5/css/bootstrap/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>
                Pojď raději do fitka! :P
            </div>
        </div>
    </div>
</div>

Výsledek:

Zarovnání a pořadí

Jelikož je layoutu mediálních objektů docíleno pomocí flexboxu, můžeme jej uzpůsobovat pomocí flex utilities z lekce Bootstrap - Flex utilities. Ukažme si, jak zarovnat avatary na konec příspěvku místo na začátek přiřazením třídy .align-self-end elementu <img>. Stejně tak můžeme změnit i pořadí elementů a obrázek přesunout například napravo. Prohodíme elementy <img> a <div> a obrázku místo pravého marginu nastavíme levý:

<div class="d-flex">
    <div class="flex-shrink-0 me-3">
        <h5 class="mt-0">David Hartinger, 13:05</h5>
        Dnes se mě při žádosti o hypotéku ptali, jaké bylo mé poslední zaměstnání.<br /><br />Odpověděl jsem, že jsem vlastně nikdy zaměstnaný nebyl :D
    </div>
    <img class="align-self-end ms-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Hartinger" width="64" height="64">
</div>

Výsledek:

Mediální seznamy

Třídu .media můžeme použít i na elementy <li> seznamů <ul> nebo <ol>. Ze seznamu musíme ovšem prvně odstranit výchozí styly třídou .list-unstyled. Podobné seznamy na síti používáme pro výpis lekcí online kurzů:

<ul class="list-unstyled">
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Úvod do CSS frameworku Bootstrap</h5>
            Úvod do nejpopulárnějšího CSS frameworku vysvětlí proč bychom měli frameworky používat, vytvoříme první stránku a řekneme si kde najít šablony zdarma.
        </div>
    </li>
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Bootstrap - Reboot</h5>
            V tutoriálu si popíšeme jak Reboot resetuje výchozí CSS styly a jaké konvence bychom měli při práci s CSS frameworkem Bootstrap dodržovat.
        </div>
    </li>
    <li class="d-flex align-items-start mb-3">
        <img class="flex-shrink-0 me-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div>
            <h5 class="mt-0 mb-1">Bootstrap - Typografie</h5>
            V tutoriálu si zmíníme první Bootstrap třídy, kterými explicitně stylujeme nadpisy a podnadpisy, citace, zkratky a seznamy. Seznámíme se s utility třídami.
        </div>
    </li>
</ul>

Výsledek:

Kontejnery

Protože se dostáváme ke grid systému, je na čase si představit kontejnery. Ty v Bootstrapu používáme zejména kvůli centrování a grid systému. Ten nejjednodušší kontejner na nějaké další elementy vytvoříme z elementu <div> přidáním třídy .container. Kontejner se na malých viewportech roztahuje, ale na větších si drží fixní šířku podle aktuálního breakpointu. Barevné pozadí v ukázce přidáváme jen proto, aby byly vidět hranice kontejneru:

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

Výsledek v prohlížeči:

Můžeme použít také třídu .container-fluid. Ta na rozdíl od .container roztahuje kontejner vždy na 100 % šířky, jak byste od divu očekávali:

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

Výsledek:

Z-index

Bootstrap svým komponentám, které se zobrazují přes nějaký obsah, přiděluje takové hodnoty CSS vlastnosti z-index, aby nedocházelo ke kolizím. Například Dropdown tlačítko z lekce Bootstrap - Dropdowns by se mělo vždy zobrazit nad klasickým obsahem. Pokud někde použijeme modální dialog z lekce Bootstrap - Modální dialogy, měl by se zobrazit jak nad klasickým obsahem, tak nad ještě Dropdown tlačítky. Tooltipy z lekce Bootstrap - Tooltipy by se měly zobrazit úplně nad vším, jelikož mohou být jak v klasickém obsahu, tak v tom modálním.

Bootsrap přiřazuje těmto překryvným komponentám následující hodnoty z-index. Pokud bychom na stránku přidávali nějakou vlastní komponentu, která obsah překrývá, měli bychom jí přiřadit takový z-index, aby byl s těmito hodnotami v souladu:

• Dropdowny - 1000,
• Sticky elementy - 1020,
• Fixed elementy - 1030,
• Pozadí (backdrop) modálních prvků - 1040,
• Modální prvky 1050,
• Popovery - 1060,
• Tooltipy - 1070.

Gratuluji! Nyní ovládáte mocný nástroj, který vám umožní tvořit šablony mnohem rychleji, než to zvládnou ostatní, kteří jej neznají. A to se vám určitě bude hodit! Vývoj softwaru zabere spoustu času, když jej někde dokážete ušetřit, budete úspěšnější

V následujícím kvízu, Kvíz - Bootstrap, si vyzkoušíme nabyté zkušenosti z kurzu.