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.
- Borders
- Clearfix
- close icon
- Text colors a pre Background colors
- Display
- embed
- Flex
- float
- image replacement
- position
- Screenreaders
- Sizing
- Spacing
- Text
- Vertical align
- visibility
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:
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:
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 hodnotuposition: 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:
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
premargin
p
prepadding
Strana
t
premargin-top
alebopadding-top
b
premargin-bottom
alebopadding-bottom
l
premargin-left
alebopadding-left
r
premargin-right
alebopadding-right
x
premargin-left
alebopadding-left
amargin-right
alebopadding-right
y
premargin-top
alebopadding-top
amargin-bottom
alebopadding-bottom
- nič pre
margin
alebopadding
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
alebopadding
na0
1
- nastavímargin
alebopadding
na0.25rem
2
- nastavímargin
alebopadding
na0.5rem
3
- nastavímargin
alebopadding
na1rem
4
- nastavímargin
alebopadding
na1.5rem
5
- nastavímargin
alebopadding
na3rem
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:
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