Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
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.

A wannan shafi

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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">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 daga gefe zuwa-bashi 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>

An ƙidaya

Ƙara .list-group-numberedajin gyare-gyare (kuma zaɓin yi amfani da wani <ol>kashi) don shiga cikin abubuwan ƙungiyar masu ƙididdigewa. Ana ƙirƙira lambobi ta hanyar CSS ( <ol>saɓanin salo na tsoho na burauza) don mafi kyawun jeri a cikin abubuwan rukunin rukuni kuma don ba da izini don ingantaccen keɓancewa.

Ana samar da lambobi ta counter-resetkan <ol>, sa'an nan kuma an tsara su kuma a sanya su tare da wani ::beforeabu mai ƙima akan <li>tare counter-incrementda da content.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Waɗannan suna aiki da kyau tare da abun ciki na al'ada kuma.

  1. Babban taken
    Cras justo odio
    14
  2. Babban taken
    Cras justo odio
    14
  3. Babban taken
    Cras justo odio
    14 
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

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

  • 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
  • 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>
<ul class="list-group list-group-horizontal-xxl">
  <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 na tsoho mai sauƙi
  • 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 na tsoho mai sauƙi 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 .visually-hiddenajin.

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 bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-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" aria-current="true">
    <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>

Akwatunan rajista da rediyo

Sanya akwatunan rajistan Bootstrap da rediyo a cikin jerin abubuwan rukuni kuma keɓance yadda ake buƙata. Kuna iya amfani da su ba tare <label>da s ba, amma da fatan za a tuna haɗa da aria-labelsifa da ƙima don samun dama.

  • Akwatin rajistan farko
  • Akwatin rajista na biyu
  • Akwati na uku
  • Akwati na hudu
  • Akwati na biyar
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Kuma idan kuna son <label>s a matsayin .list-group-itemmanyan wuraren da aka buga, zaku iya yin hakan, kuma.

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Masu canji

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins

An yi amfani da shi a haɗe tare $theme-colorsda samar da azuzuwan bambance-bambancen mahallin don .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Madauki

Madauki wanda ke haifar da azuzuwan gyare-gyare tare da list-group-item-variant()mahaɗin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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

constructor

Yana kunna abun jeri da kwandon abun ciki. Tab ya kamata ya kasance yana da ko dai data-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-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>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

nuna

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

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

jefar

Yana lalata shafin wani abu.

samunInstance

Hanyar a tsaye wacce ke ba ka damar samun misalin shafin da ke da alaƙa da abin DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

samunOrCreateInstance

Hanyar a tsaye wacce ke ba ku damar samun misalin shafin da ke da alaƙa da ɓangaren DOM, ko ƙirƙirar sabo idan ba a fara shi ba.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

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
show.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.
shown.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.
hide.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.
hidden.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. 
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}