Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Ilista ang grupo

Ang mga grupo sa lista usa ka flexible ug kusgan nga sangkap alang sa pagpakita sa usa ka serye sa sulud. Usba ug i-extend kini aron masuportahan ang bisan unsang sulud sa sulod.

Niini nga panid

Panguna nga pananglitan

Ang labing sukaranan nga grupo sa lista mao ang usa ka dili han-ay nga lista nga adunay mga butang sa lista ug ang tukma nga mga klase. Pagtukod niini uban sa mga kapilian nga nagsunod, o sa imong kaugalingon nga CSS kung gikinahanglan.

  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Ang ikaupat nga butang
  • Ug ang ikalima
<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>

Aktibo nga mga butang

Idugang .activesa a .list-group-itemaron ipakita ang kasamtangan nga aktibo nga pagpili.

  • Usa ka aktibo nga butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Ang ikaupat nga butang
  • Ug ang ikalima
<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>

Mga butang nga nabaldado

Idugang .disabledsa usa .list-group-itemaron kini makita nga disabled. Timan-i nga ang pipila ka mga elemento nga adunay .disabledkinahanglan usab nga naandan nga JavaScript aron hingpit nga ma-disable ang ilang mga panghitabo sa pag-klik (pananglitan, mga link).

  • Usa ka butang nga nabaldado
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Ang ikaupat nga butang
  • Ug ang ikalima
<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>

Gamita <a>ang s o <button>s sa paghimo og aksyon nga listahan nga mga butang sa grupo nga adunay hover, disabled, ug aktibo nga estado pinaagi sa pagdugang .list-group-item-action. Among gilain kining mga pseudo-class aron maseguro nga ang mga grupo sa listahan nga hinimo sa dili interactive nga mga elemento (sama <li>sa s o <div>s) dili makahatag og click o tap affordance.

Siguroha nga dili gamiton ang mga standard nga .btnklase dinhi .

Ang kasamtangan nga link item Usa ka ikaduhang link nga butang Usa ka ikatulo nga link nga butang Ika-upat nga link nga butang Usa ka disabled link item 
<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>

Uban <button>sa s, mahimo usab nimo gamiton ang disabledhiyas imbes nga .disabledklase. Ikasubo, <a>s wala mosuporta sa disabled attribute.

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

Flush

Idugang .list-group-flusharon tangtangon ang pipila ka mga utlanan ug mga lingin nga mga kanto aron ma-render ang mga butang sa lista sa grupo nga magkagidlay sa usa ka sudlanan sa ginikanan (pananglitan, mga kard).

  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Ang ikaupat nga butang
  • Ug ang ikalima
<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>

Ginumero

Idugang ang .list-group-numberedklase sa modifier (ug opsyonal nga gamiton ang usa ka <ol>elemento) aron makapili sa mga butang nga gi-numero nga lista sa grupo. Ang mga numero gihimo pinaagi sa CSS (sukwahi sa usa ka <ol>default browser styling) para sa mas maayo nga pagbutang sulod sa listahan nga mga butang sa grupo ug sa pagtugot alang sa mas maayo nga customization.

Ang mga numero gihimo pinaagi counter-resetsa sa <ol>, ug dayon gi-istilo ug gibutang sa usa ka ::beforepseudo-element sa <li>uban sa counter-incrementug content.

  1. Usa ka butang sa listahan
  2. Usa ka butang sa listahan
  3. Usa ka butang sa listahan
<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>

Nindot kini nga trabaho sa naandan nga sulud usab.

  1. Subheading
    Kontento para sa listahan nga butang
    14
  2. Subheading
    Kontento para sa listahan nga butang
    14
  3. Subheading
    Kontento para sa listahan nga butang
    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>

Pahigda

Idugang .list-group-horizontalaron usbon ang layout sa listahan sa mga butang sa grupo gikan sa bertikal ngadto sa pinahigda sa tanang breakpoints. Sa laing bahin, pagpili og usa ka responsive nga variant .list-group-horizontal-{sm|md|lg|xl|xxl}aron paghimo sa usa ka listahan nga grupo nga pinahigda sugod sa breakpoint's min-width. Sa pagkakaron ang pinahigda nga listahan nga mga grupo dili mahimong ikombinar sa mga flush list nga mga grupo.

ProTip: Gusto sa parehas nga gilapdon nga mga butang sa lista sa grupo kung pinahigda? Idugang .flex-fillsa matag listahan nga butang sa grupo.

  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
<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>

Mga klase sa konteksto

Gamita ang mga klase sa konteksto sa pag-istilo sa mga butang sa listahan nga adunay stateful nga background ug kolor.

  • Usa ka yano nga default nga butang sa lista sa grupo
  • Usa ka yano nga nag-unang butang nga lista sa grupo
  • Usa ka yano nga sekondaryang listahan sa grupo nga butang
  • Usa ka yano nga lista sa kalampusan nga butang sa grupo
  • Usa ka yano nga butang sa lista sa peligro nga grupo
  • Usa ka yano nga lista sa pasidaan nga butang sa grupo
  • Usa ka yano nga butang sa lista sa impormasyon nga grupo
  • Usa ka yano nga light list nga butang sa grupo
  • Usa ka yano nga mangitngit nga butang nga lista sa grupo
<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>

Ang mga klase sa konteksto nagtrabaho usab sa .list-group-item-action. Matikdi ang pagdugang sa mga estilo sa hover dinhi nga wala sa miaging pananglitan. Gisuportahan usab ang .activeestado; gamita kini aron ipakita ang usa ka aktibo nga pagpili sa usa ka butang sa grupo sa listahan sa konteksto.

Usa ka yano nga default nga butang sa lista sa grupo Usa ka yano nga nag-unang butang nga lista sa grupo Usa ka yano nga sekondaryang listahan sa grupo nga butang Usa ka yano nga lista sa kalampusan nga butang sa grupo Usa ka yano nga butang sa lista sa peligro nga grupo Usa ka yano nga lista sa pasidaan nga butang sa grupo Usa ka yano nga butang sa lista sa impormasyon nga grupo Usa ka yano nga light list nga butang sa grupo Usa ka yano nga mangitngit nga butang nga lista sa grupo 
<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>
Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.

Uban sa mga badge

Idugang ang mga badge sa bisan unsang butang sa lista sa grupo aron ipakita ang wala pa mabasa nga mga ihap, kalihokan, ug uban pa sa tabang sa pipila ka mga utilities .

  • Usa ka butang sa listahan14
  • Usa ka ikaduha nga butang sa lista2
  • Ang ikatulo nga butang sa lista1 
<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>

Custom nga sulod

Idugang ang halos bisan unsang HTML sa sulod, bisan sa mga grupo nga nalambigit sa listahan sama sa ubos, uban sa tabang sa flexbox utilities .

Ilista ang ulohan nga butang sa grupo
3 ka adlaw ang milabay

Pipila ka sulod sa placeholder sa usa ka paragraph.

Ug gamay nga pag-imprinta.
Ilista ang ulohan nga butang sa grupo
3 ka adlaw ang milabay

Pipila ka sulod sa placeholder sa usa ka paragraph.

Ug ang uban gipahilom gamay nga pag-imprinta.
Ilista ang ulohan nga butang sa grupo
3 ka adlaw ang milabay

Pipila ka sulod sa placeholder sa usa ka paragraph.

Ug ang uban gipahilom gamay nga pag-imprinta. 
<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>

Mga checkbox ug radyo

Ibutang ang mga checkbox ug radyo sa Bootstrap sulod sa listahan sa mga butang sa grupo ug ipasibo kon gikinahanglan. Mahimo nimo kining gamiton nga walay <label>s, apan palihug hinumdomi nga ilakip ang usa ka aria-labelhiyas ug bili alang sa accessibility.

  • Unang checkbox
  • Ikaduha nga checkbox
  • Ikatulo nga checkbox
  • Ikaupat nga checkbox
  • Ikalima nga checkbox
<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>

Ug kung gusto nimo <label>ang .list-group-itemalang sa dagkong mga lugar nga naigo, mahimo nimo kana, usab.

<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

Mga variable

$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

Gigamit sa kombinasyon $theme-colorssa pagmugna sa mga klase sa variant sa konteksto para .list-group-itemsa s.

@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 nga nagmugna sa mga klase sa modifier nga adunay 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);
}

Panggawi sa JavaScript

Gamita ang tab nga JavaScript plugin—ilakip kini sa tagsa-tagsa o ​​pinaagi sa gihugpong bootstrap.jsnga payl—aron i-extend ang among listahan nga grupo aron makahimo og tabable pane sa lokal nga content.

Pipila ka sulod sa placeholder sa usa ka paragraph nga may kalabutan sa "Balay". Ug ang uban pa nga sulud, gigamit dinhi aron lang mapuno ug pun-on kini nga tab panel. Sa produksiyon, klaro nga adunay ka labi ka tinuod nga sulud dinhi. Ug dili lang sa text. Kini mahimong bisan unsa, sa tinuod. Teksto, mga hulagway, mga porma.

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>

Paggamit sa mga hiyas sa datos

Mahimo nimong i-aktibo ang usa ka nabigasyon sa lista sa grupo nga wala nagsulat bisan unsang JavaScript pinaagi lamang sa pagpiho data-bs-toggle="list"o sa usa ka elemento. Gamita kini nga mga hiyas sa datos sa .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>

Pinaagi sa JavaScript

I-enable ang tabbable list item pinaagi sa JavaScript (matag list item kinahanglan nga i-activate sa tagsa-tagsa):

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

Mahimo nimong ma-aktibo ang indibidwal nga butang sa lista sa daghang mga paagi:

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

Pagkawala nga epekto

Aron mawala ang mga tab panel, idugang .fadeang matag .tab-pane. Ang una nga tab pane kinahanglan usab .shownga maghimo sa una nga sulud nga makita.

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

Pamaagi

constructor

Nag-aktibo sa usa ka elemento sa lista nga butang ug sulud sa sulud. Ang tab kinahanglan adunay usa data-bs-targeto usa ka hreftarget sa usa ka sudlanan nga node sa 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>

ipakita

Gipili ang gihatag nga butang sa lista ug gipakita ang kauban nga pane niini. Ang bisan unsang ubang butang sa lista nga napili kaniadto mahimong dili mapili ug ang kauban nga pane niini gitago. Mibalik sa nagtawag sa wala pa ipakita ang tab pane (pananglitan, sa wala pa shown.bs.tabmahitabo ang panghitabo).

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

  tab.show()

ilabay

Giguba ang tab sa usa ka elemento.

getInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa tab nga pananglitan nga may kalabutan sa usa ka elemento sa DOM

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

getOrCreateInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa tab nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.

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

Mga panghitabo

Kung nagpakita ug bag-ong tab, ang mga panghitabo mobuto sa mosunod nga han-ay:

  1. hide.bs.tab(sa kasamtangan nga aktibo nga tab)
  2. show.bs.tab(sa tab nga ipakita)
  3. hidden.bs.tab(sa miaging aktibo nga tab, parehas sa alang sa hide.bs.tabpanghitabo)
  4. shown.bs.tab(sa bag-ong-aktibo nga bag-o lang gipakita nga tab, parehas sa alang sa show.bs.tabpanghitabo)

Kung walay tab nga aktibo na, ang hide.bs.tabug ang hidden.bs.tabmga panghitabo dili ipabuto.

Uri sa panghitabo Deskripsyon
show.bs.tab Kini nga panghitabo nagdilaab sa tab show, apan sa wala pa ipakita ang bag-ong tab. Gamita event.targetug event.relatedTargeti-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
shown.bs.tab Kini nga panghitabo nagdilaab sa tab show pagkahuman gipakita ang usa ka tab. Gamita event.targetug event.relatedTargeti-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
hide.bs.tab Kini nga panghitabo mobuto kung ang usa ka bag-ong tab ipakita (ug sa ingon ang miaging aktibo nga tab kinahanglan itago). Gamita event.targetug event.relatedTargeti-target ang kasamtangan nga aktibo nga tab ug ang bag-o nga dili madugay nga mahimong aktibo nga tab, matag usa.
hidden.bs.tab Kini nga panghitabo nagdilaab human ang usa ka bag-ong tab gipakita (ug sa ingon ang miaging aktibo nga tab gitago). Gamita event.targetug event.relatedTargeti-target ang miaging aktibo nga tab ug ang bag-ong aktibo nga tab, matag usa. 
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
  })
}