Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

List groups v Bootstrap
list_groups.html

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:

List groups v Bootstrap
list_groups_di­vy.html

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.

List groups v Bootstrap
list_groups_bar­vy.html

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.

List groups v Bootstrap
list_groups_od­znaky.html

Ď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:

List groups v Bootstrap
list_groups_html_ob­sah.html

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:

List groups v Bootstrap
list_groups_ta­by.html

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


 

Predchádzajúci článok
Bootstrap - Jumbotron a Badges
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Riešené úlohy k 11.-12. lekciu Bootstrap CSS frameworku
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti 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