Kyerɛw kuw no din
List groups yɛ ade a ɛyɛ mmerɛw na ɛwɔ tumi a wɔde da nsɛm a ɛtoatoa so adi. Sesa na trɛw mu ma ɛboa ɛkame ayɛ sɛ nsɛm biara a ɛwɔ mu no.
List kuw a ɛho hia sen biara ne list a wɔanhyehyɛ no yiye a list nneɛma ne adesua ahorow a ɛfata wom. Fa akwan horow a edi hɔ no si so, anaasɛ fa w’ankasa CSS sɛnea ɛho hia.
- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Morbi leo a ɛwɔ soro no
- Porta ac a wɔde hyɛ mu
- Vestibulum a ɛwɔ eros no
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Fa ka .active
a ho .list-group-item
na kyerɛ mprempren a woapaw a ɛreyɛ adwuma no.
- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Morbi leo a ɛwɔ soro no
- Porta ac a wɔde hyɛ mu
- Vestibulum a ɛwɔ eros no
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Fa ka .disabled
a ho .list-group-item
na ama ayɛ te sɛ nea wɔagyae. Hyɛ no nsow sɛ elements bi a ɛwɔ .disabled
nso bɛhwehwɛ JavaScript a wɔahyɛ da ayɛ no na ama wɔn click events no ayɛ adwuma koraa (sɛ nhwɛso no, links).
- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Morbi leo a ɛwɔ soro no
- Porta ac a wɔde hyɛ mu
- Vestibulum a ɛwɔ eros no
<ul class="list-group">
<li class="list-group-item disabled">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Fa <a>
s anaa <button>
s yɛ list kuw nneɛma a wotumi yɛ ho adwuma a ɛwɔ hover, disabled, ne active states denam .list-group-item-action
. Yɛtetew saa pseudo-classes yi mu de hwɛ hu sɛ list akuw a wɔde nneɛma a ɛnyɛ nkitahodi (te sɛ <li>
s anaa <div>
s) ayɛ no remma click anaa tap affordance.
Hwɛ hu sɛ woremfa .btn
adesua ahorow a ɛwɔ hɔ no nni dwuma wɔ ha .
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
Sɛ wode <button>
s di dwuma a, wubetumi nso de disabled
su no adi dwuma sen sɛ wode .disabled
adesuakuw no bedi dwuma. Awerɛhosɛm ne sɛ, <a>
s ntumi mmoa su a wɔadi dɛm no.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
Fa ka .list-group-flush
ho na yi ahyeɛ binom ne ntwea a ɛyɛ kurukuruwa de kyerɛ list kuw nneɛma ase-kɔ-ano wɔ ɔwofoɔ ahina mu (sɛ nhwɛsoɔ, kaad).
- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Morbi leo a ɛwɔ soro no
- Porta ac a wɔde hyɛ mu
- Vestibulum a ɛwɔ eros no
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Fa contextual classes di dwuma fa style list nneɛma a ɛwɔ stateful akyi ne kɔla.
- Dapibus ac adwumayɛbea a ɛwɔ
- Mfitiase list kuw ade a ɛnyɛ den
- Asɛm a ɛnyɛ den a ɛto so abien list kuw ade
- A simple nkonimdi list kuw ade
- Asiane list kuw ade a ɛnyɛ den
- Kɔkɔbɔ list kuw ade a ɛnyɛ den
- A simple info list kuw ade
- Hann list kuw ade a ɛnyɛ den
- Esum list kuw ade a ɛnyɛ den
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</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>
Nsɛm a ɛfa ho adesua ahorow nso ne .list-group-item-action
. Hyɛ hover styles a ɛwɔ ha a enni nhwɛso a atwam no mu no nsow. Ɔman no nso boa .active
; fa di dwuma de kyerɛ nea wɔapaw a ɛyɛ nnam wɔ nsɛm a ɛfa ho list kuw ade bi so.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa
Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-only
adesuakuw no mu.
Fa badge ahorow ka list kuw ade biara ho de kyerɛ akontaabu a wonkenkanee, dwumadi, ne nea ɛkeka ho denam utilities binom mmoa so .
- Cras justo odio na ɔyɛ14. 15
- Dapibus ac adwumayɛbea a ɛwɔ2. 2.
- Morbi leo a ɛwɔ soro no1. 1.
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Ɛkame ayɛ sɛ fa HTML biara ka ho wɔ mu, mpo ma linked list groups te sɛ nea ɛwɔ ase ha no, denam flexbox utilities mmoa so .
Kyerɛw kuw no asɛmti
Nnafua 3 a atwam niDonec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Maecenas sed diam eget risus varius a ɛyɛ mmerɛw no.
Donec id elit a ɛnyɛ mi porta.Kyerɛw kuw no asɛmti
Nnafua 3 a atwam niDonec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Maecenas sed diam eget risus varius a ɛyɛ mmerɛw no.
Donec id elit a ɛnyɛ mi porta.Kyerɛw kuw no asɛmti
Nnafua 3 a atwam niDonec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Maecenas sed diam eget risus varius a ɛyɛ mmerɛw no.
Donec id elit a ɛnyɛ mi porta.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</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">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</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">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
Fa tab JavaScript plugin no di dwuma—fa ka ho mmiako mmiako anaa fa bootstrap.js
fael a wɔaboaboa ano no so—na trɛw yɛn list kuw no mu ma yɛ tabbable panes a ɛwɔ mpɔtam hɔ nsɛm no mu.
<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>
data-toggle="list"
Wubetumi ama list group navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ kɛkɛ anaasɛ wobɛda so. Fa saa data su ahorow yi di dwuma wɔ .list-group-item
.
<!-- 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>
Ma tabbable list item no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode list item biara yɛ adwuma mmiako mmiako):
$('#myList a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
Wubetumi ama ankorankoro list item no ayɛ adwuma wɔ akwan horow pii so:
$('#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
Sɛ wopɛ sɛ tabs panel no bɛyera a, fa ka .fade
emu biara ho .tab-pane
. Ɛsɛ sɛ tab pane a edi kan no nso .show
ma nsɛm a edi kan no da adi.
<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>
Ɛma list item element ne content container bi yɛ adwuma. Ɛsɛ sɛ tab nya a data-target
anaasɛ href
targeting a container node wɔ DOM no mu.
<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>
Paw list ade a wɔde ama no na ɛkyerɛ ne pane a ɛbata ho. List adeɛ foforɔ biara a wɔadi kan apaw no bɛyɛ nea wɔanpaw na ne pane a ɛbata ho no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ tab pane no ankasa (sɛ nhwɛso no, ansa na shown.bs.tab
asɛm no asi).
$('#someListItem').tab('show')
Sɛ worekyerɛ tab foforo a, nsɛm a esisi no bɛtow nnidiso nnidiso a edidi so yi:
hide.bs.tab
(wɔ tab a ɛreyɛ adwuma mprempren no so)show.bs.tab
(wɔ tab a wɔrebɛkyerɛ no so)hidden.bs.tab
(wɔ active tab a atwam no so no, nea ɛwɔhide.bs.tab
adeyɛ no ho no ara)shown.bs.tab
(wɔ tab a wɔakyerɛ seesei ara a ɛyɛ adwuma foforo no so no, nea ɛwɔshow.bs.tab
adeyɛ no ho no ara)
Sɛ na tab biara nni hɔ a ɛyɛ adwuma dedaw a, wɔrentow hide.bs.tab
ne hidden.bs.tab
nsɛm a esisi no.
Adeyɛ no su | Nkyerɛmu |
---|---|
kyerɛ.bs.tab no | Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa event.target ne di dwuma event.relatedTarget fa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara. |
wɔakyerɛ.bs.tab | Saa adeyɛ yi tow wɔ tab show so bere a wɔakyerɛ tab bi akyi. Fa event.target ne di dwuma event.relatedTarget fa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara. |
hide.bs.tab no ho nsɛm | Saa adeyɛ yi tow bere a ɛsɛ sɛ wɔkyerɛ tab foforo (na ɛnam saa kwan yi so no ɛsɛ sɛ wɔde tab a ɛyɛ adwuma a atwam no sie). Fa event.target ne di dwuma event.relatedTarget fa w’ani si tab a ɛreyɛ adwuma mprempren ne tab foforo a ɛrenkyɛ na ɛreyɛ adwuma no so, sɛnea ɛte biara. |
ahintaw.bs.tab no | Saa adeyɛ yi tow bere a wɔakyerɛ tab foforo akyi (na ɛnam saa kwan yi so no wɔde tab a ɛyɛ adwuma a atwam no asie). Fa event.target ne di dwuma event.relatedTarget fa w’ani si tab a ɛreyɛ adwuma a atwam no ne tab a ɛreyɛ adwuma foforo no so, sɛnea ɛte biara. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})