4. diel - Bootstrap - Obrázky
V minulej lekcii, Bootstrap - Typografia , sme si začali spomínať Bootstrap triedy, ktorými štýlom rôzne typografické HTML elementy. V dnešnom CSS Bootstrap tutoriálu si ukážeme ako na obrázky a všetko čo s nimi súvisí.
Responzívne obrázky
Začnime tým, ako urobiť obrázok responzívne. Bootstrap poskytuje triedu
.img-fluid
, ktorá zabezpečí, že daný obrázok nikdy nevytečie
z rodičovského elementu. Na mobilných zariadeniach teda obrázky nikdy
neprekročí veľkosť obrazovky a zmenší sa tak, aby sa na nej vždy
zmestili. Trieda vnútorne nastavuje max-width: 100%
a
height: auto
.
Ak by ste chceli podporovať SVG v IE10, pridajte k týmto
obrázkom štýl width: 100% \9
, ale iba k tým typu SVG, inak
rozbijete tie ostatné.
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é pozadí, aby bola vidieť tá
hlavná časť obrázka a naopak na desktope sa necháva, aby nebola hlavná
časť obrázka príliš veľká. Ak by ste k tomuto správaniu použili element
<picture>
, je potrebné všetky responzívne triedy
priraďovať elementu <img>
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:
border
- Zapne rámik okolo obrázka. Musíme uvádzať zakaždým, keď chceme rámik zobraziť.border-0
- Vypne rámik okolo obrázka.border-top-0
- Vypne horný rámček.border-right-0
- Vypne pravý rámček.border-bottom-0
- Vypne spodný rámček.border-left-0
- Vypne ľavý rámček.
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, východiskové šedá
- success - Zelená na úspešné hlášky, zľavy, potvrdzujúci tlačidlá, ...
- danger - Červená pre chyby apod.
- warning - Žltá pre zvýraznenie dôležitých hlášok, tipov ...
- info - Neutrálny modrá pre neutrálne zvýraznenie
- light - Svetlučko šedá
- dark - Takmer č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 so triedou
.border
:
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white
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 guľatý..rounded-right
- Pravý horný a pravý dolný roh je guľatý..rounded-bottom
- Ľavý a pravý dolný roh je guľatý..rounded-left
- Ľavý horný a ľavý dolný roh je guľatý..rounded-circle
- Rohy sú maximálne zaguľatené, čím tvorí okolo obrázku kruh. Hodnotaborder-radius
je50%
..rounded-0
- Rohy sú hranaté.
Miniatúry obrázkov
Pre miniatúry môžeme využiť štýl rámčeka a padding reprezentovaný
triedou .img-thumbnail
. Vyzerá takto:
Zarovnanie obrázkov
Dostávame sa k utility triedam pre 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 obtekanie (vlastnosti
float
). Bootstrap poskytuje nasledujúce triedy:
.float-left
- Zarovnanie vľavo, pričom je obrázok vynechaný ďalším obsahom sprava.float-right
- Zarovnanie vpravo, pričom je obrázok vynechaný ďalším obsahom zľava.float-none
- Vypnutie obtekanie
Triedy s floatom boli pred Bootstrap 4 pomenované
.pull-left
a .pull-right
, v šablónach pre staršie
verzie Bootstrap ich môžete ešte takto smerujúce k nájdeniu.
Pri používaní obtekanie ho nezabudnite po skončení daného elementu
vypnúť a to pomocou populárneho hacku clearfix, ktorý je v Bootstrap
dostupný pod triedou .clearfix
. Tú nastavujeme elementu s
plávajúcim obsahom.
Responzívne triedy
Plávajúce obsah môžeme definovať aj v závislosti na veľkosti viewporte. Nasleduje výpočet príslušných tried.
.float-sm-left
- Nechá obsah plávať vľavo na zariadeniach s malým Viewport a väčším.float-sm-right
- Nechá obsah plávať vpravo na zariadeniach s malým Viewport a väčším.float-sm-none
- Vypne plávanie obsahu na zariadeniach s malým Viewport a väčším.float-md-left
- Nechá obsah plávať vľavo na zariadeniach so stredne veľkým Viewport a väčším.float-md-right
- Nechá obsah plávať vpravo na zariadeniach so stredne veľkým Viewport a väčším.float-md-none
- Vypne plávanie obsahu na zariadeniach so stredne veľkým Viewport a väčším.float-lg-left
- Nechá obsah plávať vľavo na zariadeniach s veľkým Viewport a väčším.float-lg-right
- Nechá obsah plávať vpravo na zariadeniach s veľkým Viewport a väčším.float-lg-none
- Vypne plávanie obsahu na zariadeniach s veľkým Viewport a väčším.float-xl-left
- Nechá obsah plávať vľavo na zariadeniach s extra veľkým Viewport a väčším.float-xl-right
- Nechá obsah plávať vpravo na zariadeniach s extra veľkým Viewport a väčším.float-xl-none
- Vypne plávanie obsahu na zariadeniach s extra veľkým Viewport a väčším
Ako sú rôzne zariadenia v Bootstrap definované sme si už spomenuli v lekcii Bootstrap - Typografia.
Alignment utility
Obrázky môžeme ako všetky inline elementy pozicový okrem priradenie
floatu samotnému obrázku tiež 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 float,
ktoré môžu mať nepríjemné dôsledky ak je zabudneme vyčistiť clearfixem.
O triedach .text-left
, .text-right
a
.text-center
sme si už hovorili tiež v lekcii Bootstrap - Typografia.
Ukážme si len ako vyzerá ich použitia na obrázok:
Margin utility
Keď sme už u centrovanie, 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 is popisom, zvyčajne využijeme elementu
<figure>
, do ktorého vložíme elementy
<img>
a <figcaption>
. Bootstrap ponúka
príslušnej triedy .figure
, .figure-img
a
.figure-caption
pre honosnejšie vzhľad. Obvykle pridávame aj
nám už známu triedu .img-fluid
, aby obrázok na mobiloch
nepretiekol.
V budúcej lekcii, Kvíz - Reboot, typografia a obrázky v Bootstrap , si konečne predstavíme Grid systém Bootstrap
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í.