Papa papa inoa
ʻO nā pūʻulu papa inoa he mea maʻalahi a ikaika hoʻi no ka hōʻike ʻana i ke ʻano o ka ʻike. Hoʻololi a hoʻonui iā lākou e kākoʻo i nā ʻike āpau i loko.
kumu hoʻohālike
ʻO ka pūʻulu papa inoa maʻamau he papa inoa ʻole me nā mea papa inoa a me nā papa kūpono. E kūkulu i luna me nā koho e pili ana, a i ʻole me kāu CSS ponoʻī e like me ka mea e pono ai.
- He mea
- He mea ʻelua
- He mea kolu
- He mea ʻehā
- A ʻo ka ʻelima
<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>
Nā mea hana
Hoʻohui .active
i kahi .list-group-item
e hōʻike i ke koho hana o kēia manawa.
- He mea hana
- He mea ʻelua
- He mea kolu
- He mea ʻehā
- A ʻo ka ʻelima
<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>
Nā mea hoʻopale
Hoʻohui .disabled
i kahi .list-group-item
i mea e ʻike ʻia ai ua pio . E hoʻomanaʻo, .disabled
e koi pū kekahi mau mea me ka JavaScript maʻamau e hoʻopau piha i kā lākou mau hanana kaomi (e laʻa, nā loulou).
- He mea pio
- He mea ʻelua
- He mea kolu
- He mea ʻehā
- A ʻo ka ʻelima
<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>
Nā loulou a me nā pihi
E hoʻohana iā <a>
s a i ʻole <button>
s no ka hana ʻana i nā mea pūʻulu papa inoa hiki ke hoʻohana ʻia me ka hover, disable, a me nā mokuʻāina ikaika ma ka hoʻohui ʻana i.list-group-item-action
. Hoʻokaʻawale mākou i kēia mau papa pseudo e hōʻoia i nā pūʻulu papa inoa i hana ʻia me nā mea pili ʻole (e like me <li>
s a i ʻole <div>
s) ʻaʻole e hāʻawi i kahi kaomi a paʻi paha.
Mai hoʻohana i nā .btn
papa maʻamau ma aneʻi .
<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>
Me <button>
ka s, hiki iā ʻoe ke hoʻohana i ke disabled
ʻano ma mua o ka .disabled
papa. ʻO ka mea kaumaha, <a>
ʻaʻole kākoʻo ʻo ia i ke ʻano kīnā.
<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>
Holoi
Hoʻohui .list-group-flush
no ka wehe ʻana i kekahi mau palena a me nā kihi pōʻai no ka hoʻolilo ʻana i nā mea pūʻulu papa inoa ma kahi ʻaoʻao i kahi pahu makua (e laʻa, kāleka).
- He mea
- He mea ʻelua
- He mea kolu
- He mea ʻehā
- A ʻo ka ʻelima
<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>
Kaupae
Hoʻohui .list-group-horizontal
no ka hoʻololi ʻana i ka hoʻonohonoho ʻana o nā mea pūʻulu papa inoa mai ke kūpaʻa a hiki i ke ākea ma nā wahi haʻi āpau. ʻO kahi ʻē aʻe, e koho i kahi ʻokoʻa pane .list-group-horizontal-{sm|md|lg|xl}
e hana i kahi hui papa inoa i ke alo e hoʻomaka ana ma kēlā breakpoint min-width
. ʻAʻole hiki ke hoʻohui ʻia nā pūʻulu papa inoa i kēia manawa me nā pūʻulu papa inoa flush.
ProTip: Makemake ʻoe i nā mea papa inoa like-ākea i ka wā ākea? E hoʻohui .flex-fill
i kēlā me kēia mea hui papa inoa.
- He mea
- He mea ʻelua
- He mea kolu
- He mea
- He mea ʻelua
- He mea kolu
- He mea
- He mea ʻelua
- He mea kolu
- He mea
- He mea ʻelua
- He mea kolu
- He mea
- He mea ʻelua
- He mea kolu
<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>
Nā papa kuʻuna
E hoʻohana i nā papa pōʻaiapili e kāhiko i nā mea papa inoa me kahi kūlana kūlana a me ke kala.
- He mea papa inoa paʻamau maʻalahi
- He mea papa inoa maʻalahi maʻalahi
- He mea maʻalahi papa inoa papa lua
- He mea maʻalahi ka papa inoa o ka holomua
- He mea maʻalahi ka papa inoa o ka pilikia
- He mea papa inoa papa inoa maʻalahi
- He mea papa inoa maʻalahi
- He mea papa inoa māmā māmā
- ʻO kahi mea hui papa inoa ʻeleʻele maʻalahi
<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>
Hana pū nā papa kuʻuna me .list-group-item-action
. E nānā i ka hoʻohui ʻana o nā ʻano hover ma ʻaneʻi ʻaʻole i hōʻike ʻia ma ka laʻana mua. Kākoʻo pū ʻia ka .active
mokuʻāina; e hoʻohana iā ia no ka hōʻike ʻana i kahi koho ʻeleu ma kahi mea hui papa inoa.
<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>
Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua
ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ka waihoʻoluʻu i ʻike ʻia mai ka maʻiʻo ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .sr-only
papa.
Me nā hōʻailona
E hoʻohui i nā hōʻailona i kēlā me kēia mea pūʻulu papa inoa e hōʻike i nā helu i heluhelu ʻole ʻia, nā hana, a me nā mea hou aku me ke kōkua o kekahi mau pono .
- He mea papa inoa14
- He mea papa inoa lua2
- He mea papa inoa kolu1
<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>
Maʻiʻo maʻamau
Hoʻohui kokoke i nā HTML i loko, ʻoiai no nā hui papa inoa i hoʻopili ʻia e like me ia ma lalo nei, me ke kōkua o nā pono hana flexbox .
E papa inoa i ke poʻomanaʻo o ka hui
3 lā aku neiʻO kekahi maʻiʻo placeholder ma kahi paukū.
A me kekahi paʻi liʻiliʻi.E papa inoa i ke poʻomanaʻo o ka hui
3 lā aku neiʻO kekahi maʻiʻo placeholder ma kahi paukū.
A ʻo kekahi paʻi liʻiliʻi i hoʻoheheʻe ʻia.E papa inoa i ke poʻomanaʻo o ka hui
3 lā aku neiʻO kekahi maʻiʻo placeholder ma kahi paukū.
A ʻo kekahi paʻi liʻiliʻi i hoʻoheheʻe ʻia.<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>
ʻO ka hana JavaScript
E hoʻohana i ka plugin JavaScript tab—e hoʻokomo iā ia i kēlā me kēia a i ʻole ma o ka bootstrap.js
faila i hui ʻia—e hoʻonui i kā mākou pūʻulu papa inoa no ka hana ʻana i nā pane tabable o ka ʻike kūloko.
<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>
Ke hoʻohana nei i nā ʻano ʻikepili
Hiki iā ʻoe ke hoʻoikaika i ka hoʻokele pūʻulu papa inoa me ka ʻole o ke kākau ʻana i kekahi JavaScript ma ke kuhikuhi wale ʻana a i data-toggle="list"
ʻole ma kahi mea. E hoʻohana i kēia mau ʻano ʻikepili ma .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>
Ma o JavaScript
E ho'ā i ka mea papa inoa papa ma o JavaScript (pono e ho'ā pakahi 'ia kēlā me kēia mea papa inoa):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Hiki iā ʻoe ke hoʻāla i kēlā me kēia mea papa inoa ma nā ʻano he nui:
$('#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
Ka hopena mae
No ka hoʻopau ʻana i nā papa pā, hoʻohui .fade
i kēlā me kēia .tab-pane
. Pono ka pane ʻaoʻao mua e ʻike .show
i ka ʻike mua.
<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>
Nā ʻano hana
$().tab
Ho'ā i ka mea papa inoa a me ka ipu maʻiʻo. data-target
Pono e loaʻa i ka Tab href
kahi pahu pahu pahu ma ka 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('hōʻike')
Koho i ka mea papa inoa i hāʻawi ʻia a hōʻike i kāna pane pili. ʻAʻole i koho ʻia nā mea papa inoa ʻē aʻe i koho mua ʻia a hūnā ʻia kāna pane pili. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka ʻaoʻao ʻaoʻao (no ka laʻana, ma mua o ka hiki ʻana o ka shown.bs.tab
hanana).
$('#someListItem').tab('show')
Nā hanana
I ka hōʻike ʻana i kahi ʻaoʻao hou, e ʻā nā hanana ma ke ʻano penei:
hide.bs.tab
(ma ka papa hana o kēia manawa)show.bs.tab
(ma ka ʻaoʻao e hōʻike ʻia)hidden.bs.tab
(ma ka papa hana mua, e like me kahide.bs.tab
hanana)shown.bs.tab
(ma ka ʻaoʻao hou i hōʻike ʻia, e like me kashow.bs.tab
hanana)
Inā ʻaʻohe papa i hana mua ʻia, ʻaʻole e puhi ʻia nā hanana hide.bs.tab
a me nā hanana.hidden.bs.tab
ʻAno hanana | wehewehe |
---|---|
hōʻike.bs.tab | Hoʻomaka kēia hanana ma ka hōʻike pā, akā ma mua o ka hōʻike ʻia ʻana o ka pā hou. E hoʻohana event.target a event.relatedTarget e hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa). |
hōʻike ʻia.bs.tab | Hoʻomaka kēia hanana ma ka hōʻike pā ma hope o ka hōʻike ʻia ʻana o kahi pā. E hoʻohana event.target a event.relatedTarget e hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa). |
huna.bs.tab | Ke ahi kēia hanana i ka wā e hōʻike ʻia ai kahi pā hou (a no laila e hūnā ʻia ka pā hana mua). E hoʻohana event.target a event.relatedTarget e hoʻopaʻa i ka ʻaoʻao ʻeleu o kēia manawa a me ka ʻaoʻao koke-e-ʻeleu hou. |
huna.bs.tab | Ke ahi kēia hanana ma hope o ka hōʻike ʻia ʻana o kahi pā hou (a no laila ua hūnā ʻia ka pā hana mua). E hoʻohana event.target a event.relatedTarget e hoʻopaʻa i ka papa hana mua a me ka pā hana hou. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})