12. diel - Bootstrap - List groups
V minulej lekcii, Bootstrap - Jumbotron a Badges , sme sa zaoberali Bootstrap komponentmi jumbotron a odznaky. V dnešnom tutoriále CSS frameworku Bootstrap sa zameriame na zoznamy.
List groups
List groups, česky asi zoznamové skupiny, sú zoznamy, do ktorých môžeme vložiť v podstate ktorýkoľvek odkaz. Vykresľujú sa zvisle a zvyčajne sa využívajú v kombinácii s grid systémom, kedy pomocou nich zobrazíme zoznam položiek ako jeden zo stĺpcov layoutu stránky.
Úplne najjednoduchšie list group vytvoríme ako inak, než pomocou zoznamu
<ul>
<ul class="list-group"> <li class="list-group-item active">Události</li> <li class="list-group-item">Zprávy</li> <li class="list-group-item">Články</li> <li class="list-group-item disabled">Aukce</li> </ul>
Samotnému elementu <ul>
priraďujeme triedu
.list-group
, jeho prvkom <li>
potom triedu
.list-group-item
. Ak chceme niektorý prvok vykresliť ako
vybraný, priraďujeme mu triedu .active
. Niektoré prvky môžeme
naopak vykresliť ako neaktívne a to pomocou triedy .disabled
.
výsledok:
Na disabled položky môže byť ako vždy možné teoreticky kliknúť pomocou klávesnice a preto by sme ich mali zneaktívniť napr. JavaScriptom.
Odkazy a tlačidlá
Namiesto zoznamu <ul>
môžeme použiť aj element
<div>
a doň vkladať ako prvky napr. Elementy
<a>
alebo <button>
. Divu priradíme opäť
triedu .list-group
a jeho prvkom triedu
.list-group-item
. Prvkom navyše pridávame triedu
.list-group-item-action
, ktorá spôsobí hover efekt. **
Odkazujeme nepridávame triedu .btn
.
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active">Události</a> <a href="#" class="list-group-item list-group-item-action">Zprávy</a> <a href="#" class="list-group-item list-group-item-action">Články</a> <a href="#" class="list-group-item list-group-item-action disabled">Aukce</a> </div>
výsledok:
Ak by sme použili element <button>
, môžeme
prvky zneaktívniť pomocou atribútu disabled="disabled"
.
Farby
Pre zafarbenie pozadia položiek môžeme využiť štandardných farieb Bootstrap, sú dostupné pod triedami:
- .list-group-item-primary - Hlavné farba, ako predvolené modrá
- .list-group-item-secondary - Druhá hlavná farba, východiskové šedá
- .list-group-item-success - Zelená
- .list-group-item-danger - Červená
- .list-group-item-warning - Žltá
- .list-group-item-info - Neutrálne modrá
- .list-group-item-light - Svetlučko šedá
- .list-group-item-dark - Takmer čierna
Ak pridáme i triedu .list-group-item-action
, budú mať
položky hover efekt.
Aktívna položka má vždy farbu "primary", ako predvolený modrú, bez
ohľadu na farbu pozadia položky. Ako vždy by sme okrem priradenie farby
pozadia mali vložiť aj nejaký <span>
s triedou
.sr-only
, obsahujúci vysvetlenie zvýraznenie pre užívateľov s
hlasovými čítačkami.
Odznaky
Do prvkov zoznamu nie je problém vložiť odznaky. Ich
zarovnanie nastavíme pomocou flex utilities a to pridaním tried
.d-flex
, .justify-content-between
a
.align-items-center
. Viac o utilitách sa dozviete ďalej v
kurze.
Ďalší HTML obsah
Do list groups môžeme vložiť prakticky čokoľvek, nadpisy, odseky a ďalšie elementy.
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Moderní webdesign od A do Z</h5> <small class="text-muted">4. ledna</small> </div> <p class="mb-1"> Školení webdesignu a front-endových technologií HTML 5, CSS 3, bootstrap, SEO optimalizace pro vyhledávače, domény a webhostingy, SASS a LESS a dalších. </p> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Objektové programování</h5> <small class="text-muted">14. ledna</small> </div> <p class="mb-1"> Školení objektově orientovaného programování, kurz se zaměřuje zejména na třídy, zapouzdření, dědičnost, polymorfismus, abstrakci, statiku, rozhraní, výjimky, kolekce, lambda funkce a další. </p> <small class="text-danger">Poslední místa.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Testování a verzování</h5> <small class="text-muted">24. ledna</small> </div> <p class="mb-1"> Školení slouží jako příprava do zaměstnání pro všechny, kteří umí již dobře programovat, ale neovládají nástroje pro testování, verzování a práci v týmu. </p> </a> </div>
výsledok:
Taby
Pokiaľ do stránky pripojíme aj Bootstrap JavaScript môžeme prvky zoznamu použiť ako záložky pre prepínanie ďalšieho obsahu. HTML kód by vyzeral takto:
<div class="row"> <div class="col-4"> <div class="list-group" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-udalosti-list" data-toggle="list" href="#list-udalosti" role="tab" aria-controls="Události">Události</a> <a class="list-group-item list-group-item-action" id="list-zpravy-list" data-toggle="list" href="#list-zpravy" role="tab" aria-controls="Zprávy">Zprávy</a> <a class="list-group-item list-group-item-action" id="list-clanky-list" data-toggle="list" href="#list-clanky" role="tab" aria-controls="Články">Články</a> <a class="list-group-item list-group-item-action disabled" id="list-aukce-list" data-toggle="list" href="#list-aukce" role="tab" aria-controls="Aukce">Aukce</a> </div> </div> <div class="col-8"> <div class="tab-content"> <div class="tab-pane fade show active" id="list-udalosti" role="tabpanel" aria-labelledby="list-udalosti-list">Obsah záložky pro události</div> <div class="tab-pane fade" id="list-zpravy" role="tabpanel" aria-labelledby="list-zpravy-list">Obsah záložky pro zprávy</div> <div class="tab-pane fade" id="list-clanky" role="tabpanel" aria-labelledby="list-clanky-list">Obsah záložky pro články</div> </div> </div> </div>
Zdrojový kód je už pomerne šialený, ale nenúti nás implementovať
žiadny JavaScript, čo je vždy dobrá správa Použite ho jednoducho tak, že ho
skopírujete a upravíte. Pre správnu funkčnosť je nutné dodržať všetky
ID a prefixy / sufixy. Všimnite si tried .fade
a
.show
pre dosiahnutie animácie prechodu medzi taby.
Výsledok v prehliadači je:
Prepínanie pomocou JavaScriptu
Ak by sme niekedy potrebovali taby prepínať pomocou JavaScriptu, napríklad
je cyklit po nejakom časovom intervale, máme k tomu pripravenú metódu
tab()
:
$('#id-prvku-v-seznamu').tab('show');
Na tabech sa v JavaScripte volajú nasledujúcej udalosti (ich poradie zodpovedá poradie ich volanie):
hide.bs.tab
- Zavolá sa na zrovna aktívne záložke, keď sa má zobraziť nová záložka.show.bs.tab
- Zavolá sa na záložke, ktorá sa má práve zobraziť, ale predtým, než je naozaj zobrazená.hidden.bs.tab
- Zavolá sa na záložke, ktorá bola predtým aktívna, už potom, čo došlo k prepnutiu.shown.bs.tab
- Zavolá sa na záložke, ktorá sa zrovna zobrazila.
Udalosti odchytíme napr. Nasledovne:
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) { e.target // nově aktivovaný tab e.relatedTarget // tak, který byl dříve aktivní })
V budúcej lekcii, Riešené úlohy k 11.-12. lekciu Bootstrap CSS frameworku , sa budeme venovať kartám. Tie novo nahrádzajú všetky typy kontajnerov starších verzií Bootstrap.
V nasledujúcom cvičení, Riešené úlohy k 11.-12. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.