Source

Jerin rukuni

Ƙungiyoyin jeri sassa ne masu sassauƙa da ƙarfi don nuna jerin abubuwan ciki. Gyara kuma ƙara su don tallafawa kusan kowane abun ciki a ciki.

Misali na asali

Ƙungiya mafi mahimmanci shine jerin da ba a ba da oda ba tare da abubuwan jeri da kuma azuzuwan da suka dace. Gina shi tare da zaɓuɓɓukan da suka biyo baya, ko tare da CSS ɗin ku kamar yadda ake buƙata.

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

Abubuwa masu aiki

Ƙara .activezuwa .list-group-itemdon nuna zaɓin aiki na yanzu.

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

Abubuwan da aka kashe

Ƙara .disabledzuwa .list-group-itemdon ganin an kashe shi . Lura cewa wasu abubuwa tare da .disabledsu kuma za su buƙaci JavaScript na al'ada don musaki cikakken abubuwan latsa su (misali, hanyoyin haɗin gwiwa).

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

Yi amfani <a>da s ko <button>s don ƙirƙirar abubuwan ƙungiyar masu aiki tare da matsawa, naƙasasshe, da jihohi masu aiki ta ƙara .list-group-item-action. Mun ware waɗannan azuzuwan-zurfin don tabbatar da jerin ƙungiyoyin da aka yi daga abubuwan da ba su da alaƙa (kamar <li>s ko <div>s) ba su ba da damar dannawa ko taɓawa ba.

Tabbatar kada kuyi amfani da daidaitattun .btnazuzuwan nan .

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

Tare da <button>s, zaku iya amfani da disabledsifa maimakon .disabledaji. Abin baƙin ciki, <a>s ba sa goyan bayan sifa na naƙasassu.

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

Fitowa

Ƙara .list-group-flushdon cire wasu iyakoki da sasanninta masu zagaye don sanya jerin abubuwan rukuni daga gefe zuwa-bashi a cikin akwati na iyaye (misali, katunan).

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

A kwance

Ƙara .list-group-horizontaldon canza shimfidar jerin abubuwan ƙungiyar daga tsaye zuwa kwance a duk wuraren karya. A madadin, zaɓi bambance-bambancen amsawa .list-group-horizontal-{sm|md|lg|xl}don sanya jerin rukuni a kwance farawa daga wurin hutun min-width. A halin yanzu ƙungiyoyin jeri a kwance ba za a iya haɗa su da ƙungiyoyin jeri ba.

ProTip: Kuna son abubuwan rukuni masu faɗi daidai lokacin da a kwance? Ƙara .flex-fillzuwa kowane abu rukuni na jeri.

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

Azuzuwan yanayi

Yi amfani da azuzuwan mahallin don salon jerin abubuwa tare da kyakkyawan yanayi da launi.

  • Dapibus ac facilisis in
  • Abun rukuni mai sauƙi na farko
  • Abun rukuni mai sauƙi na sakandare
  • Abun rukuni mai sauƙi na nasara
  • Abun rukuni mai sauƙi na jerin haɗari
  • Abun rukuni mai sauƙi na faɗakarwa
  • Abun rukuni mai sauƙi na jerin bayanai
  • Abun jerin haske mai sauƙi
  • Abun rukuni mai sauƙi mai duhu
<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>

Hakanan azuzuwan yanayi suna aiki tare da .list-group-item-action. Lura da ƙari na salon shawagi anan ba a cikin misalin da ya gabata. Har ila yau ana tallafawa ita ce .activejihar; yi amfani da shi don nuna zaɓi mai aiki akan abun rukunin mahallin mahallin.

Dapibus ac facilisis in Abun rukuni mai sauƙi na farko Abun rukuni mai sauƙi na sakandare Abun rukuni mai sauƙi na nasara Abun rukuni mai sauƙi na jerin haɗari Abun rukuni mai sauƙi na faɗakarwa Abun rukuni mai sauƙi na jerin bayanai Abun jerin haske mai sauƙi Abun rukuni mai sauƙi mai duhu 
<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>
Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .sr-onlyajin.

Tare da baji

Ƙara bajoji zuwa kowane abu na rukuni don nuna ƙididdiga marasa karantawa, ayyuka, da ƙari tare da taimakon wasu kayan aiki .

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

Abun ciki na al'ada

Ƙara kusan kowane HTML a ciki, har ma don ƙungiyoyin jeri masu alaƙa kamar wanda ke ƙasa, tare da taimakon kayan aikin flexbox .

Jerin abubuwan rukuni na rukuni
Kwanaki 3 da suka gabata

Donec id un mi porta gravida a eget metus. Maecenas sed diam eget risus varius blandit.

Donec id un mi porta.
Jerin abubuwan rukuni na rukuni
Kwanaki 3 da suka gabata

Donec id un mi porta gravida a eget metus. Maecenas sed diam eget risus varius blandit.

Donec id un mi porta.
Jerin abubuwan rukuni na rukuni
Kwanaki 3 da suka gabata

Donec id un mi porta gravida a eget metus. Maecenas sed diam eget risus varius blandit.

Donec id un 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>

Halin JavaScript

Yi amfani da shafin JavaScript plugin-haɗa shi ɗaiɗaiku ko ta hanyar bootstrap.jsfayil ɗin da aka haɗe-don tsawaita rukunin jerin mu don ƙirƙirar fakitin abun ciki na gida.

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 ko kadan lokaci sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididdunt 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>

Amfani da bayanan halayen

Kuna iya kunna jerin kewayawa na rukuni ba tare da rubuta kowane JavaScript ba ta hanyar ƙididdigewa kawai data-toggle="list"ko akan wani abu. Yi amfani da waɗannan halayen bayanan akan .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>

Ta hanyar JavaScript

Kunna jerin abubuwan da za a iya amfani da su ta hanyar JavaScript (kowane abu na lissafin yana buƙatar kunna shi daban):

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

Kuna iya kunna abin jeri ɗaya ta hanyoyi da yawa:

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

Don sanya rukunin shafuka su shuɗe, ƙara .fadezuwa kowane .tab-pane. Rukunin shafin farko kuma dole ne ya .showsanya abun cikin farko a bayyane.

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

Hanyoyin

$().taba

Yana kunna abun jeri da kwandon abun ciki. Tab ya kamata ya kasance yana da ko dai data-targetko wani hrefkumburin kwantena mai niyya a cikin 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('show')

Yana zaɓar abin lissafin da aka bayar kuma yana nuna aikin haɗin gwiwa. Duk wani jerin abubuwan da aka zaɓa a baya ya zama ba zaɓaɓɓu ba kuma ana ɓoye abin da ke tattare da shi. Komawa ga mai kira kafin a nuna ainihin ɓangaren shafin (misali, kafin shown.bs.tababin ya faru).

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

Abubuwan da suka faru

Lokacin nuna sabon shafin, abubuwan da suka faru sun yi wuta a cikin tsari mai zuwa:

  1. hide.bs.tab(a kan shafin mai aiki na yanzu)
  2. show.bs.tab(a kan shafin da za a nuna)
  3. hidden.bs.tab(akan shafin da ya gabata mai aiki, iri ɗaya da na hide.bs.tabtaron)
  4. shown.bs.tab(akan sabon shafin da aka nuna, iri ɗaya da na show.bs.tabtaron)

Idan babu shafin da ya riga ya fara aiki, ba za a kori abubuwan hide.bs.tabda abubuwan da suka faru ba.hidden.bs.tab

Nau'in taron Bayani
nuna.bs.tab Wannan taron yana gobara akan nunin shafin, amma kafin a nuna sabon shafin. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin da ya gabata (idan akwai) bi da bi.
nuna.bs.tab Wannan taron yana gobara akan nunin shafin bayan an nuna shafin. Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki da shafin da ya gabata (idan akwai) bi da bi.
boye.bs.tab Wannan taron yana kunna wuta lokacin da za a nuna sabon shafin (don haka za a ɓoye shafin da ya gabata). Yi amfani event.targetda event.relatedTargetniyya shafi mai aiki na yanzu da sabon shafin da za a yi aiki nan ba da jimawa ba, bi da bi.
boye.bs.tab Wannan taron yana gobara bayan an nuna sabon shafin (saboda haka shafin da ya gabata yana ɓoye). Yi amfani event.targetda event.relatedTargetniyya shafi na baya mai aiki da sabon shafin mai aiki, bi da bi. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})