Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

Listahan ng pangkat

Ang mga pangkat ng listahan ay isang nababaluktot at makapangyarihang bahagi para sa pagpapakita ng isang serye ng nilalaman. Baguhin at palawigin ang mga ito upang suportahan ang halos anumang nilalaman sa loob.

Sa pahinang ito

Pangunahing halimbawa

Ang pinakapangunahing pangkat ng listahan ay isang hindi nakaayos na listahan na may mga listahan ng mga item at mga wastong klase. Buuin ito gamit ang mga sumusunod na opsyon, o gamit ang iyong sariling CSS kung kinakailangan.

  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
  • Pang-apat na item
  • At ang panglima
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>

Mga aktibong item

Idagdag .activesa a .list-group-itemupang isaad ang kasalukuyang aktibong pagpili.

  • Isang aktibong item
  • Ang pangalawang item
  • Pangatlong item
  • Pang-apat na item
  • At ang panglima
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>

Mga item na hindi pinagana

Idagdag .disabledsa isang .list-group-itempara magmukhang hindi pinagana. Tandaan na ang ilang elemento na may .disableday mangangailangan din ng custom na JavaScript upang ganap na hindi paganahin ang kanilang mga kaganapan sa pag-click (hal, mga link).

  • Isang item na hindi pinagana
  • Ang pangalawang item
  • Pangatlong item
  • Pang-apat na item
  • At ang panglima
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>

Gumamit ng <a>s o <button>s upang lumikha ng mga naaaksyunan na mga item ng pangkat ng listahan na may hover, naka-disable, at aktibong estado sa pamamagitan ng pagdaragdag ng .list-group-item-action. Pinaghihiwalay namin ang mga pseudo-class na ito upang matiyak na ang mga pangkat ng listahan na gawa sa mga hindi interactive na elemento (tulad ng mga <li>s o <div>s) ay hindi nagbibigay ng isang click o tap affordance.

Tiyaking hindi gagamitin ang mga karaniwang .btnklase dito .

Ang kasalukuyang link item Isang pangalawang link na item Isang pangatlong link na item Pang-apat na link na item Isang naka-disable na item sa link
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>

Sa <button>s, maaari mo ring gamitin ang disabledkatangian sa halip na ang .disabledklase. Nakalulungkot, <a>hindi sinusuportahan ng s ang hindi pinaganang katangian.

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>

Flush

Idagdag .list-group-flushupang alisin ang ilang mga hangganan at mga bilugan na sulok upang mag-render ng mga item ng listahan ng pangkat na magkatabi sa isang lalagyan ng magulang (hal., mga card).

  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
  • Pang-apat na item
  • At ang panglima
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>

May bilang

Idagdag ang .list-group-numberedklase ng modifier (at opsyonal na gumamit ng <ol>elemento) para mag-opt in sa mga item ng pangkat na may bilang na listahan. Binubuo ang mga numero sa pamamagitan ng CSS (kumpara sa <ol>default na pag-istilo ng browser) para sa mas mahusay na pagkakalagay sa loob ng mga item ng listahan ng pangkat at upang payagan ang mas mahusay na pag-customize.

Binubuo ang mga numero sa pamamagitan ng counter-reseton the <ol>, at pagkatapos ay i-istilo at inilagay na may ::beforepseudo-element sa <li>may counter-incrementat content.

  1. Isang item sa listahan
  2. Isang item sa listahan
  3. Isang item sa listahan
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>

Ang mga ito ay mahusay na gumagana sa custom na nilalaman pati na rin.

  1. Subheading
    Nilalaman para sa listahan ng item
    14
  2. Subheading
    Nilalaman para sa listahan ng item
    14
  3. Subheading
    Nilalaman para sa listahan ng item
    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>

Pahalang

Idagdag .list-group-horizontalupang baguhin ang layout ng mga item ng pangkat ng listahan mula patayo patungo sa pahalang sa lahat ng breakpoint. Bilang kahalili, pumili ng tumutugong variant .list-group-horizontal-{sm|md|lg|xl|xxl}upang gawing pahalang ang isang pangkat ng listahan simula sa breakpoint na iyon min-width. Sa kasalukuyan , ang mga pahalang na pangkat ng listahan ay hindi maaaring isama sa mga flush na pangkat ng listahan.

ProTip: Gusto ng pantay na lapad ng mga item ng pangkat ng listahan kapag pahalang? Idagdag .flex-fillsa bawat item sa listahan ng pangkat.

  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
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>

Mga klase sa konteksto

Gumamit ng mga klase sa konteksto upang mag-istilo ng mga item sa listahan na may stateful na background at kulay.

  • Isang simpleng default na item ng pangkat ng listahan
  • Isang simpleng pangunahing item ng pangkat ng listahan
  • Isang simpleng pangalawang item ng pangkat ng listahan
  • Isang simpleng item ng pangkat ng listahan ng tagumpay
  • Isang simpleng item ng pangkat ng listahan ng panganib
  • Isang simpleng item ng pangkat ng listahan ng babala
  • Isang simpleng item ng pangkat ng listahan ng impormasyon
  • Isang simpleng light list group item
  • Isang simpleng item ng dark list group
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>

Gumagana rin ang mga klase sa konteksto ng .list-group-item-action. Pansinin ang pagdaragdag ng mga istilo ng hover dito na wala sa nakaraang halimbawa. Sinusuportahan din ang .activeestado; ilapat ito upang ipahiwatig ang isang aktibong pagpili sa isang item ng pangkat ng listahan ng konteksto.

Isang simpleng default na item ng pangkat ng listahan Isang simpleng pangunahing item ng pangkat ng listahan Isang simpleng pangalawang item ng pangkat ng listahan Isang simpleng item ng pangkat ng listahan ng tagumpay Isang simpleng item ng pangkat ng listahan ng panganib Isang simpleng item ng pangkat ng listahan ng babala Isang simpleng item ng pangkat ng listahan ng impormasyon Isang simpleng light list group item Isang simpleng item ng dark list group
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>
Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .visually-hiddenklase.

May mga badge

Magdagdag ng mga badge sa anumang item sa listahan ng pangkat upang ipakita ang mga hindi pa nababasang bilang, aktibidad, at higit pa sa tulong ng ilang mga utility .

  • Isang item sa listahan14
  • Ang pangalawang item sa listahan2
  • Ang ikatlong item sa listahan1
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>

Custom na nilalaman

Magdagdag ng halos anumang HTML sa loob, kahit para sa mga naka-link na grupo ng listahan tulad ng nasa ibaba, sa tulong ng mga flexbox utilities .

Ilista ang heading ng item ng pangkat
3 araw ang nakalipas

Ilang placeholder na nilalaman sa isang talata.

At ilang maliit na letra.
Ilista ang heading ng item ng pangkat
3 araw ang nakalipas

Ilang placeholder na nilalaman sa isang talata.

At ilang naka-mute na maliit na letra.
Ilista ang heading ng item ng pangkat
3 araw ang nakalipas

Ilang placeholder na nilalaman sa isang talata.

At ilang naka-mute na maliit na letra.
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>

Mga checkbox at radyo

Ilagay ang mga checkbox at radyo ng Bootstrap sa loob ng mga item ng pangkat ng listahan at i-customize kung kinakailangan. Maaari mong gamitin ang mga ito nang walang <label>s, ngunit mangyaring tandaan na magsama aria-labelng katangian at halaga para sa pagiging naa-access.

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>
html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Maaari mong gamitin ang .stretched-linkon <label>s upang gawing naki-click ang buong item ng listahan ng pangkat.

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

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na diskarte sa mga variable ng CSS ng Bootstrap, ang mga pangkat ng listahan ay gumagamit na ngayon ng mga lokal na variable ng CSS .list-grouppara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

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

Sass 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

Ginagamit kasabay $theme-colorsng upang makabuo ng mga klase ng variant sa konteksto para 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 na bumubuo ng mga klase ng modifier gamit ang 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);
}

Pag-uugali ng JavaScript

Gamitin ang plugin ng tab na JavaScript—isama ito nang isa-isa o sa pamamagitan ng pinagsama bootstrap.js-samang file—upang palawigin ang aming pangkat ng listahan upang lumikha ng mga tabable na pane ng lokal na nilalaman.

Ilang placeholder na content sa isang talata na nauugnay sa "Home". At ilang higit pang nilalaman, na ginagamit dito para lang i-pad out at punan ang tab panel na ito. Sa produksyon, malinaw na magkakaroon ka ng mas totoong nilalaman dito. At hindi lang basta text. Maaaring kahit ano, talaga. Teksto, mga larawan, mga form.

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 ng mga katangian ng data

Maaari mong i-activate ang isang nabigasyon ng pangkat ng listahan nang hindi nagsusulat ng anumang JavaScript sa pamamagitan lamang ng pagtukoy data-bs-toggle="list"o sa isang elemento. Gamitin ang mga katangian ng data na ito 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>

Sa pamamagitan ng JavaScript

Paganahin ang item sa listahan ng tabable sa pamamagitan ng JavaScript (kailangang isa-isang isaaktibo ang bawat item sa listahan):

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

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

Maaari mong i-activate ang indibidwal na item sa listahan sa maraming paraan:

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

Upang gawing fade in ang panel ng mga tab, idagdag .fadesa bawat isa .tab-pane. Ang unang tab pane ay dapat ding .showgawin ang unang nilalaman na nakikita.

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

Paraan

Mga asynchronous na pamamaraan at paglipat

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Activates your content as a tab element.

You can create a tab instance with the constructor, for example:

const bsTab = new bootstrap.Tab('#myTab')
Method Description
dispose Destroys an element’s tab.
getInstance Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: bootstrap.Tab.getInstance(element).
getOrCreateInstance Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Tab.getOrCreateInstance(element).
show Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tab event occurs).

Events

When showing a new tab, the events fire in the following order:

  1. hide.bs.tab (on the current active tab)
  2. show.bs.tab (on the to-be-shown tab)
  3. hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
  4. shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

Event type Description
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
show.bs.tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. 
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
  })
})