Grup dhaptar minangka komponen sing fleksibel lan kuat kanggo nampilake seri konten. Ngowahi lan ngluwihi kanggo ndhukung meh wae isi ing.
Tuladha dhasar
Klompok dhaptar sing paling dhasar yaiku dhaptar tanpa urutan karo item dhaptar lan kelas sing cocog. Mbangun ing karo opsi sing tindakake, utawa karo CSS dhewe yen perlu.
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Porta ac consectetur ac
Vestibulum lan eros
Item aktif
Tambah .activemenyang a .list-group-itemkanggo nuduhake pilihan aktif saiki.
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Porta ac consectetur ac
Vestibulum lan eros
Item dipatèni
Tambah .disabledmenyang a .list-group-itemsupaya katon dipatèni. Elinga yen sawetara unsur .disableduga mbutuhake JavaScript khusus kanggo mateni kabeh acara klik (contone, pranala).
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Porta ac consectetur ac
Vestibulum lan eros
Link lan tombol
Gunakake <a>s utawa <button>s kanggo nggawe item klompok dhaptar sing bisa ditindakake kanthi status hover, mateni, lan aktif kanthi nambahake .list-group-item-action. Kita misahake kelas pseudo iki kanggo mesthekake klompok dhaptar sing digawe saka unsur non-interaktif (kaya <li>s utawa <div>s) ora nyedhiyakake kemampuan klik utawa tunyuk.
Priksa manawa sampeyan ora nggunakake kelas standar ing .btnkene .
Kanthi <button>s, sampeyan uga bisa nggunakake disabledatribut tinimbang .disabledkelas. Susah, <a>s ora ndhukung atribut dipatèni.
Siram
Tambah .list-group-flushkanggo mbusak sawetara wates lan sudhut dibunderaké kanggo nerjemahake dhaftar item klompok pinggiran-kanggo-pinggiran ing wadhah induk (contone, kertu).
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Porta ac consectetur ac
Vestibulum lan eros
Horisontal
Tambah .list-group-horizontalkanggo ngganti tata letak item klompok dhaptar saka vertikal menyang horisontal ing kabeh breakpoints. Utawa, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl}kanggo nggawe grup dhaptar horisontal diwiwiti saka breakpoint kasebut min-width. Saiki grup dhaptar horisontal ora bisa digabung karo grup dhaptar siram.
ProTip: Pengin item grup dhaptar sing padha lebar nalika horisontal? Tambah .flex-fillmenyang saben item klompok dhaptar.
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Cras justo odio
Dapibus ac facilisis ing
Morbi leo risus
Kelas kontekstual
Gunakake kelas kontekstual kanggo gaya item dhaptar kanthi latar mburi stateful lan werna.
Dapibus ac facilisis ing
Item klompok dhaptar utama sing prasaja
Item klompok dhaptar sekunder sing prasaja
Item klompok dhaptar sukses sing prasaja
Item klompok dhaptar bebaya sing prasaja
Item klompok dhaptar bebaya sing prasaja
A item klompok dhaptar info prasaja
Item klompok dhaptar cahya sing prasaja
A item klompok dhaftar peteng prasaja
Kelas kontekstual uga bisa digunakake karo .list-group-item-action. Elinga tambahan gaya hover ing kene ora ana ing conto sadurunge. Uga didhukung yaiku .activenegara; aplikasi iku kanggo nunjukaké pilihan aktif ing item klompok dhaftar kontekstual.
Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.
Kanthi lencana
Tambah lencana menyang item klompok dhaptar kanggo nuduhake jumlah sing durung diwaca, kegiatan, lan liya-liyane kanthi bantuan sawetara utilitas .
Cras justo odio14
Dapibus ac facilisis ing2
Morbi leo risus1
Konten khusus
Tambahake meh kabeh HTML ing, sanajan kanggo grup dhaptar sing disambung kaya ing ngisor iki, kanthi bantuan flexbox utilities .
Gunakake plugin JavaScript tab-kalebu kanthi individu utawa liwat bootstrap.jsfile sing dikompilasi-kanggo nggedhekake grup dhaptar kita kanggo nggawe panel tabable isi lokal.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugit tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minimal tempor sunt voluptate consectetur exercitation id ut nulla. Ea lan fugit aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minimal.
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.
Nggunakake atribut data
Sampeyan bisa ngaktifake pandhu arah klompok dhaptar tanpa nulis JavaScript kanthi mung nemtokake data-toggle="list"utawa ing unsur. Gunakake atribut data iki ing .list-group-item.
Liwat JavaScript
Aktifake item dhaptar tab liwat JavaScript (saben item dhaptar kudu diaktifake kanthi individu):
Sampeyan bisa ngaktifake item dhaptar individu kanthi sawetara cara:
Efek luntur
Kanggo nggawe panel tab luntur, tambahake .fadesaben .tab-pane. Panel tab pisanan uga kudu .shownggawe konten awal katon.
Metode
$().tab
Ngaktifake unsur item dhaptar lan wadhah konten. Tab kudu duwe data-targetutawa hrefnargetake simpul wadhah ing DOM.
.tab('show')
Milih item dhaptar sing diwenehake lan nuduhake panel sing gegandhengan. Item dhaptar liyane sing sadurunge dipilih dadi ora dipilih lan panel sing gegandhengan didhelikake. Bali menyang panelpon sadurunge panel tab wis bener ditampilake (contone, sadurunge shown.bs.tabacara kedadeyan).
Acara
Nalika nuduhake tab anyar, acara kasebut murub kanthi urutan ing ngisor iki:
hide.bs.tab(ing tab aktif saiki)
show.bs.tab(ing tab sing bakal ditampilake)
hidden.bs.tab(ing tab aktif sadurunge, padha karo hide.bs.tabacara kasebut)
shown.bs.tab(ing tab sing mentas aktif ditampilake, padha karo show.bs.tabacara kasebut)
Yen ora ana tab sing wis aktif, acara hide.bs.tablan hidden.bs.tabora bakal dipecat.
Jenis acara
Katrangan
show.bs.tab
Acara iki murub ing tab show, nanging sadurunge tab anyar wis ditampilake. Gunakake event.targetlan event.relatedTargetkanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
ditampilake.bs.tab
Acara iki murub ing tab show sawise tab ditampilake. Gunakake event.targetlan event.relatedTargetkanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
hide.bs.tab
Acara iki murub nalika tab anyar bakal ditampilake (lan kanthi mangkono tab aktif sadurunge bakal didhelikake). Gunakake event.targetlan event.relatedTargetkanggo target tab aktif saiki lan tab anyar sing bakal aktif.
hidden.bs.tab
Acara iki murub sawise tab anyar ditampilake (lan kanthi mangkono tab aktif sadurunge didhelikake). Gunakake event.targetlan event.relatedTargetkanggo target tab aktif sadurunge lan tab aktif anyar, mungguh.