Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
in English

Nxaxamelo wa ntlawa

Mintlawa ya nxaxamelo i xiphemu lexi cinca-cincaka ni lexi nga ni matimba xo kombisa nxaxamelo wa swilo leswi nga endzeni. Cinca no swi andlala ku seketela ntsena kwalomu ka nhundzu yihi na yihi endzeni.

Eka tluka leri

Xikombiso xa xisekelo

Ntlawa wa nxaxamelo wa xisekelo swinene i nxaxamelo lowu nga hlelekangiki lowu nga ni swilo swa nxaxamelo ni titlilasi leti faneleke. Aka ehenhla ka yona hi swihlawulekisi leswi landzelaka, kumbe hi CSS ya wena tanihilaha swi lavekaka hakona.

  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
  • Nchumu wa vumune
  • Na wa vuntlhanu
<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>

Swilo leswi tirhaka

Engetela .activeeka a .list-group-itemku kombisa nhlawulo lowu tirhaka wa sweswi.

  • Nchumu lowu tirhaka
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<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>

Swilo leswi lamaleke

Engetelani .disabledeka a .list-group-itemku endla leswaku yi vonaka yi nga tirhi. Xiya leswaku swiaki swin’wana leswi nga na .disabledswi ta tlhela swi lava JavaScript ya ntolovelo ku tshikisa hi ku helela swiendlakalo swa swona swa ku tsindziyela (xikombiso, swihlanganisi).

  • Nchumu lowu lamaleke
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<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>

Tirhisa <a>s kumbe <button>s ku tumbuluxa swilo swa ntlawa wa nxaxamelo lowu nga endliwaka.list-group-item-action hi ku hover, disabled, na swiyimo leswi tirhaka hi ku engetela . Hi hambanyisa titlilasi leti ta vuxisi ku tiyisisa leswaku mintlawa ya nxaxamelo leyi endliweke hi swiaki leswi nga tirhisiki (ku fana na <li>s kumbe <div>s) a yi nyiki ku tikhoma kumbe ku pompa affordance.

Tiyiseka leswaku a wu tirhisi .btntitlilasi ta ntolovelo laha .

Nchumu wa sweswi wa xihlanganisi Nchumu wa vumbirhi wa xihlanganisi Nchumu wa vunharhu wa xihlanganisi Nchumu wa vumune wa xihlanganisi Nchumu wa xihlanganisi lowu nga tirhiki 
<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>

Hi <button>s, u nga ha tlhela u tirhisa disabledxihlawulekisi ematshan’wini ya .disabledtlilasi. Lexi twisaka ku vava, <a>s a yi seketeli xihlawulekisi lexi lamaleke.

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

Hlantswa

Engetela .list-group-flushku susa mindzilakano yin’wana na tikhoneni leti rhendzelekaka ku humesa swilo swa ntlawa wa nxaxamelo ku ya eka tlhelo eka xigwitsirisi xa mutswari (xikombiso, makhadi).

  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
  • Nchumu wa vumune
  • Na wa vuntlhanu
<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>

Ku nomboriwile

Engetelani .list-group-numberedtlilasi ya mucinci (naswona hi ku hlawula tirhisa <ol>elemente) ku hlawula eka swilo swa ntlawa wa nxaxamelo lowu nga na tinomboro. Tinhlayo ti endliwa hi ku tirhisa CSS (ku hambana na <ol>xitayili xa xihlamusela-marito xa ntolovelo) ku veka ku antswa endzeni ka swilo swa ntlawa wa nxaxamelo na ku pfumelela ku cinca ko antswa.

Tinhlayo ti endliwa hi counter-reseteka <ol>, ivi ti endliwa xitayili no vekiwa hi ::beforepseudo-element eka <li>with counter-incrementna content.

  1. Cras ntsena odio
  2. Cras ntsena odio
  3. Cras ntsena 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>

Leswi swi tirha swinene na nhundzu ya ntolovelo na swona.

  1. Nhlokomhaka-ntsongo
    Cras ntsena odio
    14.
  2. Nhlokomhaka-ntsongo
    Cras ntsena odio
    14.
  3. Nhlokomhaka-ntsongo
    Cras ntsena 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>

Ololoka

Engetela .list-group-horizontalku cinca layout ya swilo swa ntlawa wa nxaxamelo ku suka eka vertical ku ya eka horizontal ku tsemakanya tindhawu hinkwato to wisa. Handle ka sweswo, hlawula muxaka lowu hlamulaka .list-group-horizontal-{sm|md|lg|xl|xxl}ku endla ntlawa wa nxaxamelo wu va lowu nga etlhelo ku sukela eka ndhawu yoleyo yo wisa ya min-width. Sweswi mintlawa ya nxaxamelo wa horizontal a yi nge hlanganisiwi na mintlawa ya nxaxamelo wa flush.

ProTip: U lava swilo swa ntlawa wa nxaxamelo wa ku anama loku ringanaka loko swi ri horizontal? Engetela .flex-filleka nchumu wun’wana ni wun’wana wa ntlawa wa nxaxamelo.

  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
<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>

Titlilasi ta mongo

Tirhisa titlilasi ta mongo ku xitayili xa nxaxamelo wa swilo leswi nga na xivumbeko xa le ndzhaku na muvala.

  • Nchumu wo olova wa ntlawa wa nxaxamelo wa xiviri
  • Nchumu wo olova wa ntlawa wa nxaxamelo wa le henhla
  • Nchumu wo olova wa ntlawa wa nxaxamelo wa vumbirhi
  • Nchumu wo olova wa ntlawa wa nxaxamelo wa ku humelela
  • Nchumu wo olova wa ntlawa wa nxaxamelo wa makhombo
  • Nchumu wo olova wa ntlawa wa nxaxamelo wa switsundzuxo
  • Nchumu wo olova wa ntlawa wa nxaxamelo wa info
  • Nchumu wo olova wa ntlawa wa nxaxamelo wa ku vonakala
  • Nchumu wo olova wa ntlawa wa nxaxamelo wa munyama
<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>

Titlilasi ta mongo na tona ti tirha na .list-group-item-action. Xiya ku engeteriwa ka switayele swa hover laha leswi nga riki kona eka xikombiso lexi hundzeke. Nakambe ku seketeriwa .activemfumo; yi tirhise ku kombisa nhlawulo lowu tirhaka eka nchumu wa ntlawa wa nxaxamelo wa mongo.

Nchumu wo olova wa ntlawa wa nxaxamelo wa xiviri Nchumu wo olova wa ntlawa wa nxaxamelo wa le henhla Nchumu wo olova wa ntlawa wa nxaxamelo wa vumbirhi Nchumu wo olova wa ntlawa wa nxaxamelo wa ku humelela Nchumu wo olova wa ntlawa wa nxaxamelo wa makhombo Nchumu wo olova wa ntlawa wa nxaxamelo wa switsundzuxo Nchumu wo olova wa ntlawa wa nxaxamelo wa info Nchumu wo olova wa ntlawa wa nxaxamelo wa ku vonakala Nchumu wo olova wa ntlawa wa nxaxamelo wa munyama 
<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>
Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hiddentlilasi.

Hi tibeji

Engetelani tibeji eka nchumu wihi na wihi wa ntlawa wa nxaxamelo ku kombisa tinhlayo leti nga hlayiwangiki, ntirho ni swin’wana hi ku pfuniwa hi switirhisiwa swin’wana .

  • Nchumu wa nxaxamelo14.
  • Nchumu wa vumbirhi wa nxaxamelo2.
  • Nchumu wa vunharhu wa nxaxamelo1. 
<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>

Swilo leswi nga endzeni ka ntolovelo

Engetelani kwalomu ka HTML yihi na yihi endzeni, hambi ku ri eka mintlawa ya nxaxamelo lowu hlanganisiweke ku fana ni leyi nga laha hansi, hi ku pfuniwa hi switirhisiwa swa flexbox .

Xaxameta nhlokomhaka ya nchumu wa ntlawa
3 wa masiku lama hundzeke

Nhundzu yin’wana ya swikhomela-ndhawu eka ndzimana.

Naswona matsalelo man’wana lamatsongo.
Xaxameta nhlokomhaka ya nchumu wa ntlawa
3 wa masiku lama hundzeke

Nhundzu yin’wana ya swikhomela-ndhawu eka ndzimana.

Naswona tin’wana ti pfale matsalelo lamatsongo.
Xaxameta nhlokomhaka ya nchumu wa ntlawa
3 wa masiku lama hundzeke

Nhundzu yin’wana ya swikhomela-ndhawu eka ndzimana.

Naswona tin’wana ti pfale matsalelo lamatsongo. 
<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>

Mabokisi yo kambela ni swiya-ni-moya

Veka mabokisi yo kambela ya Bootstrap na swiya-ni-moya endzeni ka swilo swa ntlawa wa nxaxamelo ivi u swi endla hi ku landza swilaveko. U nga ti tirhisa handle ka <label>s, kambe hi kombela u tsundzuka ku katsa aria-labelxihlawulekisi na nkoka wa ku fikelela.

  • Bokisi ro sungula ro kambela
  • Bokisi ra vumbirhi ro kambela
  • Bokisi ra vunharhu ro kambela
  • Bokisi ra vumune ro kambela
  • Bokisi ra vuntlhanu ro kambela
<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>

Nakona loko u lava <label>s tani hi .list-group-itemfor large hit areas, u nga endla sweswo, na wena.

<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

Swilo leswi cinca-cincaka

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

Ti- mixins

Yi tirhisiwa hi ku hlanganisiwa na $theme-colorsku tumbuluxa titlilasi ta ku hambana ka xiyimo xa .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;
      }
    }
  }
}

Xintambyana

Loop leyi humesaka titlilasi ta modifier na list-group-item-variant()mixin.

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

Mahanyelo ya JavaScript

Tirhisa thebhu ya JavaScript plugin—yi katsa hi yoxe kumbe hi ku tirhisa bootstrap.jsfayili leyi hlengeletiweke—ku ndlandlamuxa ntlawa wa hina wa nxaxamelo ku endla tipheji ta thebhu ta swilo swa laha kaya.

Nhundzu yin'wana ya swikhomela-ndhawu eka ndzimana leyi fambelanaka na "Kaya". Naswona swin’wana leswi nga endzeni, leswi tirhisiweke laha ntsena ku pad out no tata phanele leyi ya thebhu. Eka vuhumelerisi, swi le rivaleni leswaku a wu ta va na swilo swo tala swa xiviri laha. Naswona ku nga ri ku tsala ntsena. Swi nga va xin’wana ni xin’wana, hakunene. Tsalwa, swifaniso, swivumbeko.

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>

Ku tirhisa swihlawulekisi swa data

U nga endla leswaku ku famba-famba ka ntlawa wa nxaxamelo ku tirha handle ko tsala JavaScript yihi na yihi hi ku boxa ntsena data-bs-toggle="list"kumbe eka elemente. Tirhisa swihlawulekisi leswi swa datha eka .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>

Hi ku tirhisa JavaScript

Endla leswaku nchumu wa nxaxamelo wa tithebhu wu tirha hi ku tirhisa JavaScript (nchumu wun’wana ni wun’wana wa nxaxamelo wu lava ku tirhisiwa hi woxe):

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

U nga tirhisa nchumu wa nxaxamelo wa munhu hi xiyexe hi tindlela to hlayanyana:

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 effect

Ku endla leswaku phanele ya tithebhu yi nyamalala, engetela .fadeeka yin’wana ni yin’wana .tab-pane. Phejini yo sungula ya thebhu yi fanele ku tlhela yi va na .showku endla leswaku nhundzu yo sungula yi vonaka.

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

Maendlelo

constructor

Ku tirhisa xiaki xa nchumu wa nxaxamelo na xikhomela-nhundzu. Tab yi fanele ku va na a data-bs-targetkumbe ku hrefkongomisa eka node ya xikhomela eka 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>

kombisa

Hlawula nchumu wa nxaxamelo lowu nyikiweke ivi u kombisa phejini ya wona leyi fambisanaka na wona. Nchumu wun’wana ni wun’wana wa nxaxamelo lowu a wu hlawuriwile khale wu va lowu nga hlawuriwa naswona phejini ya wona leyi fambisanaka na wona ya tumbetiwa. Ku tlhelela eka mufoyini loko phejini ya thebhu yi nga si kombisiwa hakunene (xikombiso, shown.bs.tabxiendlakalo xi nga si humelela).

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

  tab.show()

lahla

Ku herisa thebhu ya elemente.

getXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa thebhu lexi fambelanaka na elemente ya DOM

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

kumaKumbeEndlaXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa thebhu lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga

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

Swiendlakalo

Loko u kombisa thebhu leyintshwa, swiendlakalo swi pfurha hi ku landzelelana loku landzelaka:

  1. hide.bs.tab(eka thebhu leyi tirhaka sweswi)
  2. show.bs.tab(eka thebhu leyi nga ta kombisiwa)
  3. hidden.bs.tab(eka thebhu leyi tirhaka leyi hundzeke, leyi fanaka ni ya hide.bs.tabxiendlakalo)
  4. shown.bs.tab(eka thebhu leyi tirhaka leyintshwa leyi kombisiweke ntsena, leyi fanaka ni ya show.bs.tabxiendlakalo)

Loko ku nga ri na thebhu leyi se a yi tirha, swiendlakalo swa hide.bs.tabna hidden.bs.taba swi nge tirhisiwi.

Muxaka wa xiendlakalo Nhlamuselo
show.bs.tab Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu, kambe thebhu leyintshwa yi nga si kombisiwa. Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
shown.bs.tab Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu endzhaku ka loko thebhu yi kombisiwile. Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
hide.bs.tab Xiendlakalo lexi xi pfurha loko ku fanele ku kombisiwa thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale yi fanele ku fihliwa). Tirhisa event.targetna event.relatedTargetku kongomisa thebhu ya sweswi leyi tirhaka na thebhu leyintshwa leyi nga ta tirha ku nga ri khale, hi ku landzelelana.
hidden.bs.tab Xiendlakalo lexi xi pfurha endzhaku ka loko ku kombisiwile thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale ya fihliwile). Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka ya khale na thebhu leyintshwa leyi tirhaka, hi ku landzelelana. 
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
  })
}