Skupiny zoznamov sú flexibilným a výkonným komponentom na zobrazenie série obsahu. Upravte a rozšírte ich tak, aby podporovali takmer akýkoľvek obsah.
Základný príklad
Najzákladnejšou skupinou zoznamov je neusporiadaný zoznam s položkami zoznamu a príslušnými triedami. Stavte na to pomocou nasledujúcich možností alebo podľa potreby pomocou vlastného CSS.
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Porta ac consectetur ac
Vestibulum na erose
Aktívne položky
Pridať .activedo a .list-group-itemna označenie aktuálneho aktívneho výberu.
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Porta ac consectetur ac
Vestibulum na erose
Zakázané položky
Pridajte .disableddo a .list-group-item, aby sa javil ako zakázaný. Všimnite si, že niektoré prvky s .disabledbudú tiež vyžadovať vlastný JavaScript, aby sa úplne zakázali ich udalosti kliknutia (napr. odkazy).
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Porta ac consectetur ac
Vestibulum na erose
Odkazy a tlačidlá
Pomocou <a>s alebo <button>s vytvorte akcie skupiny zoznamu položiek so stavom kurzora, vypnutým a aktívnym stavom pridaním .list-group-item-action. Tieto pseudotriedy oddeľujeme, aby sme zaistili, že skupiny zoznamov zložené z neinteraktívnych prvkov (ako <li>s alebo <div>s) nebudú poskytovať možnosť kliknutia alebo klepnutia.
Uistite sa , že tu nepoužívate štandardné .btntriedy .
Pomocou <button>s môžete disablednamiesto .disabledtriedy použiť aj atribút. Bohužiaľ, <a>s nepodporujú atribút vypnuté.
Spláchnuť
Pridať .list-group-flushna odstránenie niektorých okrajov a zaoblených rohov na vykreslenie položiek skupiny zoznamu od okraja po okraj v nadradenom kontajneri (napr. karty).
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Porta ac consectetur ac
Vestibulum na erose
Horizontálne
Pridať .list-group-horizontal, ak chcete zmeniť rozloženie položiek skupiny zoznamu z vertikálneho na horizontálne cez všetky body prerušenia. Prípadne vyberte responzívny variant .list-group-horizontal-{sm|md|lg|xl}, aby bola skupina zoznamov horizontálna začínajúca na bode prerušenia min-width. V súčasnosti sa skupiny horizontálnych zoznamov nedajú kombinovať so skupinami zarovnaných zoznamov.
ProTip: Chcete položky skupiny zoznamu rovnakej šírky, keď sú horizontálne? Pridať .flex-filldo každej položky skupiny zoznamu.
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Kontextové triedy
Použite kontextové triedy na štýlovanie položiek zoznamu so stavovým pozadím a farbou.
Dapibus ac facilisis v
Jednoduchá primárna položka skupiny zoznamu
Jednoduchá sekundárna položka skupiny zoznamu
Jednoduchý zoznam úspešných položiek skupiny
Jednoduchá položka skupiny zoznamu nebezpečenstiev
Jednoduchá položka skupiny varovania
Jednoduchá položka skupiny informačného zoznamu
Jednoduchý zoznam položiek skupiny
Jednoduchá položka skupiny tmavého zoznamu
Kontextové triedy pracujú aj s .list-group-item-action. Všimnite si pridanie štýlov vznášania, ktoré sa nenachádzajú v predchádzajúcom príklade. Podporovaný je aj .activeštát; použiť ho na označenie aktívneho výberu na položke kontextovej skupiny zoznamu.
Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácia označená farbou je buď zrejmá zo samotného obsahu (napr. viditeľný text), alebo je zahrnutá alternatívnymi prostriedkami, ako je dodatočný text skrytý spolu s .sr-onlytriedou.
S odznakmi
Pridajte odznaky do ľubovoľnej položky skupiny zoznamu, aby ste pomocou niektorých pomôcok zobrazovali neprečítané počty, aktivitu a ďalšie .
Cras justo odio14
Dapibus ac facilisis v2
Morbi leo risus1
Vlastný obsah
Pridajte takmer akýkoľvek kód HTML, dokonca aj pre skupiny prepojených zoznamov, ako je tá nižšie, pomocou nástrojov flexbox .
Použite zásuvný modul JavaScript na karte – zahrňte ho jednotlivo alebo prostredníctvom skompilovaného bootstrap.jssúboru – na rozšírenie našej skupiny zoznamov na vytváranie tabel miestneho obsahu.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
Používanie atribútov údajov
Navigáciu skupiny zoznamov môžete aktivovať bez písania akéhokoľvek JavaScriptu jednoduchým zadaním data-toggle="list"alebo na prvku. Použite tieto atribúty údajov na .list-group-item.
Cez JavaScript
Povoliť položku zoznamu s tabuľkami cez JavaScript (každá položka zoznamu musí byť aktivovaná samostatne):
Jednotlivé položky zoznamu môžete aktivovať niekoľkými spôsobmi:
Efekt vyblednutia
Ak chcete, aby panel kariet vybledol, pridajte .fadeku každému .tab-pane. Prvá tabla karty musí tiež .showzviditeľniť počiatočný obsah.
Metódy
$().tab
Aktivuje prvok položky zoznamu a kontajner obsahu. Karta by mala mať buď a data-targetalebo hrefzacielenie na kontajnerový uzol v DOM.
.tab('show')
Vyberie danú položku zoznamu a zobrazí príslušný panel. Akákoľvek iná položka zoznamu, ktorá bola predtým vybratá, sa zruší a jej priradená tabla sa skryje. Vráti sa k volajúcemu skôr, ako sa tabla kariet skutočne zobrazí (napríklad pred shown.bs.tabvýskytom udalosti).
Diania
Pri zobrazení novej karty sa udalosti spúšťajú v nasledujúcom poradí:
hide.bs.tab(na aktuálnej aktívnej karte)
show.bs.tab(na karte, ktorá sa má zobraziť)
hidden.bs.tab(na predchádzajúcej aktívnej karte, rovnaká ako pri hide.bs.tabudalosti)
shown.bs.tab(na novo aktívnej práve zobrazenej karte, rovnakej ako pri show.bs.tabudalosti)
Ak ešte nebola aktívna žiadna karta, udalosti hide.bs.taba hidden.bs.tabsa nespustia.
Typ udalosti
Popis
zobraziť.bs.tab
Táto udalosť sa spustí pri zobrazení kariet, ale predtým, než sa zobrazí nová karta. Pomocou event.targeta event.relatedTargetzacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii).
zobrazené.bs.tab
Táto udalosť sa spustí pri zobrazení karty po zobrazení karty. Pomocou event.targeta event.relatedTargetzacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii).
skryť.bs.tab
Táto udalosť sa spustí, keď sa má zobraziť nová karta (a teda predchádzajúca aktívna karta má byť skrytá). Pomocou event.targeta event.relatedTargetzacielite na aktuálnu aktívnu kartu a novú kartu, ktorá bude čoskoro aktívna.
skryté.bs.tab
Táto udalosť sa spustí po zobrazení novej karty (a teda predchádzajúca aktívna karta je skrytá). Pomocou event.targeta event.relatedTargetzacielite na predchádzajúcu aktívnu kartu a na novú aktívnu kartu.