Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Lenaneo sehlopha

Dihlopha tša lenaneo ke karolo ye e fetofetogago le maemo le ye maatla ya go bontšha lelokelelo la diteng. Fetoša le go di katološa go thekga mo e ka bago diteng le ge e le dife ka gare.

Letlakaleng le

Mohlala wa motheo

Sehlopha sa lenaneo la motheo kudu ke lenaneo leo le sa rulaganywago leo le nago le dilo tša lenaneo le diklase tša maleba. Aga godimo ga yona ka dikgetho tše di latelago, goba ka CSS ya gago ge go nyakega.

  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
  • Ntlha ya bone
  • Le ya bohlano
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>

Dilo tše di šomago

Oketša .activego a .list-group-itemgo laetša kgetho ya bjale ye e šomago.

  • Selo se se šomago
  • Selo sa bobedi
  • Selo sa boraro
  • Ntlha ya bone
  • Le ya bohlano
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>

Dilo tše di golofetšego

Oketša .disabledgo a .list-group-itemgo dira gore e bonagale e golofetše. Hlokomela gore dielemente tše dingwe tše di nago le di .disabledtla nyaka gape JavaScript ya tlwaelo go šitiša ka botlalo ditiragalo tša tšona tša go klika (mohlala, dikgokagano).

  • Selo seo se golofetšego
  • Selo sa bobedi
  • Selo sa boraro
  • Ntlha ya bone
  • Le ya bohlano
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>

Šomiša <a>s goba <button>s go hlama diaetheme tša sehlopha sa lenaneo tše di ka tšewago kgato.list-group-item-action ka go hover, go golofala, le maemo a go šoma ka go tlaleletša . Re aroganya diklase tše tša maaka go netefatša gore dihlopha tša lenaneo tšeo di dirilwego ka dielemente tšeo di sa dirišanego (go swana le <li>s goba <div>s) ga di neelane ka go kgona go kgotla goba go kgotla.

Kgonthiša gore ga o šomiše .btndiklase tša maemo mo .

Ntlha ya kgokagano ya bjale Ntlha ya bobedi ya kgokagano Ntho ya boraro ya kgokagano Ntlha ya bone ya kgokagano Ntho ya kgokagano yeo e golofetšego
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>

Ka <button>s, o ka dira gape tšhomišo ya disabledseka go e na le .disabledsehlopha. Ka manyami, <a>s ga e thekge seka se se golofetšego.

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>

Hlatswa

Oketša .list-group-flushgo tloša mellwane ye mengwe le dikhutlo tša nkgokolo go tšweletša lenaneo la sehlopha diaetheme mošito go ya mošito ka gare ga setshelo sa motswadi (mohlala, dikarata).

  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
  • Ntlha ya bone
  • Le ya bohlano
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>

E nomorilwe

Oketša .list-group-numberedsehlopha sa sefetoši (gomme ka boikgethelo šomiša <ol>elemente) go kgetha go diaetheme tša sehlopha sa lenaneo tše di nago le dinomoro. Dipalo di tšweletšwa ka CSS (go fapana le <ol>setaele sa sephephediši sa go se fetoge) bakeng sa go bewa gakaone ka gare ga dilo tša sehlopha sa lenaneo le go dumelela go tlwaetša gakaone.

Dipalo di tšweletšwa ke counter-resetgodimo ga <ol>, gomme ka morago tša setaele gomme tša bewa ka ::beforeelemente ya maaka godimo ga <li>ka counter-incrementle content.

  1. Selo sa lenaneo
  2. Selo sa lenaneo
  3. Selo sa lenaneo
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>

Tše di šoma kudu ka dikagare tša tlwaelo le tšona.

  1. Sehlogo se senyenyane
    Diteng tša selo sa lenaneo
    14.
  2. Sehlogo se senyenyane
    Diteng tša selo sa lenaneo
    14.
  3. Sehlogo se senyenyane
    Diteng tša selo sa lenaneo
    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>

Rapamego

Oketša .list-group-horizontalgo fetoša peakanyo ya diaetheme tša sehlopha sa lenaneo go tšwa go go ema go ya go go rapalala go putla dintlha ka moka tša go kgaotša. Ka go fapana le moo, kgetha mohuta wa go arabela .list-group-horizontal-{sm|md|lg|xl|xxl}go dira gore sehlopha sa lenaneo se rapaletše go thoma ka ntlha yeo ya go kgaotša ya min-width. Ga bjale dihlopha tša lenaneo tše di rapaletšego di ka se kopanywe le dihlopha tša lenaneo la go hlatswa.

ProTip: O nyaka dilo tša sehlopha sa lenaneo la bophara bjo bo lekanago ge di rapaletše? Oketša .flex-fillgo selo se sengwe le se sengwe sa sehlopha sa lenaneo.

  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
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>

Diklase tša diteng

Šomiša diklase tša diteng go lokeletša diaetheme tša setaele ka morago le mmala wa seemo.

  • Ntho e bonolo ya sehlopha sa lenaneo la maitirelo
  • Ntlha ya sehlopha sa lenaneo la mathomo se bonolo
  • Ntlha ya sehlopha sa lenaneo la bobedi le bonolo
  • Ntho e bonolo ya sehlopha sa lenaneo la katlego
  • Ntho e bonolo ya sehlopha sa lenaneo la kotsi
  • Ntlha ya sehlopha sa lenaneo la temošo ye bonolo
  • A bonolo info lenaneo sehlopha ntho
  • Ntho e bonolo ya sehlopha sa lenaneo la seetša
  • Ntho e bonolo ya sehlopha sa lenaneo le lefifi
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>

Diklase tša seemo le tšona di šoma ka .list-group-item-action. Hlokomela tlaleletšo ya mekgwa ya go hover mo e sego gona mohlaleng wa go feta. Gape go thekgwa ke .activemmušo; e diriše go laetša kgetho ye e šomago godimo ga aetheme ya sehlopha sa lenaneo la diteng.

Ntho e bonolo ya sehlopha sa lenaneo la maitirelo Ntlha ya sehlopha sa lenaneo la mathomo se bonolo Ntlha ya sehlopha sa lenaneo la bobedi le bonolo Ntho e bonolo ya sehlopha sa lenaneo la katlego Ntho e bonolo ya sehlopha sa lenaneo la kotsi Ntlha ya sehlopha sa lenaneo la temošo ye bonolo A bonolo info lenaneo sehlopha ntho Ntho e bonolo ya sehlopha sa lenaneo la seetša Ntho e bonolo ya sehlopha sa lenaneo le lefifi
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>
Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hiddensehlopha.

Ka dipetšhe

Oketša dipetšhe go selo sefe goba sefe sa sehlopha sa lenaneo go bontšha dipalo tšeo di sa balwago, mošomo, le tše dingwe ka thušo ya didirišwa tše dingwe .

  • Selo sa lenaneo14.
  • Ntlha ya bobedi ya lenaneo2.
  • Ntlha ya boraro ya lenaneo1. 1.
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>

Diteng tša tlwaelo

Oketša mo e nyakilego go ba HTML efe goba efe ka gare, gaešita le bakeng sa dihlopha tša lenaneo tše di kgokagantšwego go swana le yeo e lego ka mo tlase, ka thušo ya didirišwa tša flexbox .

Lokeletša hlogo ya selo sa sehlopha
Matšatši a 3 a fetilego

Diteng tše dingwe tša seswaro sa lefelo temaneng.

Le diprintwa tše dingwe tše nnyane.
Lokeletša hlogo ya selo sa sehlopha
Matšatši a 3 a fetilego

Diteng tše dingwe tša seswaro sa lefelo temaneng.

Gomme tše dingwe di kgaotše mongwalo o monyenyane.
Lokeletša hlogo ya selo sa sehlopha
Matšatši a 3 a fetilego

Diteng tše dingwe tša seswaro sa lefelo temaneng.

Gomme tše dingwe di kgaotše mongwalo o monyenyane.
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>

Mapokisi a go hlahloba le diradio

Bea mapokisi a go hlahloba a Bootstrap le diradio ka gare ga dilo tša sehlopha sa lenaneo gomme o tlwaetše ge go nyakega. O ka di šomiša ntle le <label>s, eupša hle gopola go akaretša aria-labelseka le boleng bja phihlelelo.

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>

O ka šomiša .stretched-linkgo <label>s go dira gore selo ka moka sa sehlopha sa lenaneo se kgone go klika.

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

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya mokgwa wa go fetoga wa diphetogo tša CSS wa Bootstrap, dihlopha tša lenaneo bjale di šomiša diphetogo tša CSS tša selegae godimo .list-groupbakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

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

Diphetogo tša 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;

Ditswaki

E šomišwa ka kopanyo le $theme-colorsgo tšweletša diklase tša phapano ya diteng tša s .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;
      }
    }
  }
}

Segole

Loop yeo e tšweletšago dihlopha tša sefetoši ka 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);
}

Boitshwaro bja JavaScript

Diriša thepo ya polaka ya JavaScript—e akaretše ka botee goba ka bootstrap.jsfaele yeo e kgobokeditšwego—go katološa sehlopha sa rena sa lenaneo go hlama diphanephe tša thepo tša diteng tša lefelong leo.

Diteng tše dingwe tša seswari sa lefelo temaneng yeo e amanago le "Gae". Gomme diteng tše dingwe tše dingwe, di šomišwa mo fela go pad ntle le go tlatša phanele ye ya thepo. Ka tšweletšong, go molaleng gore o be o tla ba le diteng tše dingwe tša kgonthe mo. Gomme e sego go ngwala fela. E ka ba selo se sengwe le se sengwe, ka nnete. Sengwalwa, diswantšho, diforomo.

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>

Go šomiša dika tša datha

O ka tsenya tirišong go sepelasepela ga sehlopha sa lenaneo ntle le go ngwala JavaScript efe goba efe ka go no laetša data-bs-toggle="list"goba godimo ga elemente. Šomiša dika tše tša datha go .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>

Ka JavaScript

Kgontšha ntlha ya lenaneo la thepo ka JavaScript (ntlha ye nngwe le ye nngwe ya lenaneo e swanetše go tsenywa tirišong ka botee):

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

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

O ka tsenya tirišong selo sa lenaneo la motho ka o tee ka o tee ka ditsela tše mmalwa:

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 phello

Go dira gore phanele ya dithepo e fifala ka gare, oketša .fadego ye nngwe le ye nngwe .tab-pane. Lefasetešana la thepo ya mathomo le lona le swanetše go ba le .showgo dira gore diteng tša mathomo di bonagale.

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

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

E dira gore diteng tša gago di šome bjalo ka elemente ya thepo.

O ka hlama mohlala wa thepo ka mohlami, mohlala:

const bsTab = new bootstrap.Tab('#myTab')
Mokgwa Tlhalošo
dispose E senya thepo ya elemente.
getInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa thepo wo o amanago le elemente ya DOM, o ka e šomiša ka tsela ye: bootstrap.Tab.getInstance(element).
getOrCreateInstance Mokgwa wa go se fetoge wo o bušetšago mohlala wa thepo wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa. O ka e diriša ka tsela ye: bootstrap.Tab.getOrCreateInstance(element).
show Kgetha thepo ye e filwego gomme e bontšha lefasetere la yona leo le amanago. Thepo efe goba efe ye nngwe yeo e bego e kgethilwe peleng e ba yeo e sa kgethwago gomme lefasetere la yona leo le amanago le lona le a utilwe. E boela go mogala pele lefasetere la thepo le bontšhitšwe e le ka kgonthe (ke gore pele shown.bs.tabtiragalo e direga).

Ditiragalo

Ge o bontšha thepo ye mpsha, ditiragalo di thunya ka tatelano ye e latelago:

  1. hide.bs.tab(go thepo ya bjale ye e šomago) .
  2. show.bs.tab(go thepo yeo e tlago go bontšhwa)
  3. hidden.bs.tab(go thepong ya go šoma ya peleng, e swanago le ya hide.bs.tabtiragalo)
  4. shown.bs.tab(go thepong yeo e sa tšwago go bontšhwa yeo e sa tšwago go šoma, e swanago le ya show.bs.tabtiragalo)

Ge e ba go se na thepo yeo e bego e šetše e šoma, gona ditiragalo tša hide.bs.table hidden.bs.tabdi ka se thuntšwe.

Mohuta wa tiragalo Tlhalošo
hide.bs.tab Tiragalo ye e a tuka ge thepo ye mpsha e swanetše go bontšhwa (gomme ka go realo thepo ye e šomago ya peleng e swanetše go utollwa). Šomiša event.targetle event.relatedTargetgo nepiša thepo ya bjale ye e šomago le thepo ye mpsha yeo e tlago go šoma kgauswinyane, ka go latelelana.
hidden.bs.tab Tiragalo ye e thunya ka morago ga ge thepo ye mpsha e bontšhitšwe (gomme ka go realo thepo ye e šomago ya peleng e a utilwe). Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago ya peleng le thepo ye mpsha ye e šomago, ka go latelelana.
show.bs.tab Tiragalo ye e thunya ka pontšho ya thepo, eupša pele ga ge thepo ye mpsha e bontšhitšwe. Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.
shown.bs.tab Tiragalo ye e thunya pontšhong ya thepo ka morago ga ge thepo e bontšhitšwe. Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana. 
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
  })
})