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.

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

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

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.

He mea rarangi
He mea rarangi
He mea rarangi

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>

He pai enei mahi me nga ihirangi ritenga ano hoki.

Paneroto
Ihirangi mo te mea rarangi
14
Paneroto
Ihirangi mo te mea rarangi
14
Paneroto
Ihirangi mo te mea rarangi
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>

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

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

Irirangi tuatahi
reo irirangi tuarua
Te reo irirangi tuatoru

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>

Ka taea e koe te whakamahi .stretched-linki runga i <label>te s kia taea te paato i te rarangi katoa o te roopu roopu.

Pouakataki tuatahi
Pouakataki tuarua
Pouakataki tuatoru

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

Taurangi

Kua taapirihia ki te v5.2.0

Hei waahanga o te huarahi rerekee CSS a Bootstrap, kei te whakamahi nga roopu rarangi i nga taurangi CSS rohe .list-groupmo te whakapai ake i te waa-tuuturu. Ko nga uara mo nga taurangi CSS ka whakatauhia ma te Sass, no reira kei te tautoko tonu te whakaritenga 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};

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

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

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

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

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

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

Nga tikanga tukutahi me nga whakawhitinga

Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

Ka whakahohe i to ihirangi hei huānga ripa.

Ka taea e koe te hanga tauira ripa me te kaihanga, hei tauira:

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

Tikanga	Whakaahuatanga
`dispose`	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, ka taea e koe te whakamahi penei: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Aratuka pateko hei whakahoki i tetahi tauira ripa e hono ana ki tetahi huānga DOM, ka hangaia he mea hou mena kaore i arawhiti. Ka taea e koe te whakamahi penei `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Ka kowhiri i te ripa kua homai ka whakaatu i tana pihanga hono. Ko etahi atu ripa i tohua i mua ka kore i tohua, ka hunahia te pihanga hono. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te pihanga ripa (arā i mua i te `shown.bs.tab`puta o te takahanga).

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, karekau te hide.bs.tabme hidden.bs.tabnga takahanga e pana.

Momo takahanga	Whakaahuatanga
`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.
`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).

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