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

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

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.

Tiştek lîsteyê
Tiştek lîsteyê
Tiştek lîsteyê

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>

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

Subheading
Naveroka ji bo lîsteya lîsteya
14
Subheading
Naveroka ji bo lîsteya lîsteya
14
Subheading
Naveroka ji bo lîsteya lîsteya
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>

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

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

Radyoya yekem
Radyoya duyemîn
Radyoya sêyemîn

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>

Hûn dikarin .stretched-linkli ser <label>s-ê bikar bînin da ku tevahiya navnîşa komê bikirtînin.

Yekem qutiya kontrolê
Qutiya duyemîn
Qutiya kontrolê ya sêyemîn

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

Variables

Di v5.2.0 de hate zêdekirin

Wekî beşek ji nêzikbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, komên navnîşê naha guhêrbarên CSS-ê yên herêmî li ser .list-groupji bo xwerûkirina rast-a-dema pêşkeftî bikar tînin. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

  --#{$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};

Guherbarên Sass

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

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

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

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

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

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

Rêbaz û veguherînên Asynchronous

Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêre .

Naveroka we wekî hêmanek tabê çalak dike.

Hûn dikarin bi çêker re mînakek tabê biafirînin, mînakî:

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

Awa	Terîf
`dispose`	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, hûn dikarin wê bi vî rengî bikar bînin: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Rêbaza statîkî ya ku tabloyek ku bi hêmanek DOM-ê ve girêdayî vegere vedigerîne an heke ew nehatibe destpêkirin yek nû diafirîne. Hûn dikarin wê bi vî rengî bikar bînin `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Tabloya diyarkirî hildibijêre û panela wê ya têkildar nîşan dide. Her tabloyek din a ku berê hatibû hilbijartin, nehilbijartî dibe û pencereya wê ya têkildar tê veşartin. Berî ku tablo bi rastî were xuyang kirin (ango berî ku `shown.bs.tab`bûyer çêbibe) vedigere bangewazî.

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, wê hingê hide.bs.tabû hidden.bs.tabbûyer nayên avêtin.

Cureyê bûyerê	Terîf
`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`
`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`

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