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.

I tenei wharangi

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>

Hononga me nga paatene

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 .

Ko te tūemi hono onāianei He tūemi hono tuarua He tuemi hono tuatoru He tuemi hono tuawha He tūemi hono kua monokia

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

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.

Kore noa odio
Kore noa odio
Kore noa 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>

He pai enei mahi me nga ihirangi ritenga ano hoki.

Paneroto
Kore noa odio
14
Paneroto
Kore noa odio
14
Paneroto
Kore noa 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>

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.

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

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

Whakarārangihia te upoko tūemi rōpū

3 ra ki muri

Ko etahi ihirangi waahi kei roto i tetahi waahanga.

Me etahi tuhinga iti.

Whakarārangihia te upoko tūemi rōpū

3 ra ki muri

Ko etahi ihirangi waahi kei roto i tetahi waahanga.

A ko etahi i wahangu i nga tuhinga iti.

Whakarārangihia te upoko tūemi rōpū

3 ra ki muri

Ko etahi ihirangi waahi kei roto i tetahi waahanga.

A ko etahi i wahangu i nga tuhinga iti.

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

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

Kainga Kōtaha Nga Karere Tautuhinga

Ko etahi o nga waahi kei roto i tetahi waahanga e pa ana ki te "Kainga". Me etahi atu korero, ka whakamahia i konei ki te whakakii me te whakakii i tenei panui ripa. I roto i te whakaputanga, ka kitea he nui ake nga korero pono i konei. A ehara i te tuhinga noa. He aha pea, tino. Kuputuhi, whakaahua, puka.

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>

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:

hide.bs.tab(i runga i te ripa hohe onāianei)
show.bs.tab(i runga i te ripa hei whakaatu)
hidden.bs.tab(i runga i te ripa hohe o mua, he rite ki te hide.bs.tabkaupapa)
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.target`me `event.relatedTarget`te 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.target`me `event.relatedTarget`te 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.target`me `event.relatedTarget`te 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.target`me `event.relatedTarget`te 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
  })
}