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

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>

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

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>

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

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>

Nā loulou a me nā pihi

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

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>

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

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>

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

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>

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.

He mea papa inoa
He mea papa inoa
He mea papa inoa

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>

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

Poʻomanaʻo
Maʻiʻo no ka mea papa inoa
14
Poʻomanaʻo
Maʻiʻo no ka mea papa inoa
14
Poʻomanaʻo
Maʻiʻo no ka mea papa inoa
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>

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

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

Lekiō mua
Lekiō lua
Lekiō ʻekolu

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>

Hiki iā ʻoe ke hoʻohana .stretched-linki ka <label>s e hiki ke kaomi i ka mea hui papa inoa holoʻokoʻa.

Pahu helu mua
pahu pahu lua
Pahu kaha ʻekolu

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

Nā mea hoʻololi

Hoʻohui ʻia ma v5.2.0

Ma ke ʻano o ka hoʻololi ʻana o nā ʻano hoʻololi CSS a Bootstrap, hoʻohana nā pūʻulu papa inoa i nā mea hoʻololi CSS kūloko .list-groupno ka hoʻomaikaʻi ʻana i ka manawa maoli. Hoʻonohonoho ʻia nā waiwai no nā ʻano CSS ma o Sass, no laila ke kākoʻo mau ʻia nei ka hana maʻamau 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};

Nā hoʻololi Sass

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

Home Pilikino Nā memo Nā hoʻonohonoho

ʻ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):

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

  triggerEl.addEventListener('click', 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:

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

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

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

Ho'ā i kāu ʻike ma ke ʻano he ʻāpana tab.

Hiki iā ʻoe ke hana i kahi laʻana tab me ka mea hana, no ka laʻana:

const bsTab = new bootstrap.Tab('#myTab')

Kaʻina hana	wehewehe
`dispose`	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 e pili ana me kahi mea DOM, hiki iā ʻoe ke hoʻohana e like me kēia: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	ʻO ke ʻano static e hoʻihoʻi i kahi laʻana tab e pili ana i kahi mea DOM a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia. Hiki iā ʻoe ke hoʻohana e like me kēia: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Koho i ka pā i hāʻawi ʻia a hōʻike i kāna pane pili. ʻAʻole i koho ʻia kekahi ʻaoʻao ʻē 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 pane tab (ʻo ia hoʻi ma mua o ka hiki ʻana o ka `shown.bs.tab`hanana).

Nā hanana

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

hide.bs.tab(ma ka papa hana o kēia manawa)
show.bs.tab(ma ka ʻaoʻao e hōʻike ʻia)
hidden.bs.tab(ma ka papa hana mua, e like me ka hide.bs.tabhanana)
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
`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.target`a `event.relatedTarget`e 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.target`a `event.relatedTarget`e hoʻopaʻa i ka papa hana mua a me ka pā hana hou.
`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.target`a `event.relatedTarget`e 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.target`a `event.relatedTarget`e hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).

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