Ilista ti grupo
Dagiti grupo ti listaan ket maysa a nalaka a maibagay ken nabileg a paset para iti panangiparang ti serye ti linaon. Baliwan ken palawaen dagitoy tapno suportaran ti dandani aniaman a linaon iti uneg.
Pangrugian a pagarigan
Ti kangrunaan unay a grupo ti listaan ket ti saan a naurnos a listaan nga addaan kadagiti banag ti listaan ken dagiti umno a klase. Mangbangon iti dayta babaen kadagiti pagpilian a sumaganad, wenno babaen ti bukodmo a CSS no kasapulan.
- Maysa a banag
- Maysa a maikadua a banag
- Maikatlo a banag
- Maysa a maikapat a banag
- Ket ti maikalima a maysa
<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>
Aktibo a banag
Inayon .active
iti a .list-group-item
tapno mangipakita ti agdama nga aktibo a panagpili.
- Maysa nga aktibo a banag
- Maysa a maikadua a banag
- Maikatlo a banag
- Maysa a maikapat a banag
- Ket ti maikalima a maysa
<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>
Dagiti baldado a banag
Inayon .disabled
iti a .list-group-item
tapno agparang a baldado. Imutektekanyo a dagiti sumagmamano nga elemento nga addaan .disabled
ket kasapulan pay ti kostumbre a JavaScript tapno naan-anay a mangbaldado kadagiti pasamak ti panagpidutda (kas pagarigan, dagiti silpo).
- Maysa a baldado a banag
- Maysa a maikadua a banag
- Maikatlo a banag
- Maysa a maikapat a banag
- Ket ti maikalima a maysa
<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>
Dagiti silpo ken buton
Usaren <a>
ti s wenno <button>
s tapno mangpartuat kadagiti maaramid a banag ti grupo ti listaan nga addaan kadagiti hover, baldado, ken aktibo nga estado babaen ti pananginayon ti .list-group-item-action
. Pagsisinaenmi dagitoy a pseudo-klase tapno masigurado a dagiti grupo ti listaan a naaramid kadagiti saan nga interaktibo nga elemento (kas <li>
ti s wenno <div>
s) ket saan a mangipaay ti panagpidut wenno panag-tap affordance.
Siguraduen a saan nga usaren dagiti gagangay a .btn
klase ditoy .
<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>
Babaen <button>
ti s, mabalinmo pay nga usaren ti disabled
attribute imbes a ti .disabled
klase. Nakalkaldaang, <a>
saan a suportaran dagiti s ti baldado nga attribute.
<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>
Ag-flush
Inayon .list-group-flush
tapno maikkat dagiti sumagmamano a beddeng ken dagiti nagtimbukel a suli tapno mangiparang kadagiti banag ti grupo ti listaan iti igid-aginggana-iti-igid iti maysa a nagannak a pagkargaan (kas pagarigan, dagiti kard).
- Maysa a banag
- Maysa a maikadua a banag
- Maikatlo a banag
- Maysa a maikapat a banag
- Ket ti maikalima a maysa
<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>
Paidda
Inayon .list-group-horizontal
tapno agbaliw ti layout dagiti banag ti grupo ti listaan manipud iti bertikal aginggana iti horisontal iti ballasiw dagiti amin a breakpoint. Saan laeng a dayta, agpili ti sumungbat a variante .list-group-horizontal-{sm|md|lg|xl}
tapno mangaramid ti maysa a grupo ti listaan a horisontal a mangrugi iti dayta a breakpoint's min-width
. Iti agdama dagiti horisontal a grupo ti listaan ket saan a mabalin a maitipon kadagiti grupo ti listaan ti flush.
ProTip: Kayatmo dagiti agpapada ti kalawana a banag ti grupo ti listaan no horizontal? Inayon .flex-fill
iti tunggal banag ti grupo ti listaan.
- Maysa a banag
- Maysa a maikadua a banag
- Maikatlo a banag
- Maysa a banag
- Maysa a maikadua a banag
- Maikatlo a banag
- Maysa a banag
- Maysa a maikadua a banag
- Maikatlo a banag
- Maysa a banag
- Maysa a maikadua a banag
- Maikatlo a banag
- Maysa a banag
- Maysa a maikadua a banag
- Maikatlo a banag
<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>
Dagiti klase ti konteksto
Usaren dagiti klase ti konteksto tapno estilo ilista dagiti banag nga addaan iti estado a likudan ken kolor.
- Maysa a simple a default a banag ti grupo ti listaan
- Maysa a simple a banag ti grupo ti kangrunaan a listaan
- Maysa a simple a segundario a listaan a banag ti grupo
- Maysa a simple a banag ti grupo ti listaan ti balligi
- Maysa a simple a banag ti grupo ti listaan ti peggad
- Maysa a simple a pakdaar a listaan a banag ti grupo
- Maysa a simple nga info list group item
- Maysa a simple a banag ti grupo ti listaan ti lawag
- Maysa a simple a nasipnget a listaan a banag ti grupo
<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>
Dagiti klase ti konteksto ket agtrabaho met iti .list-group-item-action
. Panunoten ti pannakainayon dagiti estilo ti hover ditoy a saan nga adda iti napalabas a pagarigan. Suportaran pay ti .active
estado; iyaplikar daytoy tapno mangipakita ti aktibo a panagpili iti maysa a banag ti grupo ti listaan ti konteksto.
<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>
Panangipaay ti kaipapanan kadagiti makatulong a teknolohia
Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-only
klase.
Adda badge-na
Manginayon kadagiti badge iti ania man a banag ti grupo ti listaan tapno maipakita dagiti saan a nabasa a bilang, aktibidad, ken dadduma pay babaen ti tulong ti sumagmamano a utilidad .
- Maysa a banag ti listaan14 nga
- Maysa a maikadua a banag ti listaan2. 2
- Maysa a maikatlo a banag ti listaan1 nga
<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>
Kostumbre a linaon
Inayon ti gangani nga ania man nga HTML iti uneg, urayno para kadagiti naisilpo a grupo ti listaan a kas ti maysa iti baba, babaen ti tulong dagiti flexbox a utilidad .
Ilista ti paulo ti aytem ti grupo
3 nga aldaw ti napalabasDadduma a linaon ti placeholder iti maysa a parapo.
Ket sumagmamano a babassit a letra.Ilista ti paulo ti aytem ti grupo
3 nga aldaw ti napalabasDadduma a linaon ti placeholder iti maysa a parapo.
Ket dadduma ti nang-muted iti babassit a letra.Ilista ti paulo ti aytem ti grupo
3 nga aldaw ti napalabasDadduma a linaon ti placeholder iti maysa a parapo.
Ket dadduma ti nang-muted iti babassit a letra.<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>
Kababalin ti JavaScript
Usaren ti tab a plugin ti JavaScript—iraman daytoy a saggaysa wenno babaen ti naurnong bootstrap.js
a file—tapno mangpalawa ti grupomi iti listaan tapno mangpartuat kadagiti tabbable a pane ti lokal a linaon.
<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>
Panangusar kadagiti attribute ti datos
Mabalinmo nga aktiboen ti nabigasion ti grupo ti listaan a saan a mangisurat ti ania man a JavaScript babaen ti basta panangidatag data-toggle="list"
wenno iti maysa nga elemento. Usaren dagitoy a kababalin ti datos iti .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>
Babaen ti JavaScript
Pagbalinen a banag ti listaan ti tabbable babaen ti JavaScript (tunggal banag ti listaan ket kasapulan a mapaaktibo a saggaysa):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Mabalinmo nga aktiboen ti indibidual a banag ti listaan iti sumagmamano a wagas:
$('#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
Fade nga epekto
Tapno agkupas ti tabs panel, inayon .fade
iti tunggal .tab-pane
. Ti umuna a tab pane ket masapul pay .show
a mangaramid ti umuna a linaon a makita.
<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>
Dagiti Pamay-an
$().tab nga
Paaktiboenna ti elemento ti banag ti listaan ken pagkargaan ti linaon. Ti tab ket rumbeng nga addaan iti maysa data-target
wenno maysa a href
mangpuntiria iti maysa a container node iti 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 ('ipakita') .
Pilien ti naited a banag ti listaan ken mangipakita ti nainaig a pane daytoy. Ania man a sabali a banag ti listaan a dati a napili ket agbalin a saan a napili ken ti nainaig a panidna ket mailemmeng. Agsubli iti tumawag sakbay nga aktual a naipakita ti tab pane (kas pagarigan, sakbay a shown.bs.tab
mapasamak ti pasamak).
$('#someListItem').tab('show')
Dagiti Pasamak
No mangipakita ti baro a tab, dagiti pasamak ket agputok iti sumaganad nga urnos:
hide.bs.tab
(iti agdama nga aktibo a tab)show.bs.tab
(iti tab a maipakita)hidden.bs.tab
(iti napalabas nga aktibo a tab, isu met laeng ti para itihide.bs.tab
pasamak)shown.bs.tab
(iti baro nga aktibo a kabarbaro a naipakita a tab, isu met laeng ti para itishow.bs.tab
pasamak)
No awan ti tab a dati nga aktibo, ti hide.bs.tab
ken hidden.bs.tab
dagiti pasamak ket saan a mapaputok.
Kita ti pasamak | Panangiladawan |
---|---|
ipakita.bs.tab | Daytoy a pasamak ket agpuor iti tab show, ngem sakbay a naipakita ti baro a tab. Usaren ti event.target ken event.relatedTarget tapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno. |
naipakita.bs.tab | Daytoy a pasamak ket agpuor iti tab show kalpasan a naipakita ti maysa a tab. Usaren ti event.target ken event.relatedTarget tapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno. |
ilemmeng.bs.tab | Daytoy a pasamak ket agputok no ti baro a tab ket maipakita (ken iti kasta ti napalabas nga aktibo a tab ket mailemmeng). Usaren ti event.target ken event.relatedTarget tapno puntiriaen ti agdama nga aktibo a tab ken ti baro nga asidegen nga aktibo a tab, agpada. |
nailemmeng.bs.tab | Daytoy a pasamak ket agputok kalpasan ti baro a tab a maipakita (ken iti kasta ti napalabas nga aktibo a tab ket mailemmeng). Usaren ti event.target ken event.relatedTarget tapno puntiriaen ti napalabas nga aktibo a tab ken ti baro nga aktibo a tab, a nagsasaruno. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})