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:
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:
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:
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:
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:
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:
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:
- Dropdown - 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, 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.