in English

Olukalala lw'ekibinja

Ebibinja by’olukalala kitundu ekikyukakyuka era eky’amaanyi eky’okulaga omuddirirwa gw’ebirimu. Kyuusa era ozigaziye okuwagira kumpi ebirimu byonna ebiri munda.

Ku muko guno

Ekyokulabirako ekikulu

Ekibinja ky’olukalala ekisinga obukulu lwe lukalala olutali lutegekeddwa nga lulimu ebintu by’olukalala n’ebika ebituufu. Zimba ku kyo n'eby'okulonda ebiddako, oba ne CSS yo nga bwe kyetaagisa.

Ekintu
Ekintu ekyokubiri
Ekintu eky’okusatu
Ekintu eky’okuna
N’ow’okutaano

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>

Ebintu ebikola

Okwongera .activeku a .list-group-itemokulaga okulonda okukola okuliwo kati.

Ekintu ekikola
Ekintu ekyokubiri
Ekintu eky’okusatu
Ekintu eky’okuna
N’ow’okutaano

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>

Ebintu ebilema

Yongera .disabledku a .list-group-itemokulabika ng’eremeddwa . Weetegereze nti ebintu ebimu ebirina .disablednabyo bijja kwetaaga JavaScript eya bulijjo okulemesa mu bujjuvu ebibaddewo byabwe eby'okunyiga (okugeza, enkolagana).

Ekintu ekilemaddwa
Ekintu ekyokubiri
Ekintu eky’okusatu
Ekintu eky’okuna
N’ow’okutaano

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>

Links ne buttons

Kozesa <a>s oba <button>s okukola ebintu by'ekibiina ky'olukalala ebisobola okukolebwa nga biriko embeera za hover, eziremeseddwa, n'ezikola ng'ogattako .list-group-item-action. Twawula bino pseudo-classes okukakasa nti ebibinja by’olukalala ebikoleddwa mu bintu ebitali bikwatagana (nga <li>s oba <div>s) tebiwa click oba tap affordance.

Kakasa nti tokozesa .btnkiraasi za mutindo wano .

Ekintu ky'enkolagana ekiriwo kati Ekintu ekyokubiri eky’okuyunga Ekintu eky’okusatu eky’okuyunga Ekintu eky’okuna eky’okuyunga Ekintu ky'enkolagana ekiremeseddwa

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>

Nga olina <button>s, osobola n’okukozesa disabledekintu mu kifo kya .disabledkiraasi. Eky'ennaku, <a>s teziwagira attribute eremeddwa.

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>

Okufuuwa

Okwongerako .list-group-flushokuggyawo ensalosalo ezimu n'enkoona ezeetooloovu okulaga ebintu by'ekibinja ky'olukalala okuva ku mbiriizi mu kibya ekizadde (okugeza, kaadi).

Ekintu
Ekintu ekyokubiri
Ekintu eky’okusatu
Ekintu eky’okuna
N’ow’okutaano

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>

Eweereddwa ennamba

Okwongerako ekibiina .list-group-numberedky'omukyusa (era nga tolina ky'oyagala kozesa <ol>ekintu) okulonda mu bintu by'ekibinja ky'olukalala ebirina ennamba. Ennamba zikolebwa nga ziyita mu CSS (okuwukana ku <ol>s default browser styling) okusobola okuteekebwa obulungi munda mu bintu by’ekibinja ky’olukalala n’okusobozesa okulongoosa obulungi.

Ennamba zikolebwa counter-resetku <ol>, n’oluvannyuma ne ziteekebwako sitayiro ne ziteekebwa n’ekintu ::beforeeky’obulimba ku <li>ne counter-incrementne content.

Ekintu eky’olukalala
Ekintu eky’olukalala
Ekintu eky’olukalala

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>

Bino bikola bulungi nnyo ne custom content nga bwekiri.

Omutwe omutono
Ebirimu ku kintu eky'olukalala
14. 14
Omutwe omutono
Ebirimu ku kintu eky'olukalala
14. 14
Omutwe omutono
Ebirimu ku kintu eky'olukalala
14. 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>

Okwegolola

Okwongerako .list-group-horizontalokukyusa ensengeka y’ebintu by’ekibinja ky’olukalala okuva ku nneekulungirivu okudda ku nneekulungirivu okubuna ebifo byonna eby’okumenya. Ekirala, londa enkyukakyuka eddamu .list-group-horizontal-{sm|md|lg|xl|xxl}okukola ekibinja ky'olukalala horizontal okutandika ku breakpoint eyo's min-width. Mu kiseera kino ebibinja by'olukalala olw'okwebungulula tebisobola kugattibwa wamu na bibinja bya lukalala lwa flush.

ProTip: Oyagala ebintu by'ekibiina ky'olukalala eby'obugazi obwenkanankana nga bwe kiri horizontal? Yongera .flex-fillku buli lukalala ekintu eky’ekibinja.

Ekintu
Ekintu ekyokubiri
Ekintu eky’okusatu

Ekintu
Ekintu ekyokubiri
Ekintu eky’okusatu

Ekintu
Ekintu ekyokubiri
Ekintu eky’okusatu

Ekintu
Ekintu ekyokubiri
Ekintu eky’okusatu

Ekintu
Ekintu ekyokubiri
Ekintu eky’okusatu

Ekintu
Ekintu ekyokubiri
Ekintu eky’okusatu

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>

Ebisulo ebikwata ku mbeera

Kozesa kiraasi ezikwata ku mbeera okuwandiika sitayiro y’ebintu ebirina embeera y’emabega ne langi.

Ekintu eky'ekibinja eky'olukalala ekisookerwako eky'ennyangu
Ekintu eky’ekibiina ky’olukalala olusookerwako ennyangu
Ekintu eky’ekibiina ky’olukalala olw’okubiri olwangu
Ekintu eky’ekibiina eky’olukalala lw’obuwanguzi eky’enjawulo
Ekintu eky’ekibinja eky’olukalala lw’akabi ennyangu
Ekintu eky’ekibinja eky’olukalala lw’okulabula eky’enjawulo
Ekintu eky'ekibiina eky'olukalala lw'amawulire ennyangu
Ekintu eky’ekibiina eky’olukalala lw’ekitangaala eky’enjawulo
Ekintu eky’ekibinja eky’olukalala lw’enzikiza ennyangu

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>

Ebisulo ebikwata ku mbeera nabyo bikola ne .list-group-item-action. Weetegereze okugattako emisono gya hover wano egitaliiwo mu kyokulabirako ekyayita. Era ewagirwa .activegavumenti; kikozese okulaga okulonda okukola ku kintu ky'ekibiina ky'olukalala lw'embeera.

Ekintu eky'ekibinja eky'olukalala ekisookerwako eky'ennyangu Ekintu eky’ekibiina ky’olukalala olusookerwako ennyangu Ekintu eky’ekibiina ky’olukalala olw’okubiri olwangu Ekintu eky’ekibiina eky’olukalala lw’obuwanguzi eky’enjawulo Ekintu eky’ekibinja eky’olukalala lw’akabi ennyangu Ekintu eky’ekibinja eky’olukalala lw’okulabula eky’enjawulo Ekintu eky'ekibiina eky'olukalala lw'amawulire ennyangu Ekintu eky’ekibiina eky’olukalala lw’ekitangaala eky’enjawulo Ekintu eky’ekibinja eky’olukalala lw’enzikiza ennyangu

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>

Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .visually-hiddenkiraasi.

Nga balina badge

Yongera badge ku kintu kyonna eky'ekibinja ky'olukalala okulaga okubala okutasomiddwa, emirimu, n'ebirala ng'oyambibwako ebimu ku bikozesebwa .

Ekintu eky’olukalala14. 14
Ekintu ekyokubiri eky’olukalala2.
Ekintu eky’okusatu eky’olukalala1.

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>

Ebirimu eby’enjawulo

Okwongerako kumpi HTML yonna munda, ne ku bibinja by'olukalala ebiyungiddwa nga ekyo wansi, ng'oyambibwako flexbox utilities .

Laga omutwe gw’ekintu ky’ekibinja

Ennaku 3 eziyise

Ebimu ku bifo ebirimu mu katundu.

Era ebimu ku bitabo ebitonotono.

Laga omutwe gw’ekintu ky’ekibinja

Ennaku 3 eziyise

Ebimu ku bifo ebirimu mu katundu.

Era ebimu byasirisa ebiwandiiko ebitonotono.

Laga omutwe gw’ekintu ky’ekibinja

Ennaku 3 eziyise

Ebimu ku bifo ebirimu mu katundu.

Era ebimu byasirisa ebiwandiiko ebitonotono.

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>

Ebibokisi ebikebera ne leediyo

Teeka Bootstrap's checkboxes ne radios munda mu list group ebintu era customize nga bwekyetaagisa. Osobola okuzikozesa nga tolina <label>s, naye nsaba ojjukire okussaamu ekintu aria-labeln'omuwendo okusobola okutuukako.

Ekisooka okukebera
Akabokisi ak’okubiri ak’okukebera
Akabokisi ak’okusatu ak’okukebera

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>

Leediyo esooka
Leediyo eyookubiri
Leediyo eyokusatu

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>

Osobola okukozesa .stretched-linkku <label>s okufuula ekintu kyonna eky'ekibinja ky'olukalala ekiyinza okunyigibwa.

Ekisooka okukebera
Akabokisi ak’okubiri ak’okukebera
Akabokisi ak’okusatu ak’okukebera

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

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, ebibinja by'olukalala kati bikozesa enkyukakyuka za CSS ez'omu kitundu ku .list-groupfor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

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

Enkyukakyuka za 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;

Ebirungo ebitabuddwa

Ekozesebwa nga egattibwa wamu ne $theme-colorsokukola ebika by’enkyukakyuka mu mbeera ( contextual variant classes ) ku .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;
      }
    }
  }
}

Kyabulijo

Loop ekola modifier classes ne 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);
}

Enneeyisa ya JavaScript

Kozesa tab JavaScript plugin —giteekemu kinnoomu oba okuyita mu bootstrap.jsfayiro ekunganyiziddwa —okugaziya ekibinja kyaffe eky’olukalala okukola tabbable panes z’ebirimu eby’omu kitundu.

Ewaka Ebikukwatako Obubaka Enteekateeka

Ebimu ku bifo ebirimu mu katundu akakwata ku "Awaka". Era ebimu ku birimu ebirala, ebikozesebwa wano just to pad out and fill this tab panel. Mu production, obviously wandifunye ebisingawo ku real content wano. Era si bubaka bwokka. Kiyinza okuba ekintu kyonna, ddala. Ebiwandiiko, ebifaananyi, ffoomu.

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>

Okukozesa ebikwata ku data

Osobola okukola okutambulira mu kibinja ky’olukalala nga towandiise JavaScript yonna ng’omala okulaga data-bs-toggle="list"oba ku elementi. Kozesa bino ebikwata ku data ku .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>

Okuyita mu JavaScript

Ssobozesa ekintu ky'olukalala lwa tabbable ng'oyita mu JavaScript (buli kintu ky'olukalala kyetaaga okukozesebwa kinnoomu):

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

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

Osobola okukola ekintu ky'olukalala lw'omuntu kinnoomu mu ngeri eziwerako:

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

Okufuula tabs panel okuzikira mu, yongera .fadeku buli .tab-pane. Ekipande kya tabu ekisooka nakyo kirina okuba nga .showkirina okufuula ebirimu ebisooka okulabika.

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

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

Ekola ebirimu byo nga ekintu kya tabu.

Osobola okukola ekifaananyi kya tabu n'omuzimbi, okugeza:

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

Engeri	Okunnyonnyola
`dispose`	Esaanyaawo tabu ya elementi.
`getInstance`	Enkola ya static ekusobozesa okufuna tab instance ekwatagana ne DOM element, osobola okugikozesa nga eno: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Enkola ya static ezzaayo ekifaananyi kya tab ekikwatagana ne elementi ya DOM oba okukola ekipya singa kiba nga tekitandikibwawo. Osobola okugikozesa bw’otyo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Londa tabu eweereddwa era eraga ekitundu kyayo ekikwatagana. Taabu endala yonna eyalondebwa emabegako efuuka etalondeddwa era ekipande kyayo ekikwatagana ne kikwekebwa. Edda eri omuyita nga ekitundu kya tabu tekinnalagibwa ddala (kwe kugamba nga `shown.bs.tab`ekintu tekinnabaawo).

Ebibaddewo

Nga olaga tabu empya, ebibaawo bikuba amasasi mu nsengeka eno wammanga:

hide.bs.tab(ku tabu ekola kati)
show.bs.tab(ku kitundu ekigenda okulagibwa)
hidden.bs.tab(ku tabu ekola emabega, y’emu hide.bs.tabn’ey’omukolo)
shown.bs.tab(ku kitundu ekipya-ekikola ekyaakalagibwa, kye kimu show.bs.tabn'eky'omukolo)

Singa tewali tabu yali yakola dda, olwo hide.bs.tabne hidden.bs.tabevents tezijja kugobwa.

Ekika ky’ekintu ekibaawo	Okunnyonnyola
`hide.bs.tab`	Ekintu kino kikuba omuliro nga tabu empya egenda kulagibwa (era bwe kityo tabu ekola eyasooka erina okukwekebwa). Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola kati ne tabu empya egenda okukola mu bbanga ttono, mu kulondako.
`hidden.bs.tab`	Ekintu kino kikuba omuliro oluvannyuma lwa tabu empya okulagibwa (era bwe kityo tabu ekola eyasooka ekwekebwa). Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola emabega ne tabu empya ekola, mu kulondako.
`show.bs.tab`	Ekintu kino kikuba omuliro ku tab show, naye nga tab empya tennalagibwa. Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.
`shown.bs.tab`	Ekintu kino kikuba omuliro ku tab show oluvannyuma lwa tab okulagibwa. Kozesa `event.target`ne `event.relatedTarget`okutunuulira tabu ekola ne tabu ekola eyasooka (bwe kiba nga kiriwo) mu kulondako.

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