Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
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
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>

Swilo leswi tirhaka

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

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

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

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

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.

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>

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

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. Nchumu wa nxaxamelo
  2. Nchumu wa nxaxamelo
  3. Nchumu wa nxaxamelo
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>

Leswi swi tirha swinene na nhundzu ya ntolovelo na swona.

  1. Nhlokomhaka-ntsongo
    Vuxokoxoko bya nchumu wa nxaxamelo
    14.
  2. Nhlokomhaka-ntsongo
    Vuxokoxoko bya nchumu wa nxaxamelo
    14.
  3. Nhlokomhaka-ntsongo
    Vuxokoxoko bya nchumu wa nxaxamelo
    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>

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

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

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

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

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.

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

U nga tirhisa .stretched-linkeka <label>s ku endla leswaku nchumu hinkwawo wa ntlawa wa nxaxamelo wu tsindziyela.

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

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa endlelo ra Bootstrap leri cincaka ra swilo leswi cinca-cincaka swa CSS, mintlawa ya nxaxamelo sweswi yi tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .list-groupfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

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

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

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

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

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

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

Ku endla leswaku nhundzu ya wena yi tirha tanihi xiphemu xa thebhu.

U nga endla xikombiso xa thebhu hi muaki, xikombiso:

const bsTab = new bootstrap.Tab('#myTab')
Ndlela Nhlamuselo
dispose Ku herisa thebhu ya elemente.
getInstance Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa thebhu lexi fambelanaka na elemente ya DOM, u nga xi tirhisa hi ndlela leyi: bootstrap.Tab.getInstance(element).
getOrCreateInstance Ndlela ya static leyi vuyisaka xikombiso xa thebhu lexi fambelanaka na elemente ya DOM kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga. U nga yi tirhisa hi ndlela leyi: bootstrap.Tab.getOrCreateInstance(element).
show Hlawula thebhu leyi nyikiweke ivi yi kombisa phejini ya yona leyi fambisanaka na yona. Thebhu yin’wana ni yin’wana leyi a yi hlawuriwile khale yi va leyi nga hlawuriwa naswona phejini ya yona leyi fambisanaka na yona ya tumbetiwa. Ku tlhelela eka mufoyini loko phejini ya thebhu yi nga si kombisiwa hakunene (i.e. shown.bs.tabxiendlakalo xi nga si humelela).

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, kutani hide.bs.tabswiendlakalo swa na hidden.bs.taba swi nge tirhisiwi.

Muxaka wa xiendlakalo Nhlamuselo
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.
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. 
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
  })
})