4. diel - Bootstrap - Obrázky

V dnešnom tutoriále frameworku Bootstrap si ukážeme ako na obrázky a všetko čo s nimi súvisí, napríklad responzivita, zarovnanie, rámčeky a ďalšie.

Responzívne obrázky

Začnime tým, ako urobiť obrázok responzívny. Bootstrap poskytuje triedu .img-fluid, ktorá zaistí, že daný obrázok nikdy nevytečie z rodičovského elementu. Na mobilných zariadeniach teda obrázky nikdy neprekročia veľkosť obrazovky a zmenšia sa tak, aby sa na nej vždy zmestili. Trieda vnútorne nastavuje max-width: 100% a height: auto:

Element Picture

Obrázkom môžeme niekedy potrebovať uviesť viac zdrojov, aby si prehliadač vybral ten, ktorý najlepšie sedí rozlíšenie zariadenia. Typicky sa u mobilných obrázkov orezáva zbytočné pozadie, aby bola vidieť tá hlavná časť obrázku a naopak na desktope sa necháva, aby nebola hlavná časť obrázku príliš veľká. Ak by ste k tomuto správaniu použili element <picture>, treba všetky responzívne triedy priraďovať elementu <img> vo vnútri, nie elementu <picture>:

​<picture>
    <source srcset="logo.svg" type="image/svg+xml" />
    <img src="logo.png" class="img-fluid img-thumbnail" alt="ITnetwork logo" />
</picture>

Utility

Rovnako ako pre text, tak aj pre obrázky ponúka Bootstrap utility triedy.

Vypnutie rámčekov

Písanie štýlov pre vypnutie nejakej časti rámčeka je koniec. Teraz si môžeme vybrať z nasledujúcich predpripravených tried, ktoré uvádzame spolu s triedou .border:

• border - zapne rámček okolo obrázku. Musíme uvádzať zakaždým, keď chceme rámček zobraziť,
• border-0 - vypne rámček okolo obrázku,
• border-top-0 - vypne horný rámček,
• border-end-0 - vypne pravý rámček,
• border-bottom-0 - vypne spodný rámček,
• border-start-0 - vypne ľavý rámček.

Ukážka v prehliadači:

Farba rámčeka

Bootstrap definuje niekoľko farieb, ktoré sa v ňom používajú na rôznych miestach. Farby nie sú pomenované podľa toho, ako vyzerajú, to by bola v CSS sémantická chyba. CSS štýly by mali byť pomenované podľa toho, na čo sa používajú, nie podľa vzhľadu. Máme tu teda farby:

• primary - hlavná farba, ako predvolená modrá,
• secondary - druhá hlavná farba, predvolená šedá,
• success - zelená na úspešné hlášky, zľavy, potvrdzujúce tlačidlá...,
• danger - červená pre chyby a podobne,
• warning - žltá pre zvýraznenie dôležitých hlášok, tipov...,
• info - neutrálna modrá pre neutrálne zvýraznenie,
• light - svetlounca šedá,
• dark - takmer čierna,
• black - úplne čierna,
• white - úplne biela.

Tieto farby nás budú sprevádzať celým kurzom. Konkrétne pre rámčeky potom Bootstrap poskytuje nasledujúce triedy, ktoré uvádzame spolu s triedou .border:

• .border-primary,
• .border-secondary,
• .border-success,
• .border-danger,
• .border-warning,
• .border-info,
• .border-light,
• .border-dark,
• .border-black,
• .border-white.

V prehliadači sa zobrazí:

Triedy môžeme samozrejme kombinovať a nastaviť tak napríklad zelený rámček bez hornej časti.

Polomer rámčeka

Aj pre okrúhle rámčeky máme triedy pekne nachystané. Polomer rámčeka je vnútorne nastavovaný na hodnotu .25rem. Môžeme použiť triedy:

• .rounded - všetky rohy sú okrúhle,
• .rounded-top - ľavý a pravý horný roh je okrúhly,
• .rounded-end - pravý horný a pravý dolný roh je okrúhly,
• .rounded-bottom - ľavý a pravý dolný roh je okrúhly,
• .rounded-start - ľavý horný a ľavý dolný roh je okrúhly,
• .rounded-circle - rohy sú maximálne zaguľatené, čím tvorí okolo obrázku kruh. Hodnota border-radius je 50%,
• .rounded-pill - všetky rohy sú okrúhle a tvar pripomína pilulku,
• .rounded-0 - rohy sú hranaté.

Miniatúry obrázkov

Pre miniatúry môžeme využiť štýl rámčeka a paddingu reprezentovaný triedou .img-thumbnail. Vyzerá takto:

Zarovnanie obrázkov

Dostávame sa k utility triedam na zarovnávanie obrázkov. Všetky sú opäť implementované s !important a prepisujú teda všetky inde definované správanie.

Float utility

Úplne najjednoduchšie je obrázok zarovnať pomocou obtekania (vlastnosti float). Bootstrap poskytuje nasledujúce triedy:

• .float-start - zarovnanie vľavo, pričom je obrázok obtekaný ďalším obsahom sprava,
• .float-end - zarovnanie vpravo, pričom je obrázok obtekaný ďalším obsahom zľava,
• .float-none - vypnutie obtekania.

Pri používaní obtekania ho nesmieme nezabudnúť po skončení daného elementu vypnúť, a to pomocou populárneho hacku clearfix, ktorý je v Bootstrape dostupný pod triedou .clearfix. Tú nastavujeme elementu s plávajúcim obsahom:

<div class="clearfix">
    <img src="https://www.itnetwork.cz/images/5/css/bootstrap/ptacek.png" alt="Ptáček" class="float-start" />Tento text obrázek obtéká zprava a obrázek je na stejné úrovni jako text. Díky clearfixu se obtékání po konci elementu &lt;div&gt; ukončí.
</div>

Takto vyzerá v prehliadači:

Modernou alternatívou k plávajúcim (float) prvkom a ich riešenie pomocou .clearfix je použitie Flexboxu alebo CSS Grid layoutu, ktoré poskytujú lepšiu kontrolu nad rozložením.

Responzívne triedy

Plávajúci obsah môžeme definovať aj v závislosti od veľkosti viewportu. Nasleduje zoznam príslušných tried:

• .float-start - nechá obsah plávať vľavo na všetkých zariadeniach,
• .float-end - nechá obsah plávať vpravo na všetkých zariadeniach,
• .float-none - vypne plávanie obsahu na všetkých zariadeniach,
• .float-sm-start - nechá obsah plávať vľavo na zariadeniach s malým viewportom a väčším,
• .float-sm-end - nechá obsah plávať vpravo na zariadeniach s malým viewportom a väčším,
• .float-sm-none - vypne plávanie obsahu na zariadeniach s malým viewportom a väčším,
• .float-md-start - nechá obsah plávať vľavo na zariadeniach so stredne veľkým viewportom a väčším,
• .float-md-end - nechá obsah plávať vpravo na zariadeniach so stredne veľkým viewportom a väčším,
• .float-md-none - vypne plávanie obsahu na zariadeniach so stredne veľkým viewportom a väčším,
• .float-lg-start - nechá obsah plávať vľavo na zariadeniach s veľkým viewportom a väčším,
• .float-lg-end - nechá obsah plávať vpravo na zariadeniach s veľkým viewportom a väčším,
• .float-lg-none - vypne plávanie obsahu na zariadeniach s veľkým viewportom a väčším,
• .float-xl-start - nechá obsah plávať vľavo na zariadeniach s extra veľkým viewportom a väčším,
• .float-xl-end - nechá obsah plávať vpravo na zariadeniach s extra veľkým viewportom a väčším,
• .float-xl-none - vypne plávanie obsahu na zariadeniach s extra veľkým viewportom a väčším.
• .float-xxl-start - nechá obsah plávať vľavo na zariadeniach s extra extra veľkým viewportom a väčším,
• .float-xxl-end - nechá obsah plávať vpravo na zariadeniach s extra extra veľkým viewportom a väčším,
• .float-xxl-none - vypne plávanie obsahu na zariadeniach s extra extra veľkým viewportom a väčším.

Ako sú rôzne zariadenia v Bootstrape definované sme si už spomenuli v lekcii Bootstrap - Typografie.

Alignment utility

Obrázky môžeme ako všetky inline elementy pozicovať okrem priradenia floatu samotnému obrázku aj nastavením vlastnosti text-align kontajnera, v ktorom je obrázok vložený. To môže byť vhodnejšie v situáciách, keď nepotrebujeme obtekanie a vyvarujeme sa použitiu floatov, ktoré môžu mať nepríjemné dôsledky, ak ich zabudneme vyčistiť clearfixom. O triedach .text-start, .text-end a .text-center sme si už hovorili aj v lekcii Bootstrap - Typografie. Ukážme si len ako vyzerá ich použitie na obrázok:

Margin utility

Keď sme už pri centrovaní, tak blokové elementy môžeme centrovať pomocou triedy .mx-auto, ktorá, ako asi už tušíte, vnútorne nastaví margin: 0 auto;. Triedu nastavujeme priamo blokovému elementu, ktorý chceme vodorovne vycentrovať. Element musí mať nastavenú šírku, čo je nevýhoda tohto riešenia:

Figure

Ak potrebujeme zobraziť obrázok aj s popisom, obvykle využijeme element <figure>, do ktorého vložíme element <img> a <figcaption>. Bootstrap ponúka príslušné triedy .figure, .figure-img a .figure-caption pre honosnejší vzhľad. Obvykle pridávame aj nám už známu triedu .img-fluid, aby obrázok na mobiloch nepretiekol:

<figure class="figure">
    <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png" alt="Webdesigner" class="figure-img img-fluid rounded" />
    <figcaption>Bývalé logo Twitteru (dnes již X), firmy která stála za vznikem frameworku Bootstrap.</figcaption>
</figure>

V prehliadači sa zobrazí takto:

To je pre túto lekciu všetko:-)

V nasledujúcom kvíze, Kvíz - Reboot, typografia a obrázky v Bootstrap, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.