4. diel - Bootstrap - Obrázky

V minulej lekcii, Bootstrap - Typografia, sme si spomenuli Bootstrap triedy, ktorými štýlujeme 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 obrázky a všetko čo s nimi súvisí, napríklad responzivita, zarovnanie, rámčeky a mnoho ďalšieho.

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 ňu vždy zmestili. Trieda má nastavené max-width: 100% a height: auto:

Element Picture

K obrázkom niekedy môžeme potrebovať uviesť viac zdrojov, aby si prehliadač vybral ten, ktorý najlepšie sedí rozlíšeniu zariadenia. Pri mobilných obrázkoch sa bežne orezáva zbytočné pozadie, aby bolo vidieť hlavnú časť obrázku a naopak na desktope sa necháva, aby nebola hlavná časť obrázku príliš veľká. Ak by sme 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 používajú na rôznych miestach. Farby nie sú pomenované podľa toho, ako vyzerajú, pretože 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 farby:

• primary - hlavná farba, 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 - svetlo š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 tieto 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

Triedy máme pripravené aj pre okrúhle rámčeky. Polomer rámčeka je vnútorne nastavený 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á to 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ávania.

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 to vyzerá v prehliadači:

Modernou alternatívou k plávajúcim (float) prvkom a ich riešením 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ávajúci obsah 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ávajúci obsah 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ávajúci obsah 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ávajúci obsah 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ávajúci obsah 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 pozicoovať 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. Poďme si ukázať ako vyzerá ich použitie na obrázku:

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 v rámci tejto lekcie 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í.