Source

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum a me ka eros
<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>

Nā mea hana

Hoʻohui .activei kahi .list-group-iteme hōʻike i ke koho hana o kēia manawa.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum a me ka eros
<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>

Nā mea hoʻopale

Hoʻohui .disabledi kahi .list-group-itemi mea e ʻike ʻia ai ua pio . E hoʻomanaʻo, .disablede 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).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum a me ka eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">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>

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ā .btnpapa maʻamau ma aneʻi .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum a me ka eros 
<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" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

Me <button>ka s, hiki iā ʻoe ke hoʻohana i ke disabledʻano ma mua o ka .disabledpapa. ʻ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">
    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>

Holoi

Hoʻohui .list-group-flushno 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).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum a me ka eros
<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>

Kaupae

Hoʻohui .list-group-horizontalno 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-filli kēlā me kēia mea hui papa inoa.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <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>
</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.

  • Dapibus ac facilisis in
  • 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">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>

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 .activemokuʻāina; e hoʻohana iā ia no ka hōʻike ʻana i kahi koho ʻeleu ma kahi mea hui papa inoa.

Dapibus ac facilisis in 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 
<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>
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-onlypapa.

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 .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1 
<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>

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

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
E papa inoa i ke poʻomanaʻo o ka hui
3 lā aku nei

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
E papa inoa i ke poʻomanaʻo o ka hui
3 lā aku nei

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<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">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">
    <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">
    <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>

ʻ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.jsfaila 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.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

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.

<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.

<!-- 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 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 (e) {
  e.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 .fadei kēlā me kēia .tab-pane. Pono ka pane ʻaoʻao mua e ʻike .showi 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-targetPono e loaʻa i ka Tab hrefkahi 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.tabhanana).

$('#someListItem').tab('show')

Nā hanana

I ka hōʻike ʻana i kahi ʻaoʻao hou, e ʻā nā hanana ma ke ʻano penei:

  1. hide.bs.tab(ma ka papa hana o kēia manawa)
  2. show.bs.tab(ma ka ʻaoʻao e hōʻike ʻia)
  3. hidden.bs.tab(ma ka papa hana mua, e like me ka hide.bs.tabhanana)
  4. shown.bs.tab(ma ka ʻaoʻao hou i hōʻike ʻia, e like me ka show.bs.tabhanana)

Inā ʻaʻohe papa i hana mua ʻia, ʻaʻole e puhi ʻia nā hanana hide.bs.taba 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.targeta event.relatedTargete 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.targeta event.relatedTargete 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.targeta event.relatedTargete 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.targeta event.relatedTargete hoʻopaʻa i ka papa hana mua a me ka pā hana hou. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})