4. diel - Bootstrap - Obrázky

V minulej lekcii, Bootstrap - Typografia, sme si začali spomínať Bootstrap triedy, ktorými štylujeme nadpisy a podnadpisy, citácie, skratky a zoznamy. Zoznámili sme sa s utility triedami.

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="ICTdemy 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.sk/images/5/css/bootstrap/bootstrap_eng/bird.png" alt="Bird" class="float-start" />This text wraps around the image from the right, and the image is at the same level as the text. Thanks to the clearfix, the wrapping stops at the end of the &lt;div&gt; element.
</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.sk/images/5/css/bootstrap/bootstrap_eng/twitter.png" alt="Webdesigner" class="figure-img img-fluid rounded" />
    <figcaption>Former Twitter logo (now X), the company that initiated the creation of the Bootstrap framework.</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í.