Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
PHP týden

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.

Tabulky v Bootstrap
tabulky.html

Tmavý motív

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

Tabulky v Bootstrap
tabulky.html

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.

Tabulky v Bootstrap
tabulky.html

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

Tabulky v Bootstrap
tabulky.html

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

Tabulky v Bootstrap
tabulky.html

Š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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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.

Tabulky v Bootstrap
tabulky.html

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.

Tabulky v Bootstrap
tabulky.html

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

Tabulky v Bootstrap
tabulky.html

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.

Barvy textu v Bootstrap
barvy_textu.html

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.

Tabulky v Bootstrap
tabulky.html

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.


 

Predchádzajúci článok
Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi 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 (1)

 

 

Komentáre

Avatar
nickname01
Člen
Avatar
nickname01:11.1.2018 15:57

Jen takový detail, v poslední ukázce tabulky jsou prohozené popisky sloupců. Jinak moc díky za článek :-)

 
Odpovedať
11.1.2018 15:57
Avatar
David Švarc
Člen
Avatar
David Švarc:21.3.2018 21:38

A ještě jeden detail v označení breakpointů ;)

Díky za články, jsou skvělé!

 
Odpovedať
21.3.2018 21:38
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Filip
Člen
Avatar
Filip:24.4.2019 3:17

Par detailov:

  1. V odseku "Responzivní tabulky" je 2x .table-responsive-sm
  2. K responzivnej tabulke, po zmenseni okna sa nepridava scrollbar (Firefox 66)
 
Odpovedať
24.4.2019 3:17
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 3 správy z 3.