Lekce 12 - Bootstrap - List groups
V minulé lekci, Bootstrap - Jumbotron a badges, jsme se zabývali základní kostrou webu a badges.
V dnešním Bootstrap tutoriálu se zaměříme na seznamy. Ukážeme si, jak se používají s odkazy, tlačítky, odznaky a taby.
List groups v Bootstrapu
List groups, česky bychom řekli seznamové skupiny, jsou seznamy, do kterých můžeme vložit v podstatě kterýkoli odkaz. Vykreslují se svisle a obvykle se využívají v kombinaci s grid systémem, kdy pomocí nich zobrazíme seznam položek jako jeden ze sloupců layoutu stránky.
Úplně nejjednodušší list group vytvoříme pomocí seznamu
<ul> :
<ul class="list-group"> <li class="list-group-item active" aria-current="true">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" aria-disabled="true">Aukce</li> </ul>
Samotnému elementu <ul> přiřazujeme třídu
.list-group, jeho prvkům <li> poté třídu
.list-group-item. Pokud chceme některý prvek vykreslit jako
vybraný, přiřazujeme mu třídu .active. Některé prvky
můžeme naopak vykreslit jako neaktivní, a to pomocí třídy
.disabled. Přidání atributů aria-current a
aria-disabled je důležité z hlediska přístupnosti, což je
klíčové pro uživatele, kteří se spoléhají na asistenční technologie,
jako jsou čtečky obrazovky.
Výsledek v prohlížeči:
Na disabled položky může být jako vždy teoreticky možné kliknout pomocí klávesnice, a proto bychom je měli zneaktivnit např. JavaScriptem.
Odkazy a tlačítka
Místo seznamu <ul> můžeme použít i element
<div> a do něj vkládat jako prvky např. elementy
<a> nebo <button>. Prvku
<div> přiřadíme opět třídu .list-group a
jeho prvkům třídu .list-group-item. Prvkům navíc přidáváme
třídu .list-group-item-action, která způsobí hover efekt.
Odkazům nepřidáváme třídu .btn:
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true">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" aria-disabled="true">Aukce</a> </div>
Výsledek:
Pokud bychom použili element <button>,
můžeme prvky zneaktivnit pomocí atributu
disabled="disabled".
Barvy
Pro obarvení pozadí položek můžeme využít standardní barvy Bootstrapu, které jsou dostupné pod třídami:
- .list-group-item-primary – hlavní barva, jako výchozí modrá,
- .list-group-item-secondary – druhá hlavní barva, výchozí šedá,
- .list-group-item-success – zelená,
- .list-group-item-danger – červená,
- .list-group-item-warning – žlutá,
- .list-group-item-info – neutrální modrá,
- .list-group-item-light – světlounce šedá,
- .list-group-item-dark – téměř černá.
Pokud přidáme i třídu .list-group-item-action, budou mít
položky hover efekt:
<body> <ul class="list-group"> <li class="list-group-item list-group-item-action list-group-item-warning">Události</li> <li class="list-group-item list-group-item-action list-group-item-success">Zprávy</li> <li class="list-group-item list-group-item-action list-group-item-danger">Články</li> <li class="list-group-item list-group-item-action list-group-item-light disabled" aria-disabled="true">Aukce</li> </ul> </body>
Aktivní položka má vždy barvu "primary", tedy jako výchozí modrou, a to
bez ohledu na barvu pozadí položky. Jako vždy bychom kromě přiřazení
barvy pozadí měli vložit i nějaký <span> s třídou
.visually-hidden, obsahující vysvětlení zvýraznění pro
uživatele s hlasovými čtečkami.
Odznaky
Do prvků seznamu lze lehce vložit také odznaky, které jsme probrali v
lekci Bootstrap -
Jumbotron a badges. Jejich zarovnání nastavíme pomocí flex utilities, a
to přidáním tříd .d-flex,
.justify-content-between a .align-items-center. Více
o utilitách se dozvíme dále v kurzu v lekci Bootstrap -
Utilities:
<body> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active d-flex justify-content-between align-items-center" aria-current="true"> Události <span class="badge bg-primary rounded-pill">22</span> </a> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> Zprávy <span class="badge bg-primary rounded-pill">4</span> </a> <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> Články <span class="badge bg-primary rounded-pill">2</span> </a> <a href="#" class="list-group-item list-group-item-action disabled d-flex justify-content-between align-items-center"> Aukce <span class="badge bg-secondary rounded-pill">0</span> </a> </div> </body>
Další HTML obsah
Do list groups můžeme vložit prakticky cokoli: nadpisy, odstavce i další 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 frontendový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ří již umí dobře programovat, ale neovládají nástroje pro testování, verzování a práci v týmu. </p> </a> </div>
Výsledek:
Taby
Pokud do stránky připojíme i Bootstrap JavaScript, což už známe z předchozích lekcí, můžeme prvky seznamu použít jako záložky k přepínání dalšího obsahu. HTML kód bude vypadat 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-bs-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-bs-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-bs-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-bs-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>
Tento příklad demonstruje, jak jednoduše můžeme použít taby v
Bootstrapu 5. Výsledkem je funkční systém tabů, který lze integrovat do
webových stránek bez potřeby dalšího JavaScriptu. Použijeme jej jednoduše
tak, že jej zkopírujeme a upravíme. Pro správnou funkčnost je nutné
dodržet všechna ID a prefixy/sufixy. Všimněme si tříd .fade a
.show pro dosažení animace přechodu mezi taby.
Výsledek v prohlížeči je:
V následujícím cvičení, Řešené úlohy k 11.-12. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.