Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

V minulej lekcii, Bootstrap - tooltip , sme dokončili Bootstrap komponenty. V dnešnom CSS tutoriálu si predstavíme tzv. Multimediálne objekty a kontajnery.

Multimediálne objekty

Media objects, česky asi mediálne objekty, sú komponenty, ktoré určite poznáte zo sociálnych médií, kde reprezentujú statusy alebo komentáre. V ľavej časti komponenty sa nachádza avatar alebo všeobecný obrázok, v pravej potom nadpis a text. No a predsa by sme si sociálne komponenty sami nekódovali, keď máme Bootstrap :) Opäť máme všetko pripravené, minimálne komentáre / referencie užívateľov určite využijeme vo väčšine webových projektov.

Ukážka

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

<div class="media">
    <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Čápka" width="64" height="64">
    <div class="media-body">
        <h5 class="mt-0">David Čápka, 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 obalená elementom <div> sa triedou .media. Dovnútra vkladáme obrázok, zvyčajne sa triedou definujúce margin, napr. .mr-3. Druhým vnoreným elementom je <div> sa triedou .media-body, obsahujúci telo mediálneho objektu.

Živá ukážka v prehliadači:

Media objekty v Bootstrap
media_objekty.html

Skladanie

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

<div class="media">
    <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Čápka" width="64" height="64">
    <div class="media-body">
        <h5 class="mt-0">David Čápka, 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="media mt-3">
            <a class="pr-3" href="https://www.itnetwork.cz/portfolio/17">
                <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar_david.png" alt="David Jančík" width="64" height="64">
            </a>
            <div class="media-body">
                <h5 class="mt-0">David Jančík, 14:22</h5>
                Pojď raději do fitka! :P
            </div>
        </div>
    </div>
</div>

výsledok:

Media objekty v Bootstrap
vnorene_media_ob­jekty.html

Zarovnanie a poradie

Keďže je layoutu mediálnych objektov docielené pomocou flexboxu, môžeme ho prispôsobovať pomocou flex utilities. Ukážme si ako zarovnať avatary na koniec príspevku miesto na začiatok priradením triedy .align-self-end elementu <img>. Rovnako tak môžeme zmeniť aj poradie elementov a obrázok presunúť napr. Napravo. Prehodíme elementy <img> a <div> a obrázku miesto pravého margine nastavíme ľavý.

<div class="media">
    <div class="media-body">
        <h5 class="mt-0">David Čápka, 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 ml-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/avatar.png" alt="David Čápka" width="64" height="64">
</div>

výsledok:

Media objekty v Bootstrap
media_objekty_za­rovnani.html

Mediálne zoznamy

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

<ul class="list-unstyled">
    <li class="media">
        <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div class="media-body">
            <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="media my-4">
        <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div class="media-body">
            <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="media">
        <img class="mr-3" src="https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png" alt="Bootstrap kurz" width="96" height="96">
        <div class="media-body">
            <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ýsledok:

Media objekty v Bootstrap
medialni_sezna­my.html

Kontajnery

Pretože sa dostávame ku grid systému, je na čase si predstaviť kontajnery. Tie v Bootstrap používame najmä kvôli centrovanie a grid systému. Ten najjednoduchší kontajner na nejaké ďalšie elementy vytvoríme z elementu <div> pridaním triedy .container. Kontajner sa na malých Viewport rozťahuje, ale na väčších si drží fixné šírku podľa aktuálneho Breakpoint. Farebné pozadia v ukážke pridávame len preto, aby boli vidieť hranice kontajnera.

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

Výsledok v prehliadači:

Kontejner v Bootstrap
kontejner.html

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 kontejner
</div>

výsledok:

Kontejner v Bootstrap
kontejner_flu­id.html

Z-index

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

Bootsrap priraďuje týmto křekryvným komponentom nasledujúce hodnoty z-index. Ak by sme na stránku pridávali nejakú vlastnú komponentu, ktorá obsah prekrýva, mali by sme jej priradiť taký z-index, aby bol s týmito hodnotami v súlade:

Gratulujem! Teraz ovládate mocný nástroj, ktorý vám umožní tvoriť šablóny oveľa rýchlejšie, než to zvládnu ostatní, ktorí ho nepoznajú. A to sa vám určite bude hodiť! Vývoj softvéru zaberie veľa času, 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.


 

Predchádzajúci článok
Bootstrap - tooltip
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Kvíz - Bootstrap
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity