in English

Lîsteya koma

Komên navnîşê ji bo nîşandana rêze naverokê pêkhateyek maqûl û hêzdar in. Biguherînin û wan dirêj bikin da ku hema hema her naverokê di hundurê de piştgirî bikin.

Li ser vê rûpelê

Mînaka bingehîn

Koma navnîşê ya herî bingehîn navnîşek nerêkûpêk e ku bi hêmanên navnîşê û çînên rast ve girêdayî ye. Li ser wê bi vebijarkên ku li pey têne çêkirin, an jî li gorî hewcedariyê bi CSS-ya xwe re ava bikin.

An babete
Tiştek duyemîn
Tiştek sêyemîn
Tiştek çaremîn
Û ya pêncemîn

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

Tiştên çalak

Ji .activebo .list-group-itemku hilbijartina çalak a heyî nîşan bide li a-yê zêde bike.

Tiştek çalak
Tiştek duyemîn
Tiştek sêyemîn
Tiştek çaremîn
Û ya pêncemîn

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

Tiştên astengdar

Ji .disabledbo .list-group-itemku ew neçalak xuya bike lê zêde bike. Bala xwe bidinê ku hin hêmanên bi .disabledwan re jî dê JavaScript-a xwerû hewce bike ku bûyerên klîkên wan bi tevahî neçalak bike (mînak, girêdan).

Tiştek astengdar
Tiştek duyemîn
Tiştek sêyemîn
Tiştek çaremîn
Û ya pêncemîn

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

Girêdan û bişkokên

<a>S an <button>s bikar bînin da ku bi lêzêdekirina tomarên komê yên navnîşê yên çalak bi hover, neçalak, û rewşên çalak biafirînin .list-group-item-action. Em van pseudo-polan ji hev vediqetînin da ku komên navnîşê yên ku ji hêmanên ne-înteraktîf (wek <li>s an <div>s) hatine çêkirin, dravdanek klîk an tap peyda nekin.

Bawer bikin ku hûn li vir dersên standard bikar.btn neynin .

Babetê girêdana heyî Tiştek girêdana duyemîn Tiştek girêdana sêyemîn Tiştek girêdana çaremîn Tiştek girêdanek neçalak

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

Bi <button>s re, hûn dikarin li disabledşûna .disabledpolê jî taybetmendiyê bikar bînin. Mixabin, <a>s taybetmendiya neçalak piştgirî nakin.

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

Flush

Zêde .list-group-flushbikin ku hin tixûb û quncikên girover werin rakirin da ku navnîşên tomarên komê yên di konteynirek dêûbav de ji qerax-bi-qev re werin pêşkêş kirin (mînak, kart).

An babete
Tiştek duyemîn
Tiştek sêyemîn
Tiştek çaremîn
Û ya pêncemîn

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

Jimarkirî

.list-group-numberedÇîna guhêrbar lê zêde bikin (û vebijarkî hêmanek bikar bînin ) <ol>da ku hûn di navnîşên koma navnîşa hejmarkirî de hilbijêrin. Ji bo cîhkirina çêtir di hundurê hêmanên koma navnîşê de jimar bi CSS-ê têne çêkirin (berevajî <ol>şêwaza geroka xwerû ya s) û ji bo xwerûkirina çêtir destûr bide.

Hejmar ji hêla counter-resetser ve têne çêkirin <ol>, û paşê têne şêwaz kirin û bi ::beforepseudo-hêmanek li ser <li>bi counter-incrementû ve têne danîn content.

Cras justo odio
Cras justo odio
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>

Vana bi naveroka xwerû re jî baş dixebitin.

Subheading
Cras justo odio
14
Subheading
Cras justo odio
14
Subheading
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>

Asumane

Zêde .list-group-horizontalbikin ku sêwirana tomarên komê yên navnîşê ji vertîkal berbi horizontî li ser hemî xalên veqetandinê biguhezînin. Alternatîf, guhertoyek bersivdar hilbijêrin .list-group-horizontal-{sm|md|lg|xl|xxl}da ku komek navnîşek horizontî ya ku ji wê xala veqetînê dest pê dike çêbike min-width. Heya nuha komên navnîşên horizontî bi komên navnîşa rijandin re nayên hev kirin.

ProTip: Dema ku horizontî ye, hûn tiştên komê yên navnîşa wekhev-fireh dixwazin? Li .flex-fillher lîsteya grûpê zêde bikin.

An babete
Tiştek duyemîn
Tiştek sêyemîn

An babete
Tiştek duyemîn
Tiştek sêyemîn

An babete
Tiştek duyemîn
Tiştek sêyemîn

An babete
Tiştek duyemîn
Tiştek sêyemîn

An babete
Tiştek duyemîn
Tiştek sêyemîn

An babete
Tiştek duyemîn
Tiştek sêyemîn

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

Dersên hevoksaziyê

Dersên kontekstê bikar bînin da ku navnîşên navnîşên bi paşxane û rengek dewletparêz şêwaz bikin.

Tiştek koma navnîşa xwerû ya hêsan
Tiştek koma navnîşa bingehîn a hêsan
Tiştek koma navnîşa navîn a hêsan
Tiştek komê ya navnîşa serfiraziya hêsan
Tiştek koma lîsteya xeterê ya hêsan
Tiştek koma navnîşa hişyariya hêsan
Tiştek koma navnîşa agahdariya hêsan
Tiştek koma navnîşa ronahiyê ya hêsan
Tiştek koma navnîşa tarî ya hêsan

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

Dersên kontekstual jî bi kar dikin .list-group-item-action. Bala xwe bidin lêzêdekirina şêwazên hover ku li vir di mînaka berê de nîn in. Her wiha .activedewlet jî piştgirî dike; wê bicîh bikin da ku hilbijartinek çalak li ser babetek komek navnîşê ya kontekstî nîşan bide.

Tiştek koma navnîşa xwerû ya hêsan Tiştek koma navnîşa bingehîn a hêsan Tiştek koma navnîşa navîn a hêsan Tiştek komê ya navnîşa serfiraziya hêsan Tiştek koma lîsteya xeterê ya hêsan Tiştek koma navnîşa hişyariya hêsan Tiştek koma navnîşa agahdariya hêsan Tiştek koma navnîşa ronahiyê ya hêsan Tiştek koma navnîşa tarî ya hêsan

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

Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .visually-hiddenpolê re veşartî ye.

Bi nîşanan

Nîşanan li her tomarek koma navnîşê zêde bikin da ku bi alîkariya hin karûbaran hejmarên nexwendî, çalakî û hêj bêtir nîşan bidin .

Tiştek lîsteyê14
Tiştek lîsteya duyemîn2
Tiştek lîsteya sêyemîn1

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

naveroka Custom

Nêzîkî her HTML-ê di hundurê de zêde bikin, tewra ji bo komên navnîşê yên girêdayî mîna ya jêrîn, bi alîkariya karûbarên flexbox .

Lîsteya sernavê komê

3 roj berê

Di paragrafekê de hin naveroka cîhgiran.

Û hinek çapek piçûk.

Lîsteya sernavê komê

3 roj berê

Di paragrafekê de hin naveroka cîhgiran.

Û hinek çapa piçûk bêdeng kirin.

Lîsteya sernavê komê

3 roj berê

Di paragrafekê de hin naveroka cîhgiran.

Û hinek çapa piçûk bêdeng kirin.

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

Checkboxes û radyo

Qutikên kontrolê û radyoyên Bootstrap di nav tomarên koma navnîşê de bi cîh bikin û li gorî hewcedariyê xweş bikin. Hûn dikarin wan bêyî <label>s bikar bînin, lê ji kerema xwe ji bîr mekin ku aria-labeltaybetmendiyek û nirxek ji bo gihîştinê têxin nav xwe.

Yekem qutiya kontrolê
Qutiya duyemîn
Qutiya kontrolê ya sêyemîn
Qutiya kontrolê ya çaremîn
Qutiya kontrolê ya pêncemîn

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

Û heke hûn ji bo deverên lêdan ên mezin dixwazin <label>s .list-group-item, hûn dikarin wiya jî bikin.

Yekem qutiya kontrolê Qutiya duyemîn Qutiya kontrolê ya sêyemîn Qutiya kontrolê ya çaremîn Qutiya kontrolê ya pêncemîn

<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

Variables

$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

Bi hev re tê bikar anîn da ku çînên cûrbecûr yên ji bo s -yê $theme-colorsçêbike ..list-group-item

@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;
      }
    }
  }
}

Loop

Loopa ku bi list-group-item-variant()mixin re çînên guhêrbar çêdike.

// 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);
}

tevgera JavaScript

Pêveka JavaScript-a tabê bikar bînin - wê bi serê xwe an bi bootstrap.jspelê berhevkirî ve têxin nav xwe - da ku koma navnîşa me dirêj bike da ku pelên tabloyên naveroka herêmî biafirîne.

Xane Tengal Messages Settings

Hin naverokên cîhê di paragrafek bi "Mal" re têkildar in. Û hin naverokên din, ku li vir têne bikar anîn tenê ji bo derxistin û dagirtina vê panelê tabloyê. Di hilberînê de, hûn ê eşkere li vir naveroka rastînek bêtir hebe. Û ne tenê nivîs. Ew dikare her tişt be, bi rastî. Nivîs, wêne, form.

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>

Taybetmendiyên daneyê bikar tînin

Hûn dikarin navîgasyonek koma navnîşê bêyî nivîsandina JavaScript-ê bi tenê diyar data-bs-toggle="list"kirin an li ser hêmanek çalak bikin. Van taybetmendiyên daneyê li ser bikar bînin .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>

Bi JavaScript

Bi JavaScript-ê xala navnîşa tabloyê çalak bike (pêdivî ye ku her tomarek lîsteyê ferdî were çalak kirin):

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()
  })
})

Hûn dikarin bi çend awayan tomarek navnîşê ya kesane çalak bikin:

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

Bandora fade

Ji bo ku panela tabloyan bişewitînin, li her yekê zêde .fadebikin .tab-pane. Pêdivî ye ku tabloya yekem jî pêdivî .showye ku naveroka destpêkê xuya bike.

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

Methods

constructor

Hêmanek tomar û naverokê ya navnîşê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-bs-targetan jî armancek hebe.href

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

rêdan

Tişta navnîşê ya diyarkirî hildibijêre û paceya têkildar nîşan dide. Tiştek din a navnîşê ya ku berê hatî hilbijartin, nehilbijartî dibe û pencereya wê ya têkildar tê veşartin. Berî ku tabloya tabloyê bi rastî were xuyang kirin vedigere bangkerê (mînak, berî ku shown.bs.tabbûyer çêbibe).

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

  tab.show()

avêtin

Tabloya hêmanekê hilweşîne.

getInstance

Rêbaza statîkî ya ku dihêle hûn tabloya ku bi hêmanek DOM-ê ve girêdayî ye bistînin

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

getOrCreateInstance

Rêbaza statîkî ya ku dihêle hûn mînaka tabê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an ger ku ew nehatibe destpêkirin yek nû biafirînin.

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

Events

Dema ku tabloyek nû nîşan dide, bûyer bi rêza jêrîn dişewitin:

hide.bs.tab(li ser tabloya çalak a heyî)
show.bs.tab(li ser tabloya ku tê xuyang kirin)
hidden.bs.tab(li ser tabloya çalak a berê, heman wekî hide.bs.tabbûyerê)
shown.bs.tab(li ser tabloya ku nû-çalak hatî xuyang kirin, heman wekî show.bs.tabbûyerê)

Ger tu tablo jixwe çalak nebûya, hide.bs.tabû hidden.bs.tabbûyer nayên avêtin.

Cureyê bûyerê	Terîf
`show.bs.tab`	Ev bûyer di pêşandana tabloyê de dişewite, lê berî ku tabloya nû were xuyang kirin. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin `event.target`û bikin hedef.`event.relatedTarget`
`shown.bs.tab`	Ev bûyer piştî ku tabloyek hate pêşandan li ser pêşandana tabê derdikeve. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin `event.target`û bikin hedef.`event.relatedTarget`
`hide.bs.tab`	Dema ku tabloyek nû were xuyang kirin ev bûyer dişewite (û bi vî rengî tabloya çalak a berê were veşartin). Bi rêzê ve tabloya aktîf a heyî û tabloya nû ya zû-çalak bibe `event.target`û armanc bikin.`event.relatedTarget`
`hidden.bs.tab`	Ev bûyer piştî ku tabloyek nû tê xuyang kirin dişewite (û bi vî rengî tabloya çalak a berê tê veşartin). Bi rêzê ve tabloya çalak a berê û tabloya nû ya çalak bikar bînin `event.target`û bikin hedef.`event.relatedTarget`

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