Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

Vondrona lisitra

Ny vondrona lisitra dia singa mora sy matanjaka amin'ny fanehoana andiam-panazavana. Ovao sy ampitomboy izy ireo mba hanohanana ny atiny rehetra ao anatiny.

Amin'ity pejy ity

Ohatra fototra

Ny vondrona lisitra fototra indrindra dia lisitra tsy misy filaharana miaraka amin'ireo singa lisitra sy ireo kilasy mety. Amboary miaraka amin'ireo safidy manaraka izany, na miaraka amin'ny CSS anao manokana raha ilaina.

  • Zavatra iray
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra fahefatra
  • Ary ny fahadimy
<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>

Zavatra mavitrika

Ampio .activeamin'ny a .list-group-itemhanondro ny safidy mavitrika ankehitriny.

  • Singa mavitrika
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra fahefatra
  • Ary ny fahadimy
<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>

Zavatra kilemaina

Ampio .disabledamin'ny a .list-group-itemhahatonga azy ho kilemaina. Mariho fa ny singa sasany miaraka .disableddia mitaky JavaScript manokana ihany koa mba hanesorana tanteraka ny hetsika kitiny (oh: rohy).

  • Zavatra kilemaina
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra fahefatra
  • Ary ny fahadimy
<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>

Mampiasà <a>s na <button>s mba hamoronana singa vondrona lisitra azo atao miaraka amin'ny fanjakana hover, kilemaina ary mavitrika amin'ny fanampiana .list-group-item-action. Asarahinay ireto kilasy pseudo ireto mba hahazoana antoka fa tsy manome vola kitihina na paompy ny vondrona lisitra vita amin'ny singa tsy mifanentana (toy ny <li>s na s).<div>

Ataovy azo antoka fa tsy mampiasa ny .btnkilasy mahazatra eto .

Ny singa rohy ankehitriny Zavatra rohy faharoa Zavatra rohy fahatelo Zavatra rohy fahefatra Singa rohy kilemaina 
<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>

Miaraka amin'ny <button>s, azonao atao koa ny mampiasa ny disabledtoetra fa tsy ny .disabledkilasy. Mampalahelo fa <a>tsy manohana ny toetra kilemaina i s.

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

kabone

Ampio .list-group-flushhanesorana ny sisin-tany sasany sy ny zorony boribory mba hamerenana ny lisitry ny lisitry ny singa amin'ny sisiny amin'ny fitoeran'ny ray aman-dreny (oh: karatra).

  • Zavatra iray
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra fahefatra
  • Ary ny fahadimy
<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>

voalamina

Ampio ny .list-group-numberedkilasin'ny modifier (ary raha tsy izany dia ampiasao <ol>singa iray) mba hisafidianana amin'ireo singa vondrona misy lisitra. Noforonina tamin'ny alàlan'ny CSS ny isa (mifanohitra amin'ny <ol>styling navigateur default) ho an'ny fametrahana tsara kokoa ao anatin'ny lisitry ny lisitry ny entana ary ahafahana manamboatra tsara kokoa.

Ny isa dia novokarin'ny counter-resetao amin'ny <ol>, ary avy eo apetraka ary apetraka miaraka amin'ny ::beforesinga pseudo eo amin'ny <li>miaraka amin'ny counter-incrementsy content.

  1. Zavatra lisitra
  2. Zavatra lisitra
  3. Zavatra lisitra
<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>

Ireo dia miasa tsara miaraka amin'ny atiny manokana ihany koa.

  1. lohatenikely
    Votoaty ho an'ny lisitra
    14
  2. lohatenikely
    Votoaty ho an'ny lisitra
    14
  3. lohatenikely
    Votoaty ho an'ny lisitra
    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>
      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>

Marindrano

Ampio .list-group-horizontalhanova ny fisehon'ireo singa vondrona lisitra manomboka amin'ny mitsangana mankany amin'ny marindrano manerana ny teboka rehetra. Raha tsy izany, mifidiana variana mamaly .list-group-horizontal-{sm|md|lg|xl|xxl}mba hanaovana vondrona lisitra mitsivalana manomboka amin'io toerana fiatoana io min-width. Amin'izao fotoana izao dia tsy azo ampifandraisina amin'ny vondrona lisitra mitsivalana.

ProTip: Te hitovy sakan'ny lisitry ny singa vondrona rehefa mitsivalana? Ampio .flex-fillisaky ny singa vondrona lisitra.

  • Zavatra iray
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra iray
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra iray
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra iray
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra iray
  • Zavatra faharoa
  • Singa fahatelo
  • Zavatra iray
  • Zavatra faharoa
  • Singa fahatelo
<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>

Kilasy ara-tantara

Mampiasà kilasy contextual mba hamolavolana ny lisitry ny zavatra miaraka amin'ny loko sy loko.

  • Singa vondrona lisitra default tsotra
  • Zavatra vondrona lisitra voalohany tsotra
  • Zavatra vondrona lisitra faharoa tsotra
  • Lisitry ny lisitry ny fahombiazana tsotra
  • Zavatra vondrona lisitra loza tsotra
  • Zavatra vondrona lisitra fampitandremana tsotra
  • Zavatra vondrona lisitra tsotsotra
  • Zavatra vondrona lisitra maivana tsotra
  • Zavatra vondrona lisitra maizina tsotra
<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>

Ny kilasy contextual dia miasa miaraka amin'ny .list-group-item-action. Mariho ny fanampim-panazavana amin'ireo fomba fanatodizana eto tsy hita amin'ny ohatra teo aloha. Tohanana ihany koa ny .activefanjakana; ampiharo izany mba hanondro safidy mavitrika amin'ny singa vondrona lisitra contextual.

Singa vondrona lisitra default tsotra Zavatra vondrona lisitra voalohany tsotra Zavatra vondrona lisitra faharoa tsotra Lisitry ny lisitry ny fahombiazana tsotra Zavatra vondrona lisitra loza tsotra Zavatra vondrona lisitra fampitandremana tsotra Zavatra vondrona lisitra tsotsotra Zavatra vondrona lisitra maivana tsotra Zavatra vondrona lisitra maizina tsotra 
<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>
Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .visually-hiddenkilasy.

Miaraka amin'ny badge

Manampia marika amin'ny singa vondrona lisitra mba hampisehoana ny isa tsy novakiana, ny hetsika ary ny maro hafa miaraka amin'ny fanampian'ny fitaovana sasany .

  • Zavatra lisitra14
  • Zavatra lisitra faharoa2
  • Zavatra lisitra fahatelo1 
<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>

atiny manokana

Ampio saika HTML rehetra ao anatiny, eny fa na dia ho an'ny vondrona lisitra mifandray toy ny etsy ambany aza, miaraka amin'ny fanampian'ny flexbox utility .

Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izay

Ny votoatin'ny placeholder sasany ao anaty fehintsoratra iray.

Ary misy pirinty kely.
Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izay

Ny votoatin'ny placeholder sasany ao anaty fehintsoratra iray.

Ary misy printy kely mangina.
Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izay

Ny votoatin'ny placeholder sasany ao anaty fehintsoratra iray.

Ary misy printy kely mangina. 
<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>

Boxes sy radios

Apetraho ao anatin'ny lisitry ny entana ao anaty lisitra ny boaty sy radio an'ny Bootstrap ary amboary araka izay ilaina. Azonao atao ny mampiasa azy ireo tsy misy <label>s, saingy tadidio azafady ny mampiditra aria-labeltoetra sy sanda ho an'ny fidirana.

  • Boaty voalohany
  • boaty fanindroany
  • Famaritana fahatelo
  • boaty fanefatra
  • boaty fanidy
<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>

Ary raha tianao <label>ny .list-group-itemho an'ny faritra voadona lehibe dia azonao atao koa izany.

<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

hiovaova

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

Mixins

Ampiasaina miaraka amin'ny $theme-colorsfamoronana kilasy variana contextual ho an'ny .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;
      }
    }
  }
}

manome fitoerana

Loop izay mamorona kilasy modifier miaraka amin'ny 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);
}

Fihetsika JavaScript

Ampiasao ny plugin JavaScript kiheba—ampidiro tsirairay izany na amin'ny alàlan'ny bootstrap.jsrakitra natambatra—mba hanitarana ny vondrona lisitray mba hamoronana takelaka misy tabilao misy votoaty eo an-toerana.

Ny votoatin'ny toerana sasany ao amin'ny fehintsoratra mifandraika amin'ny "Trano". Ary votoaty hafa, ampiasaina eto fotsiny mba hamenoana sy hamenoana ity takelaka tabilao ity. Amin'ny famokarana, mazava ho azy fa hanana votoaty tena izy eto ianao. Ary tsy lahatsoratra fotsiny. Mety ho na inona na inona, tena. Lahatsoratra, sary, endrika.

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>

Mampiasa ny angona toetra

Azonao atao ny manetsika ny fitetezana vondrona lisitra nefa tsy manoratra JavaScript amin'ny alàlan'ny famaritana fotsiny data-bs-toggle="list"na amin'ny singa iray. Ampiasao amin'ny .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>

Amin'ny JavaScript

Alefaso amin'ny alalan'ny JavaScript ny singa lisitry ny tabilao (mila ampihetsika tsirairay ny singa lisitra tsirairay):

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

Azonao atao ny manetsika ny singa lisitra tsirairay amin'ny fomba maro:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Fade effect

Mba hahatonga ny tontonana hanjavona, ampio .fadeny tsirairay .tab-pane. Ny takelaka tabilao voalohany dia tsy maintsy .showmanao ny atiny voalohany ho hita ihany koa.

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

fomba

constructor

Mampihetsika singa iray amin'ny lisitra sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-bs-targetkendrena hrefny node container ao amin'ny 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>

FAMPISEHOANA

Mifidy ny lisitra nomena ary mampiseho ny tontonana mifandray aminy. Ny singa lisitra hafa izay nofantenana teo aloha dia lasa tsy voafantina ary nafenina ny tontonana mifandraika aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (ohatra, alohan'ny shown.bs.tabhitrangan'ny hetsika).

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

  tab.show()

Ario

Manimba ny tabilao misy singa.

getInstance

Fomba static izay ahafahanao mahazo ny ohatra tabilao mifandray amin'ny singa DOM

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

getOrCreateInstance

Fomba static izay ahafahanao mahazo ny ohatra tabilao mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany

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

zava-mitranga

Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:

  1. hide.bs.tab(amin'ny tabilao mavitrika ankehitriny)
  2. show.bs.tab(eo amin'ny tabilao haseho)
  3. hidden.bs.tab(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tabhetsika)
  4. shown.bs.tab(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'ny show.bs.tabhetsika)

Raha tsy misy kiheba efa navitrika, dia tsy hodorana ny hetsika ary hide.bs.tab.hidden.bs.tab

Karazana hetsika Description
show.bs.tab Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
shown.bs.tab Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
hide.bs.tab Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika ankehitriny sy ny tabilao vaovao tsy ho ela.
hidden.bs.tab Mirehitra ity hetsika ity rehefa miseho ny tabilao vaovao (ary noho izany dia afenina ny tabilao mavitrika teo aloha). Ampiasao event.targetsy event.relatedTargetikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao. 
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
  })
}