Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

Sehlopha sa lenane

Lihlopha tsa manane ke karolo e feto-fetohang le e matla bakeng sa ho bonts'a letoto la litaba. Li fetole 'me u li atolose ho tšehetsa hoo e ka bang litaba life kapa life tse ka hare.

Leqepheng lena

Mohlala oa motheo

Sehlopha sa lenane la motheo ke lethathamo le sa reroang le nang le lethathamo la lintho le lihlopha tse nepahetseng. Iketsetse holim'a eona ka likhetho tse latelang, kapa ka CSS ea hau ha ho hlokahala.

  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
  • Ntho ea bone
  • Le ea bohlano
<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>

Lintho tse sebetsang

Eketsa .activeho a .list-group-itemho bontsha kgetho e sebetsang ha jwale.

  • Ntho e sebetsang
  • 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>

Lintho tse holofetseng

Kenya .disabledho a .list-group-itemho etsa hore e bonahale e sa sebetse. Hlokomela hore likarolo tse ling tse nang le .disabledtsona li tla hloka JavaScript e tloaelehileng ho tima ka botlalo liketsahalo tsa bona tsa ho tobetsa (mohlala, lihokelo).

  • Ntho e holofetseng
  • 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>

Sebelisa <a>s kapa <button>s ho theha lethathamo la lintho tse ka etsahalang tsa sehlopha ka hover, ba holofetseng, le maemo a sebetsang ka ho eketsa .list-group-item-action. Re arola lihlopha tsena tsa pseudo ho netefatsa hore lihlopha tse entsoeng ka likarolo tse sa sebelisaneng (joalo <li>ka s kapa <div>s) ha li fane ka monyetla oa ho penya kapa ho tobetsa.

Etsa bonnete ba hore u se ke ua sebelisa .btnlitlelase tse tloaelehileng mona .

Sehokelo sa hajoale Ntho ea bobeli ea lihokelo Ntho ea boraro ea lihokelo Ntho ea bone ea lihokelo Sehokelo se koetsoeng 
<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>

Ka <button>s, u ka boela ua sebelisa disabledtšobotsi ho e-na le .disabledsehlopha. Ka bomalimabe, <a>s ha e tšehetse batho ba nang le bokooa.

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

Hlakola

Eketsa .list-group-flushho tlosa meeli e meng le likhutlo tse pota-potiloeng ho fana ka lethathamo la lintho tsa sehlopha ka har'a sets'oants'o sa motsoali (mohlala, likarete).

  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
  • Ntho ea bone
  • Le ea bohlano
<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>

Nomoro

Eketsa sehlopha sa .list-group-numberedmofetoleli ('me ka boikhethelo u sebelise <ol>element) ho kena lethathamong la lintho tse nang le linomoro. Linomoro li hlahisoa ka CSS (ho fapana le <ol>setaele sa sebatli sa kamehla) bakeng sa ho beoa hamolemo ka har'a lintho tsa sehlopha le ho lumella ho itlhophisa hantle.

Linomoro li hlahisoa ke counter-reseton the <ol>, ebe li etsoa setaele le ho behoa ka ::beforepseudo-element ho <li>with counter-incrementand content.

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

Tsena li sebetsa hantle le litaba tsa moetlo hape.

  1. Sehlohoana
    Cras justo odio
    14
  2. Sehlohoana
    Cras justo odio
    14
  3. Sehlohoana
    Cras justo 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>

E tshekaletseng

Eketsa .list-group-horizontalho fetola sebopeho sa lethathamo la lintho tsa sehlopha ho tloha ho tse otlolohileng ho isa ho tse rapameng ka har'a libaka tsohle tsa phomolo. Ntle le moo, khetha mofuta o arabelang .list-group-horizontal-{sm|md|lg|xl|xxl}ho etsa sehlopha sa lenane se tšekaletseng ho qala sebakeng seo sa breakpoint min-width. Hajoale lihlopha tsa lenane le otlolohileng li ke ke tsa kopanngoa le lihlopha tsa lenane la flush.

ProTip: Na u batla lintho tsa sehlopha sa bophara bo lekanang ha u tšekaletse? Eketsa .flex-fillnthong e 'ngoe le e 'ngoe ea lenane la sehlopha.

  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
<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>

Lihlopha tsa maemo

Sebelisa litlelase tsa maemo ho etsa lethathamo la lintho tse nang le bokantle le mebala e metle.

  • Ntho e bonolo ea lenane la kamehla la sehlopha
  • Ntho e bonolo ea lenane la mantlha la sehlopha
  • Ntho e bonolo ea lenane la bobeli la sehlopha
  • Ntho e bonolo ea lenane la katleho ea sehlopha
  • Ntho e bonolo ea lethathamo la likotsi tsa sehlopha
  • Ntho e bonolo ea lethathamo la tlhokomeliso ea sehlopha
  • Ntho e bonolo ea lethathamo la lintlha tsa sehlopha
  • Ntho e bonolo ea lenane la leseli la sehlopha
  • Ntho e bonolo ea lenane le lefifi la sehlopha
<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>

Litlelase tsa Contextual li boetse li sebetsa le .list-group-item-action. Ela hloko tlatsetso ea mekhoa ea hover mona e seng teng mohlaleng o fetileng. Hape ho tšehetsoa ke .activemmuso; e sebelise ho bontša khetho e sebetsang lethathamong la maemo a sehlopha.

Ntho e bonolo ea lenane la kamehla la sehlopha Ntho e bonolo ea lenane la mantlha la sehlopha Ntho e bonolo ea lenane la bobeli la sehlopha Ntho e bonolo ea lenane la katleho ea sehlopha Ntho e bonolo ea lethathamo la likotsi tsa sehlopha Ntho e bonolo ea lethathamo la tlhokomeliso ea sehlopha Ntho e bonolo ea lethathamo la lintlha tsa sehlopha Ntho e bonolo ea lenane la leseli la sehlopha Ntho e bonolo ea lenane le lefifi la sehlopha 
<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>
Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .visually-hiddensehlopha.

Ka libeche

Kenya libeche lethathamong lefe kapa lefe la sehlopha ho bontša lipalo tse sa baloang, liketsahalo, le tse ling ka thuso ea lisebelisoa tse ling .

  • Ntho ea lethathamo14
  • Ntho ea bobeli ea lenane2
  • Ntho ea lethathamo la boraro1 
<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>

Litaba tse ikhethileng

Kenya hoo e batlang e le HTML efe kapa efe ka hare, esita le bakeng sa lihlopha tsa lenane tse hokahaneng joalo ka e ka tlase, ka thuso ea lisebelisoa tsa flexbox .

Etsa lethathamo la lihlooho tsa sehlopha
Matsatsi a 3 a fetileng

Litaba tse ling tsa setšoantšisi serapeng.

Le mongolo o monyane.
Etsa lethathamo la lihlooho tsa sehlopha
Matsatsi a 3 a fetileng

Litaba tse ling tsa setšoantšisi serapeng.

Le mongolo o monyane o khutsitseng.
Etsa lethathamo la lihlooho tsa sehlopha
Matsatsi a 3 a fetileng

Litaba tse ling tsa setšoantšisi serapeng.

Le mongolo o monyane o khutsitseng. 
<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>

Li-checkbox le liea-le-moea

Beha li-boxbox le liea-le-moea tsa Bootstrap ka har'a lethathamo la lintho tsa sehlopha 'me u iketsetse kamoo ho hlokahalang. U ka li sebelisa ntle le <label>s, empa ka kopo hopola ho kenyelletsa aria-labeltšobotsi le boleng ba phihlello.

  • Lebokose la pele la ho hlahloba
  • Lebokose la bobeli la ho hlahloba
  • Lebokose la boraro la tlhahlobo
  • Lebokose la bone la tlhahlobo
  • Lebokose la bohlano la ho hlahloba
<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>

'Me haeba u batla <label>ho ba .list-group-itemlibaka tse kholo tse otlang, u ka etsa joalo, hape.

<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

Lintho tse fapaneng

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

Metsoako

E sebelisoa hammoho le $theme-colorsho hlahisa mefuta e fapaneng ea maemo bakeng sa .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;
      }
    }
  }
}

Loop

Loop e hlahisang lihlopha tsa modifier 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);
}

Boitšoaro ba JavaScript

Sebelisa tab "JavaScript plugin" - e kenyelle ka bonngoe kapa ka bootstrap.jsfaele e hlophisitsoeng - ho atolosa sehlopha sa rona sa lenane ho theha liphasejene tsa litaba tsa lehae.

Likahare tse ling serapeng se amanang le "Lehae". Le litaba tse ling, tse sebelisitsoeng mona ho phethola le ho tlatsa letlapa lena. Ka tlhahiso, ho hlakile hore u tla ba le litaba tse ngata tsa 'nete mona. Mme eseng feela mongolo. E ka ba eng kapa eng, ruri. Mongolo, litšoantšo, mefuta.

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>

Ho sebelisa litšobotsi tsa data

O ka kenya ts'ebetso ea sehlopha sa lethathamo ntle le ho ngola JavaScript efe kapa efe ka ho hlakisa feela data-bs-toggle="list"kapa ho ntho e itseng. Sebelisa litšobotsi tsena tsa data ho .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

Lumella ntho ea lethathamo la li-tabable ka JavaScript (ntho ka 'ngoe ea lethathamo e hloka ho kengoa tšebetsong ka bonngoe):

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

O ka kenya tšebetsong lethathamo la ntho ka 'ngoe ka mekhoa e mengata:

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 phello

Ho etsa hore phanele ea li-tab e nyamele, eketsa .fadeho e 'ngoe le e 'ngoe .tab-pane. Letlapa la pele la li-tab le lona le tlameha .showho etsa hore litaba tsa pele li bonahale.

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

Mekhoa

constructor

E kenya tshebetsong karolo ya lenane le setshelo sa dikahare. Tab e lokela ho ba le node ea setshelo data-bs-targetkapa e hreflebisitsoeng ho 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>

bontsha

E khetha lethathamo le fanoeng ebe e bontša karolo e amanang le eona. Ntho efe kapa efe e 'ngoe ea lethathamo e neng e khethiloe nakong e fetileng e fetoha e sa khethoeng 'me karolo ea eona e amanang le eona ea patoa. E kgutlela ho moletsi pele fenstere ya tab e bontshwa (mohlala, pele shown.bs.tabketsahalo e etsahala).

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

  tab.show()

lahla

E senya thebo ea element.

getInstance

Mokhoa o tsitsitseng o u lumellang ho fumana mohlala oa tabo o amanang le ntho ea DOM

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

getOrCreateInstance

Mokhoa o tsitsitseng o u lumellang hore u fumane mohlala oa tabo o amanang le ntho ea DOM, kapa u thehe e ncha haeba e sa qalisoa.

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

Liketsahalo

Ha o hlahisa tab e ncha, liketsahalo li tla ka tatellano e latelang:

  1. hide.bs.tab(tabong ea hajoale e sebetsang)
  2. show.bs.tab(letlapeng le tlang ho bontšoa)
  3. hidden.bs.tab(tabong e fetileng e sebetsang, e ts'oanang le ea hide.bs.tabketsahalo)
  4. shown.bs.tab(tabong e sa tsoa hlaha, e ts'oanang le ea show.bs.tabketsahalo)

Haeba ho se tab e neng e se e ntse e sebetsa, liketsahalo hide.bs.table hidden.bs.tabliketsahalo li ke ke tsa hlakoloa.

Mofuta oa ketsahalo Tlhaloso
show.bs.tab Ketsahalo ena e qala ho bonts'a li-tab, empa pele tab e ncha e bontšoa. Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana.
shown.bs.tab Ketsahalo ena e tla hlaha ka mor'a hore tab e hlahisoe. Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana.
hide.bs.tab Ketsahalo ena e tuka ha tab e ncha e tla bontšoa ('me ka hona tab e fetileng e sebetsang e lokela ho patoa). Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang ea hajoale le e ncha e tlang ho sebetsa haufinyane, ka ho latellana.
hidden.bs.tab Ketsahalo ena e tuka ka mor'a hore ho bontšoe tabo e ncha ('me kahoo tab e fetileng e sebetsang e patiloe). Sebelisa event.targetle event.relatedTargetho shebisa tab e fetileng e sebetsang le tab e ncha e sebetsang, ka ho latellana. 
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
  })
}