Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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.

Responzivní obrázky v Bootstrap
responzivni_o­brazky.html

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.
Rámečky v Bootstrap
vypnuti_ramec­ku.html

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
Barvy v Bootstrap
barvy_ramecku.html

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. Hodnota border-radius je 50%.
  • .rounded-0 - Rohy sú hranaté.
Zakulacení v Bootstrap
polomer_ramec­ku.html

Miniatúry obrázkov

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

Miniatury v Bootstrap
miniatury_obraz­ku.html

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.

Float v Bootstrap
plovouci_obsah.html
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:

Alignment utility
zarovnani_obraz­ku.html

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.

Margin auto v Bootstrapu
centrovani_obraz­ku.html

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.

Figure v Bootstrapu
figure.html

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í.


 

Predchádzajúci článok
Bootstrap - Typografia
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Kvíz - Reboot, typografia a obrázky v Bootstrap
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
1 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity