Source

Ndepụta otu

Otu ndepụta bụ ihe na-agbanwe agbanwe ma dị ike maka igosipụta usoro ọdịnaya. Gbanwee ma gbasaa ha iji kwado naanị ọdịnaya ọ bụla dị n'ime.

Ihe atụ bụ isi

Otu ndepụta kachasị ewu ewu bụ ndepụta edeghị aha nke nwere ihe ndepụta yana klaasị kwesịrị ekwesị. Jiri nhọrọ ndị na-eso wulite ya, ma ọ bụ jiri CSS nke gị dị ka achọrọ.

  • Cras justo odio
  • Dapibus ac facilisis na
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum na 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>

Ihe na-arụ ọrụ

Tinye .activena a .list-group-itemiji gosi nhọrọ nọ n'ọrụ ugbu a.

  • Cras justo odio
  • Dapibus ac facilisis na
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum na 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>

Ihe ndị nwere nkwarụ

Tinye .disabledna a .list-group-itemka ọ yie enweghị nkwarụ. Rịba ama na ụfọdụ ihe nwere .disabledga-achọkwa Javascript omenala iji gbanyụọ mmemme ọpịpị ha (dịka ọmụmaatụ, njikọ).

  • Cras justo odio
  • Dapibus ac facilisis na
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum na 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>

Jiri <a>s ma ọ bụ <button>s mepụta ndepụta otu ihe nwere ike ime ya na hover, nwere nkwarụ na steeti nọ n'ọrụ site na ịgbakwunye .list-group-item-action. Anyị na-ekewa klaasị pseudo ndị a iji hụ na otu ndepụta nke ihe anaghị emekọrịta ihe (dị ka <li>s ma ọ bụ <div>s) anaghị enye ohere ọpịpị ma ọ bụ kpatụ ego.

Jide n'aka na ị gaghị eji .btnklas ọkọlọtọ ebe a .

Cras justo odio Dapibus ac facilisis na Morbi leo risus Porta ac consectetur ac Vestibulum na 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>

Na <button>s, ị nwekwara ike iji disablednjirimara kama .disabledklaasị. Ọ dị nwute, <a>s anaghị akwado njirimara nkwarụ.

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

Ghichaa

Tinye .list-group-flushka iwepu ụfọdụ oke na nkuku gburugburu iji nye otu ihe ndepụta n'akụkụ ruo n'ọnụ n'ime akpa nne na nna (dịka ọmụmaatụ, kaadị).

  • Cras justo odio
  • Dapibus ac facilisis na
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum na 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>

Kehoraizin

Tinye .list-group-horizontalka ịgbanwee okirikiri nhọrọ ukwuu nke ihe otu ndetu site na vetikal gaa na kehoraizin gafee ebe nkwụsịtụ niile. N'aka nke ọzọ, họrọ ụdị dị iche iche na-anabata .list-group-horizontal-{sm|md|lg|xl}iji mee ka otu ndepụta dị n'ahịrị malite na ebe nkwụsịtụ ahụ min-width. Ugbu a enweghị ike ijikọ otu ndepụta kewapụrụ na otu ndepụta mkpocha.

ProTip: Chọrọ ihe ndị otu ndepụta obosara nhata nhata mgbe ọ kwụ ọtọ? Tinye .flex-filln'ime ihe ndepụta nke ọ bụla.

  • Cras justo odio
  • Dapibus ac facilisis na
  • 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 na
  • 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 na
  • 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 na
  • 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 na
  • 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>

Klaasị ihe atụ

Jiri klaasị okirikiri mee ndepụta ihe ndị nwere nzụlite na agba mara mma.

  • Dapibus ac facilisis na
  • Otu ihe ndepụta izizi dị mfe
  • Otu ihe ndepụta nke abụọ dị mfe
  • Otu ihe ndepụta ihe ịga nke ọma dị mfe
  • Otu ihe ndepụta ihe egwu dị mfe
  • Otu ihe ndepụta ịdọ aka ná ntị dị mfe
  • Otu ihe ndepụta ozi dị mfe
  • Otu ihe ndepụta ọkụ dị mfe
  • Otu ihe ndepụta gbara ọchịchịrị dị mfe
<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>

Klas Contextual na-arụkwa ọrụ na .list-group-item-action. Rịba ama mgbakwunye na ụdị hover ebe a adịghị na ihe atụ gara aga. Ihe na-akwadokwa bụ .activesteeti; tinye ya iji gosi nhọrọ na-arụ ọrụ n'ime ihe otu ndepụta okwu.

Dapibus ac facilisis na Otu ihe ndepụta izizi dị mfe Otu ihe ndepụta nke abụọ dị mfe Otu ihe ndepụta ihe ịga nke ọma dị mfe Otu ihe ndepụta ihe egwu dị mfe Otu ihe ndepụta ịdọ aka ná ntị dị mfe Otu ihe ndepụta ozi dị mfe Otu ihe ndepụta ọkụ dị mfe Otu ihe ndepụta gbara ọchịchịrị dị mfe 
<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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .sr-onlyklaasị.

Na baajị

Tinye baajị na ihe otu ndepụta ọ bụla iji gosi ọnụọgụgụ, mmemme na ndị ọzọ site n'enyemaka nke ụfọdụ ngwa .

  • Cras justo odio14
  • Dapibus ac facilisis na2
  • 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>

Ọdịnaya ahaziri ahazi

Tinye ihe fọrọ nke nta ka ọ bụrụ HTML ọ bụla n'ime, ọbụlagodi maka otu ndepụta ejikọtara dị ka nke dị n'okpuru, site na enyemaka nke flexbox utilities .

Depụta isiokwu isiokwu otu
Ụbọchị 3 gara aga

Achọpụtaghị m porta gravida na eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Depụta isiokwu isiokwu otu
Ụbọchị 3 gara aga

Achọpụtaghị m porta gravida na eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Depụta isiokwu isiokwu otu
Ụbọchị 3 gara aga

Achọpụtaghị m porta gravida na 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>

Omume Javascript

Jiri ngwa mgbakwunye Javascript taabụ-gụnye ya n'otu n'otu ma ọ bụ site na bootstrap.jsfaịlụ ekpokọtara-iji gbasaa otu ndepụta anyị iji mepụta paịlị ọdịnaya mpaghara.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt bụ nke a na-apụghị ịhụ anya proident ea ut. Mollit voluptate reprehenderit occaecat bụ nke na-abụghị minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt inciddunt 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>

Iji njirimara data

Ị nwere ike rụọ ọrụ igodo otu ndepụta na-edeghị Javascript ọ bụla site na ịkọwapụta data-toggle="list"ma ọ bụ na mmewere. Jiri njirimara data ndị a na .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>

Site JavaScript

Kwado ihe ndepụta tabbable site na Javascript (ihe ndepụta ọ bụla kwesịrị ịgbalite n'otu n'otu):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Ị nwere ike ịgbalite ihe ndepụta onye ọ bụla n'ụzọ dị iche iche:

$('#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

Mbelata mmetụta

Iji mee ka panel tabs daa, tinye .fadena nke ọ bụla .tab-pane. Iberibe taabụ nke mbụ ga-enwerịrịrịrị .showime ka a hụ ọdịnaya mbụ.

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

Ụzọ

$()tab

Na-eme ka mmewere ihe ndepụta na akpa ọdịnaya rụọ ọrụ. Tab kwesịrị inwe ma ọ data-targetbụ ihe hrefezubere iche maka ọnụ akpa na 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>

.taabụ('show')

Na-ahọpụta ihe ndepụta enyere wee gosi pane metụtara ya. Ihe ndepụta ọ bụla ọzọ ahọpụtara na mbụ na-aghọ nke ahọpụtaghị, yana akụkụ ya jikọtara ya na-ezo. Na-alaghachi na onye na-akpọ oku tupu egosiri pane taabụ (dịka ọmụmaatụ, tupu shown.bs.tabmmemme emee).

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

Ihe omume

Mgbe ị na-egosi taabụ ọhụrụ, mmemme ahụ na-agba ọkụ n'usoro a:

  1. hide.bs.tab(na taabụ na-arụ ọrụ ugbu a)
  2. show.bs.tab(na taabụ a ga-egosi)
  3. hidden.bs.tab(na taabụ arụ ọrụ gara aga, otu maka mmemme hide.bs.tabahụ)
  4. shown.bs.tab(na taabụ egosiri ọhụrụ na-arụ ọrụ, otu maka mmemme show.bs.tabahụ)

Ọ bụrụ na ọ nweghị taabụ na-arụ ọrụ, agaghị agbanyụọ mmemme hide.bs.tabna hidden.bs.tabmmemme ahụ.

Ụdị mmemme Nkọwa
gosi.bs.tab Ihe omume a na-agba ọkụ na ihe ngosi taabụ, mana tupu egosiri taabụ ọhụrụ. Jiri event.targetma event.relatedTargettụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
egosiri.bs.taabụ Ihe omume a na-agba ọkụ na ihe ngosi taabụ ka egosiri taabụ. Jiri event.targetma event.relatedTargettụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
zoo.bs.tab Ihe omume a na-agba ọkụ mgbe a ga-egosi taabụ ọhụrụ (ya mere a ga-ezobe taabụ arụ ọrụ gara aga). Jiri event.targetna event.relatedTargetdobe taabụ na-arụ ọrụ ugbu a yana taabụ ọhụrụ ga-arụ ọrụ n'oge adịghị anya, n'otu n'otu.
zoro ezo.bs.tab Ihe omume a na-agba ọkụ ka egosiri taabụ ọhụrụ (ma yabụ na-ezobe taabụ arụ ọrụ gara aga). Jiri event.targetma event.relatedTargetdobe taabụ nọ n'ọrụ gara aga yana taabụ arụ ọrụ ọhụrụ, n'otu n'otu. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})