A listacsoportok rugalmas és hatékony komponensek egy sor tartalom megjelenítéséhez. Módosítsa és bővítse őket, hogy szinte bármilyen tartalmat támogassanak.
Alap példa
A legalapvetőbb listacsoport egy rendezetlen lista listaelemekkel és a megfelelő osztályokkal. Építsen rá a következő opciókkal, vagy szükség szerint saját CSS-jével.
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Porta ac consectetur ac
Vestibulum és eros
Aktív elemek
Hozzáadás .activeaz a .list-group-item-hoz az aktuális aktív kijelölés jelzéséhez.
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Porta ac consectetur ac
Vestibulum és eros
Letiltott elemek
Adja hozzá .disabledaz a .list-group-item-hoz, hogy letiltottnak tűnjön . Vegye figyelembe, hogy egyes elemekhez .disabledegyéni JavaScriptre is szükség van a kattintási események (pl. linkek) teljes letiltásához.
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Porta ac consectetur ac
Vestibulum és eros
Linkek és gombok
Használja az <a>s vagy <button>s billentyűket, hogy hozzon létre használható listaelemeket lebegtető, letiltott és aktív állapotú hozzáadásával .list-group-item-action. Elválasztjuk ezeket a pszeudoosztályokat annak biztosítására, hogy a nem interaktív elemekből (például <li>s vagy <div>s) álló listacsoportok ne biztosítsanak kattintási vagy koppintási lehetőséget.
Ügyeljen arra, hogy itt ne használja a szabványos .btnosztályokat .
Az <button>s segítségével az attribútumot is használhatja az osztály disabledhelyett . .disabledSajnos <a>s nem támogatja a letiltott attribútumot.
Öblítés
Hozzáadás .list-group-flushnéhány szegély és lekerekített sarkok eltávolításához, hogy a listacsoport elemeit egy szülőtárolóban (pl. kártyák) éltől szélig jelenítse meg.
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Porta ac consectetur ac
Vestibulum és eros
Vízszintes
A Hozzáadás .list-group-horizontalgombbal módosíthatja a listacsoport elemeinek elrendezését függőlegesről vízszintesre az összes törésponton. Alternatív megoldásként válasszon egy adaptív változatot .list-group-horizontal-{sm|md|lg|xl}, hogy egy listacsoportot vízszintessé tegye az adott törésponttól kezdve min-width. Jelenleg a vízszintes listacsoportok nem kombinálhatók öblítési listacsoportokkal.
ProTip: Egyenlő szélességű listaelemeket szeretne vízszintesen? Adjon .flex-fillhozzá minden listacsoport elemet.
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Cras justo odio
Dapibus ac facilisis be
Morbi leo risus
Kontextuális osztályok
Használjon kontextus szerinti osztályokat állapotjelző háttérrel és színnel rendelkező listaelemek stílusozásához.
Dapibus ac facilisis be
Egy egyszerű elsődleges listacsoport elem
Egy egyszerű másodlagos listacsoport elem
Egy egyszerű sikerlista-csoport elem
Egy egyszerű veszélylista-csoport elem
Egy egyszerű figyelmeztető listaelem
Egy egyszerű információs listaelem
Egy egyszerű könnyű lista csoport elem
Egy egyszerű sötét lista elem
A kontextuális osztályok a -val is működnek .list-group-item-action. Vegye figyelembe a lebegtetési stílusok hozzáadását, amelyek az előző példában nem szerepeltek. Az állam is támogatott .active; Alkalmazza egy aktív kijelölés jelzésére egy kontextus szerinti listacsoport elemen.
A szín használata a jelentés hozzáadására csak vizuális jelzést ad, amelyet nem közvetítenek a kisegítő technológiák – például a képernyőolvasók – felhasználói számára. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból (pl. a látható szövegből) nyilvánvaló, vagy alternatív módon, például az .sr-onlyosztályba rejtett kiegészítő szöveggel szerepel.
Jelvényekkel
Adjon hozzá jelvényeket a listacsoport bármely eleméhez az olvasatlan számok, tevékenységek és egyebek megjelenítéséhez bizonyos segédprogramok segítségével .
Használja a lap JavaScript beépülő modulját (egyenként vagy a lefordított bootstrap.jsfájlon keresztül) a listacsoport kiterjesztéséhez helyi tartalom lapozható ablaktábláinak létrehozásához.
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.
Adatattribútumok használata
A listacsoportos navigációt JavaScript írása nélkül is aktiválhatja, ha egyszerűen megad data-toggle="list"egy elemet vagy egy elemen. Használja ezeket az adatattribútumokat itt: .list-group-item.
JavaScripten keresztül
Lapozható listaelem engedélyezése JavaScripten keresztül (minden listaelemet külön kell aktiválni):
Az egyes listaelemeket többféleképpen is aktiválhatja:
Fade hatás
A lapok paneljének elhalványulásához adja hozzá .fademindegyikhez a .tab-pane. Az első lappanelnek is .showláthatóvá kell tennie a kezdeti tartalmat.
Mód
$().tab
Aktivál egy listaelem elemet és tartalomtárolót. A lapon egy data-targetvagy egy tárolócsomópontot kell hrefcélozni a DOM-ban.
.tab('show')
Kijelöli az adott listaelemet, és megjeleníti a hozzá tartozó panelt. A korábban kiválasztott egyéb listaelemek kijelölése megszűnik, és a hozzá tartozó panel elrejtődik. A lappanel tényleges megjelenítése előtt visszatér a hívóhoz (például az shown.bs.tabesemény bekövetkezte előtt).
Események
Új lap megjelenítésekor az események a következő sorrendben aktiválódnak:
hide.bs.tab(az aktuális aktív lapon)
show.bs.tab(a megjelenítendő lapon)
hidden.bs.tab(az előző aktív lapon ugyanaz, mint az hide.bs.tabeseménynél)
shown.bs.tab(az újonnan aktív, most megjelenő lapon ugyanaz, mint az show.bs.tabeseménynél)
Ha még nem volt aktív lap, a hide.bs.tabés hidden.bs.tabesemények nem aktiválódnak.
Esemény típus
Leírás
show.bs.tab
Ez az esemény a lap megjelenítésekor aktiválódik, de az új lap megjelenítése előtt. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
show.bs.tab
Ez az esemény lapmegjelenítéskor aktiválódik, miután egy lap megjelenik. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
hide.bs.tab
Ez az esemény akkor aktiválódik, amikor új lapot kell megjeleníteni (és így az előző aktív lapot el kell rejteni). Használja a event.targetés event.relatedTargetaz aktuális aktív lapot, illetve a hamarosan aktívvá váló új lapot.
rejtett.bs.tab
Ez az esemény egy új lap megjelenítése után aktiválódik (és így az előző aktív lap el van rejtve). Használja a event.targetés event.relatedTargetaz előző aktív lapot, illetve az új aktív lapot.