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

17. diel - Bootstrap - Utilities

V predchádzajúcom cvičení, Riešené úlohy k 15.-16. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 15.-16. lekciu Bootstrap CSS frameworku , sme sa venovali rozbaľovacom tlačidlám. Už vieme, že CSS framework Bootstrap má okrem komponentov ešte tzv. Utilities a grid systém. Práve o utilitách bude dnešné lekcie.

Utilities

Utilities sú jednoúčelové CSS triedy, ktoré sa stanú vašimi obľúbenými pomocníkmi pri každodennej práci. Niektoré základné utility sme si už vysvetlili počas popisu komponentov, boli to najmä farby a zarovnanie textu. Bootstrap poskytuje celkom nasledujúce utility. Tie, o ktorých sme už hovorili, obsahujú odkaz na príslušnú lekciu.

Flex utility si necháme na nabudúce, pretože ako jediný bude na dlhšie rozprávanie. Zvyšok utilít si dnes preberieme.

Display

Display utilities umožňujú rýchlo meniť hodnotu CSS vlastnosti display. Dajú sa tak rýchlo napr. Prepnúť obrázky na bloky, bloky na inline-bloky a podobne. Element potom môžeme použiť tam, kde sa očakáva element iného typu.

Máme pripravené triedy:

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-table
  • .d-table-cell
  • .d-flex
  • .d-inline-flex

Triedu sme použili napr. V lekcii Carousel a Progress, kde sa pomocou triedy .d-none skryli popisky Carousel.

Responzívne verzia

Podľa break pointov môžeme danú hodnotu pre vlastnosť display nastaviť až od určitej veľkosti displeja zariadenia. To môžeme použiť napr. Na skrytie obsahu na mobilných zariadeniach a jeho zobrazenie na zariadeniach väčších. Ku každej vyššie uvedenej triede existujú responzívne triedy pre každý breakpoint. Sú to:

  • .d-sm-none
  • .d-sm-inline
  • .d-sm-inline-block
  • .d-sm-block
  • .d-sm-table
  • .d-sm-table-cell
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-none
  • .d-md-inline
  • .d-md-inline-block
  • .d-md-block
  • .d-md-table
  • .d-md-table-cell
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-none
  • .d-lg-inline
  • .d-lg-inline-block
  • .d-lg-block
  • .d-lg-table
  • .d-lg-table-cell
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-none
  • .d-xl-inline
  • .d-xl-inline-block
  • .d-xl-block
  • .d-xl-table
  • .d-xl-table-cell
  • .d-xl-flex
  • .d-xl-inline-flex

Ak použijeme napr. Triedu .d-md-block, bude element vykreslený ako blokový na stredne veľkých zariadeniach a väčších. Na menších zariadeniach bude vykreslený východiskovým spôsobom.

Kombinácie

Triedy spolu môžeme kombinovať na dosiahnutie ideálneho responzivního správania. Môžeme tak ľubovoľne definovať intervaly, kedy budú elementy viditeľné a kedy skryté. Elegantne sa tým vyhneme ručnému písanie media queries alebo dokonca vytváranie niekoľkých verzií jednej stránky.

Uveďme si za všetko dva príklady. Ak by sme chceli element skrytý len na malých zariadeniach, použili by sme triedy:

d-sm-none d-md-block

Element by bol viditeľný na zariadeniach "xs", na "sm" zariadeniach by sa skryl a od "md" zariadenie by sa opäť objavil. "Xs" je predvolený breakpoint, ktorý neuvádzame, štýl potom platí pre všetky hraničnými. Druhý príklad zobrazí element iba na veľkých zariadeniach ( "lg").

d-none d-lg-block d-xl-none

Embed

Snažili ste sa už niekedy vložiť youtube video do vašej stránky? Asi ste zistili, že video nie je responzívne a že keď pre neho napíšete responzívne štýl, je problém udržať stále rovnaký pomer strán daného elementu. Bootstrap v Embed utilities prichádza s riešením práve tohto problému.

Štýly sa aplikujú na elementy <iframe>, <embed>, <video> a <object> alebo na elementy s triedou .embed-responsive-item, ktorú Bootstrap odporúča vždy uvádzať. Rámček okolo rámu bude automaticky vypnutý.

Ukážka

K vloženie responzivního youtube videá použijeme nasledujúci kód:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YlUKcNNmywk" allowfullscreen></iframe>
</div>

Živá ukážka:

Embed v Bootstrap
embed_youtube.html

Všimnite si Wrapper sa triedami .embed-responsive a .embed-responsive-16by9. Druhá trieda už podľa názvu udáva pomer strán videa. K pomerom môžeme použiť tried:

  • .embed-responsive-21by9
  • .embed-responsive-16by9
  • .embed-responsive-4by3
  • .embed-responsive-1by1

Image replacement

Image replacement je mikro utilita, ktorá umožňuje skryť nejaký text a nahradiť ho obrázkom. Je reprezentovaná len triedou .text-hide, ktorá slúži na skrytie textu tak, aby pre vyhľadávače zostal viditeľný. To je dôležité napr. Pri nadpisoch <h1>, kde chceme mať na stránke obrázkové logo, ale zároveň by sme boli radi, keby vyhľadávače nadpis chápali aj ako text.

<h1 class="text-hide" style="background-image: url('https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png'); width: 64px; height: 64px; background-size: 64px; background-repeat: no-repeat;">Twitter Bootstrap kurz</h1>

výsledok:

Image replacement v Bootstrap
image_replace­ment.html

Position

Pre zmenu pozície elementu pomocou CSS vlastnosti position môžeme použiť nasledujúcich predpripravených tried:

  • .position-static - Východisková pozícia.
  • .position-relative - Pozícia posunutá relatívne k pôvodnej pozícii.
  • .position-absolute - Pozícia nastavená voči oknu prehliadača.
  • .position-fixed - Pozícia nastavená bez ohľadu na pozíciu scrollbaru.
  • .fixed-top - Element neroluje so stránkou, ale zostáva na pevnej pozícii a to na hornom okraji stránky. Túto funkciu používa pomerne veľké množstvo webov na navigačnú lištu a užívateľom umožňuje používať navigáciu kdekoľvek na stránke, bez nutnosti rolovať kvôli nej nahor.
  • .fixed-bottom - Element neroluje so stránkou, ale zostáva na pevnej pozícii a to na dolnom okraji stránky.
  • .sticky-top - Funguje len v nových prehliadačoch (Podpora pre CSS vlastnosť a hodnotu position: sticky). Vtedy sa element nespráva nijako zvláštne, ale akonáhle začneme scrollovať, prichytí sa ako by bola jeho pozícia fixné. Ak by sme triedu použili opäť na navigáciu, výhodou je, že takto môžeme nad navigáciu umiestniť napr. Veľké logo, ktoré sa stránkou potom odscrolluje, zatiaľ čo navigácia sa k hornej časti obrazovky prilepí. Logo teda na stránke nezaberá miesto a navigácia je stále pri ruke.
  • .position-sticky - Nová vlastnosť umožňujúcu prichytiť element k oknu prehliadača až vo chvíli, keď by vyšiel pri scrollovanie mimo stránku. Inak zostáva na svojom mieste.

Screenreaders

Povzbudzovanie k optimalizácii obsahu aj pre hlasové čítačky nás sprevádzalo celým kurzom. Už poznáme triedu .sr-only, ktorú priraďujeme typicky elementom <span> s dodatočným popisom pre hlasové čítačky, ktorý by inak z ostatného textu nemusel byť zrejmý. Tieto elementy nie sú pre bežné prehliadače viditeľné. Triedu by sme mohli použiť napr. Nasledovne:

<span class="sr-only">Graf vývoje poptávky v roce 2018</span>

Ak chceme, aby bolo možné element vybrať klávesnicou, priradíme mu ešte triedu .sr-only-focusable. Toho zvyčajne využívame pre odkazy, ktoré preskočí hneď k hlavnému obsahu stránky a nenúti dotyčného s čítačkou prehrabávať sa napr. Navigáciou:

<a class="sr-only sr-only-focusable" >Přeskočit na hlavní obsah</a>

Sizing

Ďalšie mikroutilitka na určovanie veľkosti elementov v percentách. Už sme sa s ňou stretli u progressbar.

Pre šírku môžeme použiť tried:

  • .w-25 - Šírka 25% rodičovského elementu.
  • .w-50 - Šírka 50% rodičovského elementu.
  • .w-75 - Šírka 75% rodičovského elementu.
  • .w-100 - Šírka 100% rodičovského elementu.
  • .mw-100 - Maximálna šírka 100% rodičovského elementu (vlastnosť max-width).

A pre výšku:

  • .h-25 - Výška 25% rodičovského elementu.
  • .h-50 - Výška 50% rodičovského elementu.
  • .h-75 - Výška 75% rodičovského elementu.
  • .h-100 - Výška 100% rodičovského elementu.
  • .mh-100 - Maximálna výška 100% rodičovského elementu (vlastnosť max-height).

Ukážka

<div class="w-25 bg-success">25%</div><br />
<div class="w-50 bg-success">50%</div><br />
<div class="w-75 bg-success">75%</div><br />
<div class="w-100 bg-success">100%</div><br />

<div style="height: 150px">
    <div class="h-25 d-inline-block bg-warning">25%</div>
    <div class="h-50 d-inline-block bg-warning">50%</div>
    <div class="h-75 d-inline-block bg-warning">75%</div>
    <div class="h-100 d-inline-block bg-warning">100%</div>
</div>

Výsledok v prehliadači:

Sizing utilities v Bootstrap
sizing.html

Spacing

margin a padding môžeme našim elementom jednoducho nastavovať pomocou nasledujúcich utilít. To je veľmi výhodné, pretože čas od času niekde potrebujeme nejakú tú medzierku a definovať stále nové a nové štýly by bolo veľmi frustrujúce.

Tried je pomerne veľké množstvo a ich názvy sa skladajú z nasledovných častí:

{vlastnost}{strana}-{velikost}

Prípadne môžeme špecifikovať aj breakpoint, od ktorého má daný okraj platiť:

{vlastnost}{strana}-{breakpoint}-{velikost}

Konečná trieda môže byť napr. ml-2, ktorá nastaví margin-left na 0.5rem.

Vlastnosť

zadávame:

  • m pre margin
  • p pre padding

Strana

  • t pre margin-top alebo padding-top
  • b pre margin-bottom alebo padding-bottom
  • l pre margin-left alebo padding-left
  • r pre margin-right alebo padding-right
  • x pre margin-left alebo padding-left a margin-right alebo padding-right
  • y pre margin-top alebo padding-top a margin-bottom alebo padding-bottom
  • nič pre margin alebo padding na všetkých štyroch stranách daného elementu

Breakpoint

Hraničnými už dobre poznáme, sú to:

  • sm
  • md
  • lg
  • xl

Veľkosť

Veľkosť zadávame ako násobok premennej $spacer, ktorá má predvolenú hodnotu 1rem:

  • 0 - nastaví margin alebo padding na 0
  • 1 - nastaví margin alebo padding na 0.25rem
  • 2 - nastaví margin alebo padding na 0.5rem
  • 3 - nastaví margin alebo padding na 1rem
  • 4 - nastaví margin alebo padding na 1.5rem
  • 5 - nastaví margin alebo padding na 3rem
  • auto - nastaví margin na hodnotu auto, využívame napr. pri centrovanie blokových elementov.

Ak zmeníte hodnotu premennej $spacer vlastným buildom Bootstrap, zmení sa v rovnakom pomere aj vyššie uvedené hodnoty.

Vertical align

Utility slúži k zvislému centrovanie. Zatiaľ sa však neradujte, pretože len nastavujú hodnotu CSS vlastnosti vertical-align. Tá dokáže centrovať len riadkové elementy, inline bloky alebo elementy tabuliek. K tomu pravému zvislému centrovanie sa dostaneme až u Flexu.

Ukážka

<p>
    <span class="align-baseline">baseline</span>
    <span class="align-top">top</span>
    <span class="align-middle">middle</span>
    <span class="align-bottom">bottom</span>
    <span class="align-text-top">text-top</span>
    <span class="align-text-bottom">text-bottom</span>
</p>

výsledok:

Vertical align v Bootstrap
vertical_align.html

Visibility

Ako posledný si predstavme utility triedy .visible a .invisible, ktoré vnútorne mení hodnotu CSS vlastnosti visibility. Elementy budú teda skryté, ale stále budú na stránke zaberať miesto, ako by tam boli. Triedy nijako nepracujú s CSS vlastností display.

V budúcej lekcii, Bootstrap - Flex utilities , sa budeme venovať Flex utilities, ktoré slúžia k jednoduchému zarovnanie čohokoľvek kamkoľvek :)


 

Predchádzajúci článok
Riešené úlohy k 15.-16. lekciu Bootstrap CSS frameworku
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Bootstrap - Flex utilities
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
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