Holo i ka ʻike nui Holo i ka hoʻokele docs
in English

Papa papa inoa

ʻO nā pūʻulu papa inoa he mea maʻalahi a ikaika hoʻi no ka hōʻike ʻana i ke ʻano o ka ʻike. Hoʻololi a hoʻonui iā lākou e kākoʻo i nā ʻike āpau i loko.

Ma kēia ʻaoʻao

kumu hoʻohālike

ʻO ka pūʻulu papa inoa maʻamau he papa inoa ʻole me nā mea papa inoa a me nā papa kūpono. E kūkulu i luna me nā koho e pili ana, a i ʻole me kāu CSS ponoʻī e like me ka mea e pono ai.

  • He mea
  • He mea ʻelua
  • He mea kolu
  • He mea ʻehā
  • A ʻo ka ʻelima
<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>

Nā mea hana

Hoʻohui .activei kahi .list-group-iteme hōʻike i ke koho hana o kēia manawa.

  • He mea hana
  • He mea ʻelua
  • He mea kolu
  • He mea ʻehā
  • A ʻo ka ʻelima
<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>

Nā mea hoʻopale

Hoʻohui .disabledi kahi .list-group-itemi mea e ʻike ʻia ai ua pio . E hoʻomanaʻo, .disablede koi pū kekahi mau mea me ka JavaScript maʻamau e hoʻopau piha i kā lākou mau hanana kaomi (e laʻa, nā loulou).

  • He mea pio
  • He mea ʻelua
  • He mea kolu
  • He mea ʻehā
  • A ʻo ka ʻelima
<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>

E hoʻohana iā <a>s a i ʻole <button>s no ka hana ʻana i nā mea pūʻulu papa inoa hiki ke hoʻohana ʻia me ka hover, disable, a me nā mokuʻāina ikaika ma ka hoʻohui ʻana i.list-group-item-action . Hoʻokaʻawale mākou i kēia mau papa pseudo e hōʻoia i nā pūʻulu papa inoa i hana ʻia me nā mea pili ʻole (e like me <li>s a i ʻole <div>s) ʻaʻole e hāʻawi i kahi kaomi a paʻi paha.

Mai hoʻohana i nā .btnpapa maʻamau ma aneʻi .

Ka mea loulou i kēia manawa He mea loulou lua He mea loulou ekolu He mea loulou ʻehā He mea loulou i pio 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

Me <button>ka s, hiki iā ʻoe ke hoʻohana i ke disabledʻano ma mua o ka .disabledpapa. ʻO ka mea kaumaha, <a>ʻaʻole kākoʻo ʻo ia i ke ʻano kīnā.

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

Holoi

Hoʻohui .list-group-flushno ka wehe ʻana i kekahi mau palena a me nā kihi pōʻai no ka hoʻolilo ʻana i nā mea pūʻulu papa inoa ma kahi ʻaoʻao i kahi pahu makua (e laʻa, kāleka).

  • He mea
  • He mea ʻelua
  • He mea kolu
  • He mea ʻehā
  • A ʻo ka ʻelima
<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>

Heluhelu

E hoʻohui i ka .list-group-numberedpapa hoʻololi (a me ka hoʻohana ʻana i kahi <ol>mea) e koho i nā mea hui papa helu helu. Hoʻokumu ʻia nā helu ma o CSS (e kūʻē i ka <ol>styling browser paʻamau) no ka hoʻokomo maikaʻi ʻana i loko o nā mea pūʻulu papa inoa a e ʻae i ka hana maʻamau.

Hoʻokumu ʻia nā helu counter-resetma ka <ol>, a laila kāʻili ʻia a kau ʻia me kahi ::beforepseudo-element ma ka <li>me counter-incrementa me content.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Hana maikaʻi kēia mau mea me ka ʻike maʻamau pū kekahi.

  1. Poʻomanaʻo
    Cras justo odio
    14
  2. Poʻomanaʻo
    Cras justo odio
    14
  3. Poʻomanaʻo
    Cras justo odio
    14 
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Kaupae

Hoʻohui .list-group-horizontalno ka hoʻololi ʻana i ka hoʻonohonoho ʻana o nā mea pūʻulu papa inoa mai ke kūpaʻa a hiki i ke ākea ma nā wahi haʻi āpau. ʻO kahi ʻē aʻe, e koho i kahi ʻokoʻa pane .list-group-horizontal-{sm|md|lg|xl|xxl}e hana i kahi hui papa inoa i ke alo e hoʻomaka ana ma kēlā breakpoint min-width. ʻAʻole hiki ke hoʻohui ʻia nā pūʻulu papa inoa i kēia manawa me nā pūʻulu papa inoa flush.

ProTip: Makemake ʻoe i nā mea papa inoa like-ākea i ka wā ākea? E hoʻohui .flex-filli kēlā me kēia mea hui papa inoa.

  • He mea
  • He mea ʻelua
  • He mea kolu
  • He mea
  • He mea ʻelua
  • He mea kolu
  • He mea
  • He mea ʻelua
  • He mea kolu
  • He mea
  • He mea ʻelua
  • He mea kolu
  • He mea
  • He mea ʻelua
  • He mea kolu
  • He mea
  • He mea ʻelua
  • He mea kolu
<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>

Nā papa kuʻuna

E hoʻohana i nā papa pōʻaiapili e kāhiko i nā mea papa inoa me kahi kūlana kūlana a me ke kala.

  • He mea papa inoa paʻamau maʻalahi
  • He mea papa inoa maʻalahi maʻalahi
  • He mea maʻalahi papa inoa papa lua
  • He mea maʻalahi ka papa inoa o ka holomua
  • He mea maʻalahi ka papa inoa o ka pilikia
  • He mea papa inoa papa inoa maʻalahi
  • He mea papa inoa maʻalahi
  • He mea papa inoa māmā māmā
  • ʻO kahi mea hui papa inoa ʻeleʻele maʻalahi
<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>

Hana pū nā papa kuʻuna me .list-group-item-action. E nānā i ka hoʻohui ʻana o nā ʻano hover ma ʻaneʻi ʻaʻole i hōʻike ʻia ma ka laʻana mua. Kākoʻo pū ʻia ka .activemokuʻāina; e hoʻohana iā ia no ka hōʻike ʻana i kahi koho ʻeleu ma kahi mea hui papa inoa.

He mea papa inoa paʻamau maʻalahi He mea papa inoa maʻalahi maʻalahi He mea maʻalahi papa inoa papa lua He mea maʻalahi ka papa inoa o ka holomua He mea maʻalahi ka papa inoa o ka pilikia He mea papa inoa papa inoa maʻalahi He mea papa inoa maʻalahi He mea papa inoa māmā māmā ʻO kahi mea hui papa inoa ʻeleʻele maʻalahi 
<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>
Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua

ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ka waihoʻoluʻu i ʻike ʻia mai ka maʻiʻo ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .visually-hiddenpapa.

Me nā hōʻailona

E hoʻohui i nā hōʻailona i kēlā me kēia mea pūʻulu papa inoa e hōʻike i nā helu i heluhelu ʻole ʻia, nā hana, a me nā mea hou aku me ke kōkua o kekahi mau pono .

  • He mea papa inoa14
  • He mea papa inoa lua2
  • He mea papa inoa kolu1 
<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>

Maʻiʻo maʻamau

Hoʻohui kokoke i nā HTML i loko, ʻoiai no nā hui papa inoa i hoʻopili ʻia e like me ia ma lalo nei, me ke kōkua o nā pono hana flexbox .

E papa inoa i ke poʻomanaʻo o ka hui
3 lā aku nei

ʻO kekahi maʻiʻo placeholder ma kahi paukū.

A me kekahi paʻi liʻiliʻi.
E papa inoa i ke poʻomanaʻo o ka hui
3 lā aku nei

ʻO kekahi maʻiʻo placeholder ma kahi paukū.

A ʻo kekahi paʻi liʻiliʻi i hoʻoheheʻe ʻia.
E papa inoa i ke poʻomanaʻo o ka hui
3 lā aku nei

ʻO kekahi maʻiʻo placeholder ma kahi paukū.

A ʻo kekahi paʻi liʻiliʻi i hoʻoheheʻe ʻia. 
<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>

Nā pahu pahu a me nā lekiō

E kau i nā pahu pahu a me nā lekiō o Bootstrap i loko o ka papa inoa o nā mea pūʻulu a hoʻonohonoho pono e like me ka mea e pono ai. Hiki iā ʻoe ke hoʻohana iā lākou me ka ʻole <label>o ka s, akā e hoʻomanaʻo e hoʻokomo i kahi aria-labelʻano a me ka waiwai no ka hiki ke komo.

  • Pahu helu mua
  • pahu pahu lua
  • Pahu kaha ʻekolu
  • Pahu helu ʻehā
  • Pahu helu ʻelima
<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>

A inā makemake ʻoe e <label>like me nā .list-group-itemwahi pā nui, hiki iā ʻoe ke hana pēlā.

<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

Nā mea hoʻololi

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

Mea huikau

Hoʻohana pū ʻia me $theme-colorska hana ʻana i nā papa ʻano ʻokoʻa no .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Loop

Loop e hana i nā papa hoʻololi me ka list-group-item-variant()mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

ʻO ka hana JavaScript

E hoʻohana i ka plugin JavaScript tab—e hoʻokomo iā ia i kēlā me kēia a i ʻole ma o ka bootstrap.jsfaila i hui ʻia—e hoʻonui i kā mākou pūʻulu papa inoa no ka hana ʻana i nā pane tabable o ka ʻike kūloko.

ʻO kekahi maʻiʻo wahi i loko o kahi paukū e pili ana i "Home". A ʻo kekahi mau mea hou aʻe, i hoʻohana ʻia ma ʻaneʻi e hoʻopiha a hoʻopiha i kēia pā papa. I ka hana ʻana, ʻoi aku ka nui o nā ʻike maoli ma aneʻi. A ʻaʻole kikokiko wale. Hiki i kekahi mea, ʻoiaʻiʻo. kikokikona, kiʻi, palapala.

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>

Ke hoʻohana nei i nā ʻano ʻikepili

Hiki iā ʻoe ke hoʻoikaika i ka hoʻokele pūʻulu papa inoa me ka ʻole o ke kākau ʻana i kekahi JavaScript ma ke kuhikuhi wale ʻana a i data-bs-toggle="list"ʻole ma kahi mea. E hoʻohana i kēia mau ʻano ʻikepili ma .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>

Ma o JavaScript

E ho'ā i ka mea papa inoa papa ma o JavaScript (pono e ho'ā pakahi 'ia kēlā me kēia mea papa inoa):

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

Hiki iā ʻoe ke hoʻāla i kēlā me kēia mea papa inoa ma nā ʻano he nui:

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

Ka hopena mae

No ka hoʻopau ʻana i nā papa pā, hoʻohui .fadei kēlā me kēia .tab-pane. Pono ka pane ʻaoʻao mua e ʻike .showi ka ʻike mua.

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

Nā ʻano hana

constructor

Ho'ā i ka mea papa inoa a me ka ipu maʻiʻo. data-bs-targetPono e loaʻa i ka Tab hrefkahi pahu pahu pahu ma ka 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>

hōʻike

Koho i ka mea papa inoa i hāʻawi ʻia a hōʻike i kāna pane pili. ʻAʻole i koho ʻia nā mea papa inoa ʻē aʻe i koho mua ʻia a hūnā ʻia kāna pane pili. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka ʻaoʻao ʻaoʻao (no ka laʻana, ma mua o ka hiki ʻana o ka shown.bs.tabhanana).

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

  tab.show()

e hoolei aku

Hoʻopau i ka pā o kahi mea.

getInstance

ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana tab i pili me kahi mea DOM

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

getOrCreateInstance

ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana tab i pili me kahi mea DOM, a i ʻole e hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.

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

Nā hanana

I ka hōʻike ʻana i kahi ʻaoʻao hou, e ʻā nā hanana ma ke ʻano penei:

  1. hide.bs.tab(ma ka papa hana o kēia manawa)
  2. show.bs.tab(ma ka ʻaoʻao e hōʻike ʻia)
  3. hidden.bs.tab(ma ka papa hana mua, e like me ka hide.bs.tabhanana)
  4. shown.bs.tab(ma ka ʻaoʻao hou i hōʻike ʻia, e like me ka show.bs.tabhanana)

Inā ʻaʻohe papa i hana mua ʻia, ʻaʻole e puhi ʻia nā hanana hide.bs.taba me nā hanana.hidden.bs.tab

ʻAno hanana wehewehe
show.bs.tab Hoʻomaka kēia hanana ma ka hōʻike pā, akā ma mua o ka hōʻike ʻia ʻana o ka pā hou. E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
shown.bs.tab Hoʻomaka kēia hanana ma ka hōʻike pā ma hope o ka hōʻike ʻia ʻana o kahi pā. E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
hide.bs.tab Ke ahi kēia hanana i ka wā e hōʻike ʻia ai kahi pā hou (a no laila e hūnā ʻia ka pā hana mua). E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka ʻaoʻao ʻeleu o kēia manawa a me ka ʻaoʻao koke-e-ʻeleu hou.
hidden.bs.tab Ke ahi kēia hanana ma hope o ka hōʻike ʻia ʻana o kahi pā hou (a no laila ua hūnā ʻia ka pā hana mua). E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka papa hana mua a me ka pā hana hou. 
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
  })
}