Rondedzera boka

Mapoka ezvirongwa chinhu chinochinjika uye chine simba chekuratidza zvakatevedzana zvemukati. Shandura uye uwedzere iwo kuti atsigire zvingangoita chero zviri mukati.

Pa peji ino

Basic muenzaniso

Boka rinonyanya kukosha irondedzero isina kurongeka ine zvinyorwa uye makirasi akakodzera. Vaka pamusoro payo nesarudzo dzinotevera, kana neCSS yako sezvinodiwa.

Chinhu
Chinhu chechipiri
Chinhu chechitatu
Chinhu chechina
Uye wechishanu

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>

Active zvinhu

Wedzera .activekune a .list-group-itemkuratidza ikozvino inoshanda sarudzo.

Chinhu chinoshanda
Chinhu chechipiri
Chinhu chechitatu
Chinhu chechina
Uye wechishanu

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>

Zvinhu zvakaremara

Wedzera .disabledkune a .list-group-itemkuti iite seyakaremadzwa. Ziva kuti zvimwe zvinhu zvine .disabledzvinozodawo tsika JavaScript kudzima zvizere zviitiko zvavo zvekudzvanya (semuenzaniso, zvinongedzo).

Chinhu chakaremara
Chinhu chechipiri
Chinhu chechitatu
Chinhu chechina
Uye wechishanu

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>

Links nemabhatani

Shandisa <a>s kana <button>s kugadzira zvinogoneka rondedzero yeboka zvinhu zvine hover, yakaremara, uye inoshanda nyika nekuwedzera .list-group-item-action. Isu tinopatsanura aya emanyepo-makirasi kuti tive nechokwadi chemapoka akagadzirwa neasina-anopindirana zvinhu (senge <li>s kana <div>s) haape kudzvanya kana kudzvanya kugona.

Iva nechokwadi chekusashandisa .btnmakirasi akajairwa pano .

Ikozvino link chinhu Chinhu chechipiri chekubatanidza Chinhu chechitatu chekubatanidza Chinhu chechina chekubatanidza Chinhu chakadzimwa chekubatanidza

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>

Ne <button>s, iwe unogona zvakare kushandisa disabledhunhu pachinzvimbo .disabledchekirasi. Zvinosuruvarisa, <a>s haitsigire vakaremara hunhu.

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>

Flush

Wedzera .list-group-flushkuti ubvise mamwe mabhodha uye makona akatenderedzwa kupa runyorwa zvinhu zveboka kumucheto-kune-kumucheto mumudziyo wevabereki (semuenzaniso, makadhi).

Chinhu
Chinhu chechipiri
Chinhu chechitatu
Chinhu chechina
Uye wechishanu

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>

Numbered

Wedzera iyo .list-group-numberedmodhifita kirasi (uye nesarudzo shandisa <ol>chinhu) kuti usarudze munhamba dzeboka zvinhu. Nhamba dzinogadzirwa kuburikidza neCSS (kusiyana <ol>neiyo s default browser styling) yekuiswa zvirinani mukati mezvinyorwa zveboka zvinhu uye kubvumidza zvirinani kugadzirisa.

Nhamba dzinogadzirwa ne counter-resetpa <ol>, uye dzobva dzagadzirwa nekuiswa ne ::beforepseudo-element pa <li>with counter-incrementand content.

Chinhu chakanyorwa
Chinhu chakanyorwa
Chinhu chakanyorwa

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>

Izvi zvinoshanda zvikuru netsika yezvinhu zvakare.

Subheading
Zvemukati zvechinyorwa chinhu
14
Subheading
Zvemukati zvechinyorwa chinhu
14
Subheading
Zvemukati zvechinyorwa chinhu
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>

Horizontal

Wedzera .list-group-horizontalkuti uchinje marongero ezvinyorwa zveboka kubva pakatwasuka kuenda kune yakachinjika pamapoinzi ese. Neimwe nzira, sarudza chinodaira chinodavirwa .list-group-horizontal-{sm|md|lg|xl|xxl}kuita boka rerondedzero rakachinjika kutanga pabreakpoint's min-width. Parizvino mapoka emazita akachinjika haagone kusanganiswa nemapoka erunyoro.

ProTip: Unoda kuenzana-hupamhi rondedzero yeboka zvinhu kana yakachinjika? Wedzera .flex-fillkune chimwe nechimwe cheboka chinhu.

Chinhu
Chinhu chechipiri
Chinhu chechitatu

Chinhu
Chinhu chechipiri
Chinhu chechitatu

Chinhu
Chinhu chechipiri
Chinhu chechitatu

Chinhu
Chinhu chechipiri
Chinhu chechitatu

Chinhu
Chinhu chechipiri
Chinhu chechitatu

Chinhu
Chinhu chechipiri
Chinhu chechitatu

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>

Contextual classes

Shandisa makirasi emamiriro ekugadzirisa zvinhu kurongedza zvinhu zvine mamiriro ekunze uye ruvara.

Chinhu cheboka chiri nyore chinogara chiripo
Chinhu chakareruka chekutanga cheboka
Chinhu chakareruka chechipiri cheboka
Chinhu cheboka chekubudirira chiri nyore
Chinhu cheboka chenjodzi chiri nyore
Chinhu cheboka chenyevero chiri nyore
Chinhu chakareruka cheruzivo cheboka
Chinhu cheboka chakareruka chechiedza
Chinhu chiri nyore chakasviba cheboka

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>

Contextual makirasi anoshandawo ne .list-group-item-action. Cherechedza kuwedzera kwezvitaera zvehover pano hazvipo mumuenzaniso wapfuura. Uyewo inotsigirwa ihurumende .active; shandisa kuratidza sarudzo inoshanda pachinhu cheboka rezvinyorwa.

Chinhu cheboka chiri nyore chinogara chiripo Chinhu chakareruka chekutanga cheboka Chinhu chakareruka chechipiri cheboka Chinhu cheboka chekubudirira chiri nyore Chinhu cheboka chenjodzi chiri nyore Chinhu cheboka chenyevero chiri nyore Chinhu chakareruka cheruzivo cheboka Chinhu cheboka chakareruka chechiedza Chinhu chiri nyore chakasviba cheboka

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>

Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .visually-hiddennekirasi.

Nemabheji

Wedzera mabheji kune chero chinyorwa cheboka chinhu kuratidza zvisingaverengeki kuverenga, chiitiko, uye nezvimwe nerubatsiro rwezvimwe zvinoshandiswa .

Chinhu chakanyorwa14
Chinhu chechipiri chinyorwa2
Chinhu chechitatu chinyorwa1

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>

Custom content

Wedzera ingangoita chero HTML mukati, kunyangwe yeakabatana rondedzero mapoka seari pazasi, nerubatsiro rweflexbox utilities .

Rondedzera musoro wechinhu cheboka

3 mazuva apfuura

Zvimwe zvechibatiso chenzvimbo mundima.

Uye mamwe madiki madiki.

Rondedzera musoro wechinhu cheboka

3 mazuva apfuura

Zvimwe zvechibatiso chenzvimbo mundima.

Uye mamwe madiki akadzima.

Rondedzera musoro wechinhu cheboka

3 mazuva apfuura

Zvimwe zvechibatiso chenzvimbo mundima.

Uye mamwe madiki akadzima.

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>

Checkboxes nemaredhiyo

Isa mabhokisi eBootstrap echeki nemaredhiyo mukati mezvinyorwa zveboka zvinhu uye gadzirisa sezvinodiwa. Unogona kuzvishandisa pasina <label>s, asi ndapota yeuka kuisa aria-labelhunhu uye kukosha kwekuwanikwa.

Chekutanga bhokisi
Chechipiri cheki bhokisi
Chechitatu cheki bhokisi

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>

Redhiyo yekutanga
Redhiyo yechipiri
Redhiyo yechitatu

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>

Unogona kushandisa .stretched-linkpa <label>s kuita kuti rondedzero yese yeboka chinhu chibatike.

Chekutanga bhokisi
Chechipiri cheki bhokisi
Chechitatu cheki bhokisi

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

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap's evolving CSS variables approach, rondedzero mapoka zvino anoshandisa emuno CSS machinjiro .list-grouppakusimudzira chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

  --#{$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};

Sass zvakasiyana

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

Mixins

Inoshandiswa pamwe chete $theme-colorsnekugadzira iwo mamiriro akasiyana makirasi es .list-group-item.

@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 iyo inogadzira iyo modifier makirasi ane 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);
}

JavaScript maitiro

Shandisa iyo tebhu JavaScript plugin-isanganise iyo yega kana kuburikidza neyakaunganidzwa bootstrap.jsfaira-kuwedzera yedu runyorwa boka kuti ugadzire zvinobatika zvemukati zvemukati.

Kumba Profile Mharidzo Settings

Zvimwe zvechibatiso mundima ine chekuita ne "Kumba". Uye zvimwe zvemukati, zvinoshandiswa pano kungopeta nekuzadza iyi tebhu pani. Mukugadzira, iwe sezviri pachena unenge uine zvimwe zvechokwadi zvemukati pano. Uye kwete mameseji chete. Inogona kuva chero chinhu, chaizvoizvo. Zvinyorwa, mifananidzo, mafomu.

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>

Kushandisa data hunhu

Unogona kumisikidza rondedzero yekufamba kweboka pasina kunyora chero JavaScript nekungotsanangura data-bs-toggle="list"kana pane chinhu. Shandisa idzi data attribution pa .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>

Via JavaScript

Gonesa chinobatika chinyorwa chinhu kuburikidza neJavaScript (chimwe nechimwe chinyorwa chinoda kuvhurwa chega):

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

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

Iwe unogona kumisa chinhu chega chega munzira dzinoverengeka:

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

Fade effect

Kuita kuti ma tabs panel apere mukati, wedzera .fadekune imwe neimwe .tab-pane. Yekutanga tebhu pani inofanirawo .showkuita kuti zvekutanga zvionekwe.

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

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

Inomutsa zvirimo sechinhu chetabhu.

Iwe unogona kugadzira tabhu muenzaniso nemugadziri, semuenzaniso:

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

Nzira	Tsanangudzo
`dispose`	Inoparadza tebhu yechinhu.
`getInstance`	Static nzira iyo inokutendera iwe kuti uwane iyo tab muenzaniso yakabatana neiyo DOM chinhu, unogona kuishandisa seizvi: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Static nzira inodzosa tabhu yakabatana neDOM element kana kugadzira imwe nyowani kana isina kutangwa. Unogona kuishandisa sezvizvi `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Inosarudza iyo tabhu yakapihwa uye inoratidza yakabatana pane yayo. Chero imwe tab yakambosarudzwa inova isina kusarudzwa uye pane yakabatana nayo inovanzwa. Inodzokera kumunhu arikufona tebhu isati yanyatsoratidzwa (kureva kuti `shown.bs.tab`chiitiko chisati chaitika).

Zviitiko

Kana uchiratidza tebhu nyowani, zviitiko zvinopisa nenzira inotevera:

hide.bs.tab(pane ikozvino inoshanda tab)
show.bs.tab(paicha-kuratidzwa tab)
hidden.bs.tab(paiyo yapfuura inoshanda tebhu, yakafanana hide.bs.tabneyechiitiko)
shown.bs.tab(paiyo ichangobva-kushanda ichangoratidzwa tab, yakafanana show.bs.tabneyechiitiko)

Kana pasina tebhu yanga yatoshanda, saka iyo hide.bs.tabuye hidden.bs.tabzviitiko hazvizodzingwa.

Chiitiko mhando	Tsanangudzo
`hide.bs.tab`	Ichi chiitiko chinopisa kana tabhu nyowani icharatidzwa (uye nekudaro iyo yapfuura inoshanda tebhu inofanira kuvanzwa). Shandisa `event.target`uye `event.relatedTarget`kunanga yazvino inoshanda tebhu uye iyo nyowani-ichaita-inoshanda tebhu, zvichiteerana.
`hidden.bs.tab`	Ichi chiitiko chinopisa mushure mekunge tabhu nyowani yaratidzwa (uye nekudaro iyo yapfuura inoshanda tebhu yakavanzwa). Shandisa `event.target`uye `event.relatedTarget`kunanga iyo yapfuura inoshanda tebhu uye iyo itsva inoshanda tebhu, zvichiteerana.
`show.bs.tab`	Ichi chiitiko chinopisa pane tab show, asi iyo itsva tebhu isati yaratidzwa. Shandisa `event.target`uye `event.relatedTarget`kunanga iyo inoshanda tebhu uye yapfuura inoshanda tebhu (kana iripo) zvichiteerana.
`shown.bs.tab`	Ichi chiitiko chinopisa pane tab show mushure mekunge tab yaratidzwa. Shandisa `event.target`uye `event.relatedTarget`kunanga iyo inoshanda tebhu uye yapfuura inoshanda tebhu (kana iripo) zvichiteerana.

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