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

html

<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

html

<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

html

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

Hanyoyin haɗi da maɓalli

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

html

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

html

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

html

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

Abun jeri
Abun jeri
Abun jeri

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

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

Babban taken
Abun ciki don jerin abubuwan
14
Babban taken
Abun ciki don jerin abubuwan
14
Babban taken
Abun ciki don jerin abubuwan
14

html

<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>
      Content for list item
    </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>
      Content for list item
    </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>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

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

Wani abu
Abu na biyu
Abu na uku

html

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

html

<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

html

<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

html

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

html

<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

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Radiyo na farko
Rediyo na biyu
Rediyo na uku

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Kuna iya amfani .stretched-linkda <label>s don sanya duk jerin abubuwan rukunin rukunin za su danna.

Akwatin rajistan farko
Akwatin rajista na biyu
Akwati na uku

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, ƙungiyoyin jeri yanzu suna amfani da masu canjin CSS na gida .list-groupdon haɓaka gyare-gyaren ainihin lokaci. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

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.

Gida Bayanan martaba Saƙonni Saituna

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 tantancewa 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):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

const 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

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

Yana kunna abun cikin ku azaman ɓangaren shafi.

Kuna iya ƙirƙirar misalin shafi tare da mai gini, misali:

const bsTab = new bootstrap.Tab('#myTab')

Hanya	Bayani
`dispose`	Yana lalata shafin wani abu.
`getInstance`	Hanyar a tsaye wacce ke ba ku damar samun misalin shafin da ke da alaƙa da nau'in DOM, zaku iya amfani da shi kamar haka: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Hanya madaidaiciya wacce ke dawo da misalin shafin da ke da alaƙa da abun DOM ko ƙirƙirar sabo idan ba a fara shi ba. Kuna iya amfani da shi kamar haka `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Yana zaɓar shafin da aka bayar kuma yana nuna aikin haɗin gwiwa. Duk wani shafin da aka zaɓa a baya ya zama ba a zaɓa ba kuma ana ɓoye abin da ke tattare da shi. Komawa ga mai kira kafin a nuna ainihin ɓangaren shafin (watau kafin `shown.bs.tab`abin ya faru).

Abubuwan da suka faru

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

hide.bs.tab(a kan shafin mai aiki na yanzu)
show.bs.tab(a kan shafin da za a nuna)
hidden.bs.tab(akan shafin da ya gabata mai aiki, iri ɗaya da na hide.bs.tabtaron)
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, to ba za a kori abubuwan hide.bs.tabda abubuwan da suka faru ba.hidden.bs.tab

Nau'in taron	Bayani
`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.target`da `event.relatedTarget`niyya 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.target`da `event.relatedTarget`niyya shafi na baya mai aiki da sabon shafin mai aiki, bi da bi.
`show.bs.tab`	Wannan taron yana gobara akan nunin shafin, amma kafin a nuna sabon shafin. Yi amfani `event.target`da `event.relatedTarget`niyya shafi mai aiki da shafin mai aiki 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.target`da `event.relatedTarget`niyya shafi mai aiki da shafin mai aiki da ya gabata (idan akwai) bi da bi.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})