7. diel - Bootstrap - Tabuľky

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

V minulej lekcii, Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku , sme dokončili grid systém Bootstrap. Posledný zo základných HTML elementov, ktorý sme ešte pomocou Bootstrap nestylovali, sú tabuľky. Práve o nich bude dnešné CSS tutoriál.

Trieda .table

Už vieme, že z reboot tabuľky majú border-style nastavený na collapse a majú ľahko upravené vykresľovanie <caption> a text-align. Pre ďalšie štýlovanie je nutné pridať explicitne triedu .table a to z toho dôvodu, že tabuľky sú hojne využívané rôznymi widgety, ktoré bootstrappingom nemusia počítať. Trieda .table tabuľkám dodá najmä vodorovné čiary oddeľujúce jednotlivé riadky.

Tmavý motív

Bootstrap ponúka i tmavý vzhľad, stačí pridať tabuľke okrem triedy .table ešte triedu .table-dark.

Motívy hlavičky

Farbu hlavičkového riadku môžeme nastaviť priradením triedy .thead-light alebo .thead-dark elementu <thead>, v ktorom sa nachádzajú hlavičkové bunky.

A ukážka tmavšie hlavičky:

Pruhy

Veľmi prehľadne pôsobí, keď urobíme tabuľku pruhovanú a necháme u ich riadkov striedať tmavé a svetlé pozadie. To docielime pridaním triedy .table-striped priamo elementu <table>. V Bootstrap väčšinou platí konvencie, že trieda začína elementom, ku ktorému sa pridáva. Všetky ďalšie triedy začínajúce na .table- budeme teda pridávať k elementu <table>.

Štýl funguje aj pre tmavé tabuľky.

Rámček

Osobne u tabuliek preferujem rámček. Ten môžeme pridať triedou .table-bordered opäť priamo elementu <table>.

Aktívny riadok

V dlhých tabuľkách s mnohými hodnotami môže byť aj pri zebrovanie (pruhovanie) namáhavé prečítať hodnoty na určitom riadku. Môžeme si pomôcť triedou .table-hover, ktorá riadok zvýrazní keď na neho vstúpime kurzorom myši. Štýl opäť funguje aj pre tmavé tabuľky, ukážme si ho tentoraz na ňu.

Nižšia riadky

Pre dlhé tabuľky môže vyzerať lepšie zmenšiť padding buniek na polovicu. K tomu nám páni z Twitteru pripravili triedu .table-sm. Opäť funguje aj pre tmavé tabuľky.

Pozadia buniek

Pre nám už známe farby môžeme použiť rovnomenných tried s prefixom table-. Sú to triedy:

• .table-primary - Hlavné farba, ako predvolené modrá
• .table-secondary - Druhá hlavná farba, východiskové šedá
• .table-success - Zelená na úspešné hlášky, zľavy, potvrdzujúci tlačidlá, ...
• .table-danger - Červená pre chyby apod.
• .table-warning - Žltá pre zvýraznenie dôležitých hlášok, tipov ...
• .table-info - Neutrálny modrá pre neutrálne zvýraznenie
• .table-light - Svetlučko šedá
• .table-dark - Takmer čierna
• .table-white - Úplne biela.

Všimnite si, že farby sú o niečo svetlejšie než tie štandardné, to aby bol na nich text dobre čitateľný.

Triedu výnimočne nepriraďuje celému elementu <table>, ale slúži pre zvýraznenie pozadie buď celých riadkov (elementov <tr>) alebo konkrétnych buniek (elementov <td> a <th>).

Tieto svetlé štýly nie sú vhodné pre tmavý motív tabuľky. Pokiaľ ho zrovna používame, môžeme využiť univerzálny utility triedy pre farby, viď ďalej.

Utility triedy pre farby

Ďalšie utility triedy, ktoré si teraz predstavíme, sú univerzálne triedy pre obarvování.

Farba textu

Ak potrebujeme kdekoľvek zmeniť farbu textu, máme k dispozícii nasledujúce triedy:

• .Texty-primary - Hlavné farba, ako predvolené modrá
• .Texty-secondary - Druhá hlavná farba, východiskové šedá
• .Texty-success - Zelená na úspešné hlášky, zľavy, potvrdzujúci tlačidlá, ...
• .Texty-danger - Červená pre chyby apod.
• .Texty-warning - Žltá pre zvýraznenie dôležitých hlášok, tipov ...
• .Texty-info - Neutrálny modrá pre neutrálne zvýraznenie
• .Texty-light - Svetlučko šedá
• .Texty-dark - Takmer čierna
• .Texty-white - Úplne biela.

Okrem .text-white a .text-muted štýly počítajú aj s odkazmi, musíme im však triedu takisto priradiť.

Farba pozadia

Pre farbu pozadia máme v Bootstrap triedy s prefixom "bg-":

• .bg-primary - Hlavné farba, ako predvolené modrá
• .bg-secondary - Druhá hlavná farba, východiskové šedá
• .bg-success - Zelená na úspešné hlášky, zľavy, potvrdzujúci tlačidlá, ...
• .bg-danger - Červená pre chyby apod.
• .bg-warning - Žltá pre zvýraznenie dôležitých hlášok, tipov ...
• .bg-info - Neutrálny modrá pre neutrálne zvýraznenie
• .bg-light - Svetlučko šedá
• .bg-dark - Takmer čierna
• .bg-white - Úplne biela.

Je k dispozícii aj podpora gradientov, ale tie sú v predvolenom nastavení vypnuté a preto sa nimi nebudeme zaoberať. Bootstrap odporúča pridávať okrem farbiacich tried tiež alternatívny text skrytý pomocou triedy .sr-only. Ten sa potom prejaví napr. Ľuďom s hlasovými čítačkami a význam zafarbenie (napr. Zľavy) bude zachovaný aj v audio verzii webu.

Aby sme sa vrátili k tabuľkám, ak by ste teda u tmavej tabuľky potrebovali zafarbiť nejaký riadok, stačí použiť triedy na zafarbenie pozadí s prefixom bg-.

Responzívne tabuľky

Docieliť naozaj responzívne tabuliek je bohužiaľ pomerne problém. Tabuľky nie je možné zalomiť a preto by sme ich mali používať naozaj len na miestach, kde užívateľovi reprezentujeme nejaké dáta, ktorá musí zostať vždy presne na daných riadkoch. Použiť tabuľky napr. Pre tvorbu fotoalbumu by bolo zlé rozhodnutie, fotografie sa môžu ľubovoľne zalamovať a preto pre tieto účely môžeme použiť grid (pozri ďalej v kurze).

Spôsoby pre zmenšenie tabuľky pri otvorení dát na mobilnom zariadení sú len 2:

• JavaScript - Tabuľku zlámat pomocou JavaScriptu tak, aby na každom riadku bol len jeden popisok a jedna hodnota. Jednotlivé riadky sa tak stanú stĺpčeky. Tie potom musíme nejako vizuálne oddeľovať, aby sa poznalo kde začína ďalšie "riadok". Toto riešenie je pomerne krkolomné.
• Scrollbar - Ďalšou možnosťou je jednoducho pridať tabuľke scrollbar. Na menších zariadeniach sa teda tabuľka oreže a my budeme schopní pohybovať s jej obsahom vo výreze. Toto riešenie je funkčná a veľmi jednoduché, jediná nevýhoda je, že nevyzerá tak pekne. Pre toto riešenie sa rozhodol Bootstrap.

Responzívne tabuľku vytvoríme pridaním triedy .table-responsive k elementu <table>. Pretože scrollbar nevyzerajú dvakrát príťažlivo, máme možnosť zvoliť od akého Breakpoint sa zobrazí. K tomu môže využiť tried:

• .table-responsive-sm
• .table-responsive-md
• .table-responsive-sm

Triedu .table-responsive v tomto prípade už neuvádzame.

Pokiaľ si zmenšíte okno prehliadača, tabuľke v ukážke nižšie sa pridá scrollbar.

Touto lekcií sme dokončili hlavnú súčasť Bootstrap pre štýlovanie bežných HTML elementov. Ďalej sa budeme venovať tzv. Komponentom, ktoré sú najčastejšie tvorené elementy <div> alebo <span> a umožňujú nám používať veľmi užitočné prvky, ktoré HTML v základe vôbec neponúka. V budúcej lekcii, Bootstrap - Tlačidlá , nás čakajú notifikácia a tagy.