Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

10. díl - Bootstrap - List groups

HTML a CSS Bootstrap Bootstrap - List groups

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Jumbotron a Badges, jsme se zabývali Bootstrap komponentami jumbotron a badges. V dnešním tutoriálu CSS frameworku Bootstrap se zaměříme na seznamy.

List groups

List groups, česky asi 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 jak jinak, než pomocí seznamu <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> 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.

Výsledek:

List groups v Bootstrap
list_groups.html

Pozn.: Na disabled položky může být jako vždy možné teoreticky 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>. Divu 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">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ýsledek:

List groups v Bootstrap
list_groups_di­vy.html

Pozn.: 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ích barev Bootstrapu, 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.

List groups v Bootstrap
list_groups_bar­vy.html

Aktivní položka má vždy barvu "primary", jako výchozí modrou, 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 .sr-only, obsahující vysvětlení zvýraznění pro uživatele s hlasovými čtečkami.

Odznaky

Do prvků seznamu není problém vložit odznaky. 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íte dále v kurzu.

List groups v Bootstrap
list_groups_od­znaky.html

Další HTML obsah

Do list groups můžeme vložit prakticky cokoli, nadpisy, odstavce a 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 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ýsledek:

List groups v Bootstrap
list_groups_html_ob­sah.html

Taby

Pokud do stránky připojíme i Bootstrap JavaScript, můžeme prvky seznamu použít jako záložky pro přepínání dalšího obsahu. HTML kód by vypadal 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 již poměrně šílený, ale nenutí nás implementovat žádný JavaScript, což je vždy dobrá zpráva :) Použijte jej jednoduše tak, že jej zkopírujete a upravíte. Pro správnou funkčnost je nutné dodržet všechna ID a prefixy/suffixy. Všimněte si tříd .fade a .show pro dosažení animace přechodu mezi taby.

Výsledek v prohlížeči je:

List groups v Bootstrap
list_groups_ta­by.html

Přepínání pomocí JavaScriptu

Pokud bychom někdy potřebovali taby přepínat pomocí JavaScriptu, například je cyklit po nějakém časovém intervalu, máme k tomu připravenou metodu tab():

$('#id-prvku-v-seznamu').tab('show');

Na tabech se v JavaScriptu volají následující události (jejich pořadí odpovídá pořadí jejich volání):

  • hide.bs.tab - Zavolá se na zrovna aktivní záložce, když se má zobrazit nová záložka.
  • show.bs.tab - Zavolá se na záložce, která se má zrovna zobrazit, ale předtím, než je opravdu zobrazena.
  • hidden.bs.tab - Zavolá se na záložce, která byla dříve aktivní, již poté, co došlo k přepnutí.
  • shown.bs.tab - Zavolá se na záložce, která se zrovna zobrazila.

Události odchytíme např. takto:

$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
        e.target // nově aktivovaný tab
        e.relatedTarget // tak, který byl dříve aktivní
})

V příští lekci, Bootstrap - Karty, se budeme věnovat kartám. Ty nově nahrazují všechny typy kontejnerů starších verzí Bootstrapu.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
1 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Jumbotron a Badges
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Karty
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!