Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
in English

Rōpū rārangi

Ko nga roopu rarangi he waahanga ngawari me te kaha mo te whakaatu i te raupapa ihirangi. Whakarerekē me te whakawhānui atu ki te tautoko i nga mea katoa o roto.

Tauira taketake

Ko te röpü rärangi mätämua he rärangi rärangi kore me ngä rärangi rärangi me ngä karaehe tika. Hangaia ki runga me nga whiringa ka whai ake, me to ake CSS ranei ina hiahiatia.

  • He taonga
  • He mea tuarua
  • He mea tuatoru
  • He mea tuawha
  • Me te tuarima
<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>

Tūemi hohe

Tāpirihia .activeki a .list-group-itemhei tohu i te tīpakonga hohe onāianei.

  • He tūemi hohe
  • He mea tuarua
  • He mea tuatoru
  • He mea tuawha
  • Me te tuarima
<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>

Ko nga mea kua monokia

Taapirihia .disabledki .list-group-itema kia ahua monokia. Kia mahara ko etahi o nga huānga me .disabledte hiahia hoki ki te JavaScript ritenga ki te whakakore i a raatau kaupapa paato (hei tauira, hononga).

  • He mea monokia
  • He mea tuarua
  • He mea tuatoru
  • He mea tuawha
  • Me te tuarima
<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>

Whakamahia <a>te s, s ranei <button>ki te hanga i nga tuemi roopu rarangi mahi me te whakaparo, te mono, me nga ahuatanga hohe ma te taapiri .list-group-item-action. Ka wehea e matou enei karaehe pseudo ki te whakarite kia kore nga roopu rarangi i hangaia mai i nga huānga tauwhitiwhiti-kore (penei <li>i te s, <div>s ranei) e kore e hoatu he paato, he paato ranei te utu.

Kia mahara kia kaua e whakamahia nga .btnkaraehe paerewa i konei .

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

Ki <button>te s, ka taea hoki e koe te whakamahi i te disabledhuanga hei utu mo te .disabledakomanga. Ko te mea pouri, <a>karekau e tautoko i te huanga haua.

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

Horoi

Taapirihia .list-group-flushhei tango i etahi taitapa me nga kokonga porotaka hei whakaatu i nga taonga a te roopu roopu i te taha-ki-te-taha i roto i te ipu matua (hei tauira, nga kaari).

  • He taonga
  • He mea tuarua
  • He mea tuatoru
  • He mea tuawha
  • Me te tuarima
<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>

Kua tau

Tāpirihia te .list-group-numberedkaraehe whakakē (me te whakamahi i tētahi <ol>huānga) ki te kōwhiri ki ngā tūemi rōpū rārangi tau. Ka hangaia nga nama ma te CSS (he rereke ki te ahua <ol>o te kaitirotiro taunoa) kia pai ake te whakanoho ki roto i nga rarangi rarangi taonga me te pai ake o te whakarite.

Ka hangaia nga tau e counter-resetrunga i te <ol>, ka whakaahua ka tuu ki te ::beforehuānga pseudo i runga i te <li>me counter-incrementte content.

  1. He mea rarangi
  2. He mea rarangi
  3. He mea rarangi
<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>

He pai enei mahi me nga ihirangi ritenga ano hoki.

  1. Paneroto
    Ihirangi mo te mea rarangi
    14
  2. Paneroto
    Ihirangi mo te mea rarangi
    14
  3. Paneroto
    Ihirangi mo te mea rarangi
    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>

Whakapae

Tāpirihia .list-group-horizontalhei huri i te tahora o te rārangi tūemi rōpū mai i te poutū ki te whakapae puta noa i ngā wāhi wehenga katoa. Arā, kōwhiria he rerekētanga aro .list-group-horizontal-{sm|md|lg|xl|xxl}ki te whakapaepae i tētahi rōpū rārangi ka tīmata mai i taua wāhi wehenga min-width. I tenei wa kaore e taea te whakakotahi i nga roopu rarangi whakapae me nga roopu rarangi reera.

ProTip: Kei te pirangi koe ki nga taonga roopu roopu rite-whanui ina whakapae? Tāpirihia .flex-fillki ia rārangi tūemi rōpū.

  • He taonga
  • He mea tuarua
  • He mea tuatoru
  • He taonga
  • He mea tuarua
  • He mea tuatoru
  • He taonga
  • He mea tuarua
  • He mea tuatoru
  • He taonga
  • He mea tuarua
  • He mea tuatoru
  • He taonga
  • He mea tuarua
  • He mea tuatoru
  • He taonga
  • He mea tuarua
  • He mea tuatoru
<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>

Nga karaehe horopaki

Whakamahia nga karaehe horopaki ki te whakaahua i nga mea rarangi ingoa me te papamuri me te tae.

  • He tuemi rarangi taunoa ngawari
  • He tuemi rarangi tuatahi ngawari
  • He tuemi rarangi tuarua ngawari
  • He tuemi rarangi angitu ngawari
  • He tuemi rarangi morearea ngawari
  • He tuemi rarangi whakatupato ngawari
  • He rarangi rarangi korero ngawari
  • He mea marama noa te rarangi roopu
  • He tuemi rarangi pouri ngawari
<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>

Ka mahi tahi ano nga karaehe horopaki .list-group-item-action. Tuhia te taapiri o nga momo whakaparo i konei karekau i te tauira o mua. Ka tautokohia ano te .activekawanatanga; whakamahia hei tohu i te kowhiringa hohe i runga i tetahi rarangi rarangi take.

<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>
Te kawe i te tikanga ki nga hangarau awhina

Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (hei tauira, te tuhinga ka kitea), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .visually-hiddenakomanga.

Me nga tohu

Taapirihia nga tohu ki tetahi tuemi roopu rarangi hei whakaatu i nga kaute kaore ano kia panuitia, mahi, me etahi atu ma te awhina o etahi taputapu .

  • He mea rarangi14
  • He tuemi rarangi tuarua2
  • He rarangi rarangi tuatoru1
<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>

Ihirangi ritenga

Taapirihia tata ki tetahi HTML kei roto, ahakoa mo nga roopu rarangi hono penei i raro nei, me te awhina o nga taputapu flexbox .

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

Pouakataki me nga reo irirangi

Whakanohoia nga pouakataki me nga reo irirangi a Bootstrap ki roto i nga rarangi o nga taonga roopu me te whakarite ina hiahiatia. Ka taea e koe te whakamahi me te kore <label>s, engari me mahara ki te whakauru i tetahi aria-labelhuanga me te uara mo te urunga.

  • Pouakataki tuatahi
  • Pouakataki tuarua
  • Pouakataki tuatoru
  • Pouakataki tuawha
  • Pouakataki tuarima
<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, ki te hiahia koe mo <label>nga .list-group-itemwaahi nui, ka taea e koe te mahi.

<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

Taurangi

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

Whakaranu

Ka whakamahia tahi me $theme-colorste whakaputa i nga karaehe rereke horopaki mo .list-group-itemte s.

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

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

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

Porowhita

Koropiko e whakaputa ana i nga karaehe whakarereke me te list-group-item-variant()ranunga.

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

Te whanonga JavaScript

Whakamahia te ripa JavaScript mono—whakauruhia takitahi, na roto ranei i te bootstrap.jskonae kua whakahiato—ki te whakawhānui i ta matou roopu rarangi ki te hanga i nga panui ripanga o nga ihirangi rohe.

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

Te whakamahi i nga huanga raraunga

Ka taea e koe te whakahohe i te whakatere roopu rarangi me te kore tuhi i tetahi JavaScript ma te tohu noa data-bs-toggle="list", ki runga ranei i tetahi huānga. Whakamahia enei huanga raraunga ki runga .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 te JavaScript

Whakahohehia te tuemi rarangi ripa ma te JavaScript (me whakahohe takitahi ia rarangi tuemi):

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

Ka taea e koe te whakahohe i nga mea rarangi takitahi i roto i nga huarahi maha:

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

Painga muhani

Kia memeha haere te panui ripa, taapirihia .fadeki ia .tab-pane. Ko te pihanga ripa tuatahi me .showwhakaatu te ihirangi tuatahi.

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

Nga tikanga

constructor

Whakahohe ai i te huānga tūemi rārangi me te ipu ihirangi. Me whai Ripa he data-bs-target, he hrefkohanga ipu ranei kei roto i te 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>

whakaatu

Ka tīpakohia te tūemi rārangi ka whakaatu i tōna pihanga whai pānga. Ko etahi atu tuemi rarangi i tohua i mua ka kore i tohua, ka hunahia tona pihanga hono. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te pihanga ripa (hei tauira, i mua i te shown.bs.tabputa o te takahanga).

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

  tab.show()

tuku

Ka whakakore i te ripa o te huānga.

getInstance

Tikanga pateko e taea ai e koe te tiki i te tauira ripa e hono ana ki tetahi huānga DOM

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

getOrCreateInstance

Tikanga pateko e taea ai e koe te tiki i te tauira ripa e hono ana ki tetahi huānga DOM, ki te hanga i tetahi mea hou mena kaore i arawhitia

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

Nga huihuinga

Ina whakaatu ana i te ripa hou, ka pupuhi nga takahanga i roto i te raupapa e whai ake nei:

  1. hide.bs.tab(i runga i te ripa hohe onāianei)
  2. show.bs.tab(i runga i te ripa hei whakaatu)
  3. hidden.bs.tab(i runga i te ripa hohe o mua, he rite ki te hide.bs.tabkaupapa)
  4. shown.bs.tab(i runga i te ripa katahi ano ka hohe ka whakaatuhia, he rite tonu ki tera mo te show.bs.tabtakahanga)

Mena karekau he ripa i hohe tonu, ka kore te hide.bs.tabme hidden.bs.tabnga takahanga e pana.

Momo takahanga Whakaahuatanga
show.bs.tab Ka pupuhi tenei takahanga ki te whakaaturanga ripa, engari i mua i te whakaaturanga o te ripa hou. Whakamahia event.targetme event.relatedTargette aro ki te ripa hohe me te ripa hohe o mua (mehemea e waatea ana).
shown.bs.tab Ka ahi tenei takahanga ki te whakaaturanga ripa i muri i te whakaaturanga ripa. Whakamahia event.targetme event.relatedTargette aro ki te ripa hohe me te ripa hohe o mua (mehemea e waatea ana).
hide.bs.tab Ka puhipuhi tenei takahanga ina whakaatuhia he ripa hou (na reira me huna te ripa hohe o mua). Whakamahia event.targetme event.relatedTargette whakawhāiti i te ripa hohe onāianei me te ripa hou-hohe-hohe, ia.
hidden.bs.tab Ka ahi tenei takahanga i muri i te whakaaturanga ripa hou (na reira ka huna te ripa hohe o mua). Whakamahia event.targetme event.relatedTargette aro ki te ripa hohe o mua me te ripa hohe 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
  })
}