Luncat ka eusi utama Luncat ka navigasi docs
in English

Daptar grup

Daptar grup mangrupakeun komponén fléksibel tur kuat pikeun mintonkeun runtuyan eusi. Robah sareng manjangkeunana pikeun ngadukung naon waé eusi anu aya.

Dina kaca ieu

conto dasar

Grup daptar paling dasar mangrupa daptar unordered kalawan daptar item jeung kelas ditangtoskeun. Ngawangun kana éta kalayan pilihan anu nuturkeun, atanapi nganggo CSS anjeun nyalira upami diperyogikeun.

  • Hiji barang
  • Barang kadua
  • Item katilu
  • Item kaopat
  • Sareng anu kalima
<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>

Item aktip

Tambahkeun .activeka a .list-group-itempikeun nunjukkeun pilihan aktip ayeuna.

  • Hiji item aktip
  • Barang kadua
  • Item katilu
  • Item kaopat
  • Sareng anu kalima
<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>

Item ditumpurkeun

Tambahkeun .disabledka a .list-group-itemsangkan eta némbongan ditumpurkeun. Catet yén sababaraha elemen .disabledogé bakal meryogikeun JavaScript khusus pikeun nganonaktipkeun acara klikna (contona, tautan).

  • Hiji item ditumpurkeun
  • Barang kadua
  • Item katilu
  • Item kaopat
  • Sareng anu kalima
<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>

Anggo <a>s atanapi <button>s pikeun nyiptakeun item grup daptar anu tiasa dipilampah kalayan kaayaan hover, ditumpurkeun, sareng aktip ku cara nambahkeun .list-group-item-action. Urang misahkeun pseudo-kelas ieu pikeun mastikeun grup daptar dijieunna tina elemen non-interaktif (kawas <li>s atawa <div>s) teu nyadiakeun hiji klik atawa ketok affordance.

Pastikeun pikeun henteu nganggo kelas standar .btndi dieu .

Item link ayeuna Hiji item link kadua Hiji item link katilu Hiji item link kaopat Hiji item link ditumpurkeun 
<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>

Kalayan <button>s, anjeun ogé tiasa ngamangpaatkeun disabledatribut tinimbang .disabledkelas. Sedih, <a>s teu ngarojong atribut ditumpurkeun.

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

Siram

Tambahkeun .list-group-flushpikeun miceun sababaraha wates jeung juru rounded pikeun nyieun daptar item grup ujung-ka-ujung dina wadah indungna (misalna kartu).

  • Hiji barang
  • Barang kadua
  • Item katilu
  • Item kaopat
  • Sareng anu kalima
<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>

Dinomerkeun

Tambahkeun .list-group-numberedkelas modifier (sareng opsional nganggo <ol>unsur) pikeun milih kana item grup daptar wilanganana. Angka dihasilkeun via CSS (sabalikna <ol>s standar browser styling) pikeun panempatan hadé dina daptar item grup na pikeun ngidinan pikeun kustomisasi hadé.

Angka dihasilkeun ku counter-resetdina <ol>, lajeng styled sarta disimpen ku ::beforepseudo-unsur dina <li>kalawan counter-incrementjeung content.

  1. Hiji item daptar
  2. Hiji item daptar
  3. Hiji item daptar
<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>

Ieu dianggo hébat sareng kontén khusus ogé.

  1. Subjudul
    Eusi pikeun item daptar
    14
  2. Subjudul
    Eusi pikeun item daptar
    14
  3. Subjudul
    Eusi pikeun item daptar
    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>

Horizontal

Tambahkeun .list-group-horizontalpikeun ngarobah tata perenah daptar item grup tina vertikal ka horizontal sakuliah sakabéh breakpoints. Alternatipna, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl|xxl}pikeun nyieun grup daptar horizontal dimimitian dina breakpoint éta min-width. Ayeuna grup daptar horizontal teu bisa digabungkeun jeung grup daptar siram.

ProTip: Hoyong item grup daptar lebar sarua nalika horizontal? Tambahkeun .flex-fillka unggal item grup daptar.

  • Hiji barang
  • Barang kadua
  • Item katilu
  • Hiji barang
  • Barang kadua
  • Item katilu
  • Hiji barang
  • Barang kadua
  • Item katilu
  • Hiji barang
  • Barang kadua
  • Item katilu
  • Hiji barang
  • Barang kadua
  • Item katilu
  • Hiji barang
  • Barang kadua
  • Item katilu
<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>

Kelas kontekstual

Anggo kelas kontekstual pikeun ngagayakeun daptar barang kalayan latar sareng warna anu stateful.

  • Hiji item grup daptar standar basajan
  • Hiji item grup daptar primér basajan
  • Item grup daptar sekundér basajan
  • Hiji item grup daptar kasuksésan basajan
  • Hiji item grup bahaya basajan
  • Hiji daptar warning item group basajan
  • Hiji item grup daptar info basajan
  • Hiji item grup daptar lampu basajan
  • Hiji item grup daptar poék basajan
<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>

Kelas kontekstual ogé dianggo sareng .list-group-item-action. Catet tambahan gaya hover di dieu henteu aya dina conto sateuacana. Ogé dirojong nyaéta .activenagara; Larapkeunana pikeun nunjukkeun pilihan aktip dina item grup daptar kontekstual.

Hiji item grup daptar standar basajan Hiji item grup daptar primér basajan Item grup daptar sekundér basajan Hiji item grup daptar kasuksésan basajan Hiji item grup bahaya basajan Hiji daptar warning item group basajan Hiji item grup daptar info basajan Hiji item grup daptar lampu basajan Hiji item grup daptar poék basajan 
<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>
Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .visually-hiddenkelas.

Kalawan badges

Tambihkeun lencana kana item grup daptar naon waé pikeun nunjukkeun jumlah anu henteu dibaca, kagiatan, sareng seueur deui kalayan bantosan sababaraha utilitas .

  • Hiji item daptar14
  • Hiji item daptar kadua2
  • Item daptar katilu1 
<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>

eusi custom

Tambahkeun ampir sagala HTML dina, sanajan keur grup daptar numbu kawas hiji di handap, kalayan bantuan flexbox utiliti .

Daptar judul item grup
3 poé katukang

Sababaraha eusi pananda tempat dina paragraf.

Jeung sababaraha print leutik.
Daptar judul item grup
3 poé katukang

Sababaraha eusi pananda tempat dina paragraf.

Jeung sababaraha muted print leutik.
Daptar judul item grup
3 poé katukang

Sababaraha eusi pananda tempat dina paragraf.

Jeung sababaraha muted print leutik. 
<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>

Kotak centang jeung radio

Tempatkeun kotak centang sareng radio Bootstrap dina daptar item grup sareng saluyukeun upami diperyogikeun. Anjeun tiasa make eta tanpa <label>s, tapi punten inget kana ngawengku hiji aria-labelatribut jeung nilai pikeun diakses.

  • Kotak centang munggaran
  • Kotak centang kadua
  • Kotak centang katilu
  • Kotak centang kaopat
  • Kotak centang kalima
<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>

Tur upami Anjeun salah hoyong <label>s salaku .list-group-itempikeun wewengkon hit badag, Anjeun tiasa ngalakukeun éta, teuing.

<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

Variabel

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

Campuran

Dipaké dina kombinasi jeung $theme-colorskeur ngahasilkeun kelas varian kontekstual pikeun .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;
      }
    }
  }
}

Gelung

Loop anu ngahasilkeun kelas modifier sareng 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);
}

kabiasaan JavaScript

Anggo plugin tab JavaScript-kalebetkeun éta nyalira atanapi ngalangkungan bootstrap.jsfile anu disusun-pikeun manjangkeun grup daptar kami pikeun nyiptakeun panel tabable tina eusi lokal.

Sababaraha eusi pananda tempat dina paragraf anu aya hubunganana sareng "Imah". Jeung sababaraha eusi deui, dipaké di dieu ngan pikeun Pad kaluar sarta eusian panel tab ieu. Dina produksi, anjeun écés bakal gaduh eusi langkung nyata di dieu. Jeung teu ngan téks. Bisa jadi nanaon, bener. Téks, gambar, formulir.

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>

Ngagunakeun atribut data

Anjeun tiasa ngaktipkeun navigasi grup daptar tanpa nulis JavaScript ku saukur nangtukeun data-bs-toggle="list"atawa dina unsur. Paké atribut data ieu dina .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>

Ngaliwatan JavaScript

Aktipkeun item daptar tabbable via JavaScript (unggal daptar item kudu diaktipkeun individual):

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

Anjeun tiasa ngaktipkeun item daptar individu ku sababaraha cara:

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

Pangaruh luntur

Pikeun nyieun panel tab luntur, tambahkeun .fadeka unggal .tab-pane. Panel tab munggaran ogé kedah .showngajantenkeun eusi awal katingali.

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

Métode

constructor

Aktipkeun unsur daptar item sareng wadah eusi. Tab kedah gaduh data-bs-targetatanapi hrefnargétkeun titik wadah dina 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>

nempokeun

Milih item daptar anu dipasihkeun sareng nunjukkeun jandela anu aya hubunganana. Sakur item daptar sejenna nu saméméhna dipilih jadi teu dipilih jeung jandela pakait na disumputkeun. Mulih ka nu nelepon saméméh panel tab sabenerna geus ditémbongkeun (contona, saméméh shown.bs.tabacara lumangsung).

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

  tab.show()

miceun

Ngancurkeun tab unsur.

getInstance

Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto tab anu aya hubunganana sareng unsur DOM

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

getOrCreateInstance

Métode statik anu ngamungkinkeun anjeun kéngingkeun conto tab anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami henteu diinisialisasi.

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

Kajadian

Nalika ningalikeun tab anyar, kajadian-kajadian hurung dina urutan ieu:

  1. hide.bs.tab(dina tab aktip ayeuna)
  2. show.bs.tab(dina tab anu bakal dipidangkeun)
  3. hidden.bs.tab(dina tab aktip saméméhna, sarua jeung pikeun hide.bs.tabacara)
  4. shown.bs.tab(dina tab anu nembé ditingalikeun, sami sareng show.bs.tabacara)

Upami teu aya tab anu parantos aktip, acara hide.bs.tabsareng hidden.bs.tabacara moal dipecat.

Jenis acara Katerangan
show.bs.tab Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
shown.bs.tab Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
hide.bs.tab Kajadian ieu hurung nalika tab anyar bakal ditingalikeun (sahingga tab aktip saméméhna bakal disumputkeun). Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip anu ayeuna sareng tab anu énggal-énggal aktip, masing-masing.
hidden.bs.tab Kajadian ieu hurung saatos tab énggal ditampilkeun (sahingga tab aktip sateuacana disumputkeun). Anggo event.targetsareng event.relatedTargetnargétkeun tab aktip sateuacana sareng tab aktip énggal, masing-masing. 
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
  })
}