in English

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.

  • Wani abu
  • Abu na biyu
  • Abu na uku
  • Abu na hudu
  • Kuma na biyar
<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>

Abubuwa masu aiki

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

  • Abu mai aiki
  • Abu na biyu
  • Abu na uku
  • Abu na hudu
  • Kuma na biyar
<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>

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

  • Abu naƙasasshe
  • Abu na biyu
  • Abu na uku
  • Abu na hudu
  • Kuma na biyar
<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>

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 .

Abun haɗin kai na yanzu Abu na biyu na haɗin gwiwa Abu na uku na haɗin gwiwa Abu na huɗu na haɗin gwiwa Abun haɗin da aka kashe 
<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>

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

Fitowa

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

  • Wani abu
  • Abu na biyu
  • Abu na uku
  • Abu na hudu
  • Kuma na biyar
<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>

A kwance

Ƙara .list-group-horizontaldon canza shimfidar jeri na 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 yin jerin jerin rukunin a kwance farawa daga wurin hutu 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.

  • Wani abu
  • Abu na biyu
  • Abu na uku
  • Wani abu
  • Abu na biyu
  • Abu na uku
  • Wani abu
  • Abu na biyu
  • Abu na uku
  • Wani abu
  • Abu na biyu
  • Abu na uku
  • Wani abu
  • Abu na biyu
  • Abu na uku
<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>

Azuzuwan yanayi

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

  • Abun rukuni mai sauƙi na tsoho
  • 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">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>

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.

Abun rukuni mai sauƙi na tsoho 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">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>
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 .

  • Abun jeri14
  • Abu na biyu jeri2
  • Abu na uku na jeri1 
<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>

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

Wasu abun ciki mai riƙe da wuri a cikin sakin layi.

Kuma wasu ƙananan bugu.
Jerin abubuwan rukuni na rukuni
Kwanaki 3 da suka gabata

Wasu abun ciki mai riƙe da wuri a cikin sakin layi.

Wasu kuma sun yi shiru.
Jerin abubuwan rukuni na rukuni
Kwanaki 3 da suka gabata

Wasu abun ciki mai riƙe da wuri a cikin sakin layi.

Wasu kuma sun yi shiru. 
<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>

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.

Wasu abun ciki mai riƙe da wuri a cikin sakin layi mai alaƙa da "Gida". Kuma wasu ƙarin abun ciki, ana amfani da su anan kawai don fitar da cika wannan rukunin shafin. A cikin samarwa, tabbas za ku sami ƙarin ainihin abun ciki anan. Kuma ba kawai rubutu ba. Yana iya zama wani abu, da gaske. Rubutu, hotuna, siffofi.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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 tantancewa kawai data-toggle="list"ko akan wani abu. Yi amfani da waɗannan halayen bayanan akan .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>

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 (event) {
  event.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 mai aiki 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 mai aiki 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 (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})