Dhaptar klompok
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.
- Item
- Item kapindho
- Item katelu
- Item kaping papat
- Lan sing kaping lima
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Item aktif
Tambah .active
menyang a .list-group-item
kanggo nuduhake pilihan aktif saiki.
- Item sing aktif
- Item kapindho
- Item katelu
- Item kaping papat
- Lan sing kaping lima
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Item dipatèni
Tambah .disabled
menyang a .list-group-item
supaya katon dipatèni. Elinga yen sawetara unsur .disabled
uga mbutuhake JavaScript khusus kanggo mateni kabeh acara klik (contone, pranala).
- A item dipatèni
- Item kapindho
- Item katelu
- Item kaping papat
- Lan sing kaping lima
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
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 .btn
kene .
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
Kanthi <button>
s, sampeyan uga bisa nggunakake disabled
atribut tinimbang .disabled
kelas. Susah, <a>
s ora ndhukung atribut dipatèni.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
Siram
Tambah .list-group-flush
kanggo mbusak sawetara wates lan sudhut dibunderaké kanggo nerjemahake dhaftar item klompok pinggiran-kanggo-pinggiran ing wadhah induk (contone, kertu).
- Item
- Item kapindho
- Item katelu
- Item kaping papat
- Lan sing kaping lima
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Horisontal
Tambah .list-group-horizontal
kanggo 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-fill
menyang saben item klompok dhaptar.
- Item
- Item kapindho
- Item katelu
- Item
- Item kapindho
- Item katelu
- Item
- Item kapindho
- Item katelu
- Item
- Item kapindho
- Item katelu
- Item
- Item kapindho
- Item katelu
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Kelas kontekstual
Gunakake kelas kontekstual kanggo gaya item dhaptar kanthi latar mburi stateful lan werna.
- Item klompok dhaptar standar sing prasaja
- 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
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
Kelas kontekstual uga bisa digunakake karo .list-group-item-action
. Elinga tambahan gaya hover ing kene ora ana ing conto sadurunge. Uga didhukung yaiku .active
negara; aplikasi iku kanggo nunjukaké pilihan aktif ing item klompok dhaftar kontekstual.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Nuduhake makna kanggo teknologi assistive
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-only
kelas.
Kanthi lencana
Tambah lencana menyang item klompok dhaptar kanggo nuduhake jumlah sing durung diwaca, kegiatan, lan liya-liyane kanthi bantuan sawetara utilitas .
- A item dhaptar14
- Item dhaptar kapindho2
- Item dhaptar katelu1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Konten khusus
Tambahake meh kabeh HTML ing, sanajan kanggo grup dhaptar sing disambung kaya ing ngisor iki, kanthi bantuan flexbox utilities .
Dhaptar judhul item klompok
3 dina kepungkurSawetara isi placeholder ing paragraf.
Lan sawetara print cilik.Dhaptar judhul item klompok
3 dina kepungkurSawetara isi placeholder ing paragraf.
Lan sawetara print cilik bisu.Dhaptar judhul item klompok
3 dina kepungkurSawetara isi placeholder ing paragraf.
Lan sawetara print cilik bisu.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
Prilaku JavaScript
Gunakake plugin JavaScript tab-kalebu kanthi individu utawa liwat bootstrap.js
file sing dikompilasi-kanggo nggedhekake grup dhaptar kita kanggo nggawe panel tabable isi lokal.
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
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
.
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
Liwat JavaScript
Aktifake item dhaptar tab liwat JavaScript (saben item dhaptar kudu diaktifake kanthi individu):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Sampeyan bisa ngaktifake item dhaptar individu kanthi sawetara cara:
$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab
Efek luntur
Kanggo nggawe panel tab luntur, tambahake .fade
saben .tab-pane
. Panel tab pisanan uga kudu .show
nggawe konten awal katon.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
Metode
$().tab
Ngaktifake unsur item dhaptar lan wadhah konten. Tab kudu duwe data-target
utawa href
nargetake simpul wadhah ing DOM.
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
$(function () {
$('#myList a:last-child').tab('show')
})
</script>
.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.tab
acara kedadeyan).
$('#someListItem').tab('show')
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 karohide.bs.tab
acara kasebut)shown.bs.tab
(ing tab sing mentas aktif ditampilake, padha karoshow.bs.tab
acara kasebut)
Yen ora ana tab sing wis aktif, acara hide.bs.tab
lan hidden.bs.tab
ora bakal dipecat.
Jenis acara | Katrangan |
---|---|
show.bs.tab | Acara iki murub ing tab show, nanging sadurunge tab anyar wis ditampilake. Gunakake event.target lan event.relatedTarget kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya). |
ditampilake.bs.tab | Acara iki murub ing tab show sawise tab ditampilake. Gunakake event.target lan event.relatedTarget kanggo 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.target lan event.relatedTarget kanggo 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.target lan event.relatedTarget kanggo target tab aktif sadurunge lan tab aktif anyar, mungguh. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})