Uluhlu lweqela

Amaqela oluhlu ayinxalenye eguquguqukayo kwaye enamandla yokubonisa uluhlu lomxholo. Guqula kwaye uyandise ukuxhasa malunga nawo nawuphi na umxholo ongaphakathi.

Kweli phepha

Umzekelo osisiseko

Elona qela loluhlu olusisiseko luluhlu olungacwangciswanga olunezinto zoluhlu kunye neeklasi ezifanelekileyo. Yakha phezu kwayo ngeenketho ezilandelayo, okanye ngeyakho iCSS njengoko kufuneka.

Into
Into yesibini
Into yesithathu
Into yesine
Kwaye owesihlanu

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

Izinto ezisebenzayo

Yongeza .activekwi- .list-group-itema ukubonisa ukhetho olusebenzayo lwangoku.

Into esebenzayo
A second item
A third item
A fourth item
And a fifth one

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

Izinto ezikhubazekileyo

Yongeza .disabledku-a .list-group-itemukuze ibonakale ivaliwe. Qaphela ukuba ezinye izinto kunye .disablednazo ziyakufuna iJavaScript yesiko ukuvala imisitho yokucofa ngokupheleleyo (umzekelo, amakhonkco).

Into ekhubazekileyo
A second item
A third item
A fourth item
And a fifth one

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

Amakhonkco kunye namaqhosha

Sebenzisa i- <a>s okanye <button>i-s ukwenza uluhlu lwezinto ezisebenzayo zeqela nge-hover, ivaliwe, kunye neemeko ezisebenzayo ngokudibanisa .list-group-item-action. Sahlula ezi klasi pseudo-ukuqinisekisa uluhlu lwamaqela ezenziwe non-interactive element (ezifana <li>s okanye <div>s) ababoneleli ngonqakrazo okanye ucofe ukufikelela.

Qinisekisa ukuba ungasebenzisi .btniiklasi eziqhelekileyo apha .

Into yangoku yekhonkco Into yesibini yekhonkco Into yesithathu yekhonkco Into yesine yekhonkco Into yekhonkco evaliweyo

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

Nge <button>s, ungenza kwakhona ukusebenzisa disableduphawu endaweni .disabledyeklasi. Okulusizi kukuba, <a>abaluxhasi uphawu lokukhubazeka.

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

Gubha

Yongeza .list-group-flushukususa imida ethile kunye neekona ezingqukuva ukunika uluhlu lwezinto zeqela edge-to-edge kwisikhongozeli esingumzali (umzekelo, amakhadi).

Into
Into yesibini
Into yesithathu
Into yesine
Kwaye owesihlanu

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

Inani

Yongeza udidi .list-group-numberedlwesilungisi (kwaye ngokuzikhethela sebenzisa <ol>isiqalelo) ukungena kwizinto ezinoluhlu lweqela. Amanani aveliswa nge-CSS (ngokuchaseneyo ne- <ol>s styling ye-browser engagqibekanga) yokubekwa ngcono ngaphakathi kwezinto zeqela kunye nokuvumela uhlengahlengiso olungcono.

Amanani aveliswa counter-resetkwi- <ol>, kwaye emva koko abhalwe kwaye abekwe kunye ne- ::beforepseudo-element kwi <li>kunye counter-incrementkunye content.

Into yoluhlu
Into yoluhlu
Into yoluhlu

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

Ezi zisebenza kakuhle kunye nomxholo wesiko ngokunjalo.

Isihlokwana
Umxholo wento yoluhlu
14
Isihlokwana
Umxholo wento yoluhlu
14
Isihlokwana
Umxholo wento yoluhlu
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>

Ukuthe tye

Yongeza .list-group-horizontalukutshintsha uyilo loluhlu lwezinto zeqela ukusuka ngokuthe nkqo ukuya ngokuthe tye kuzo zonke iindawo zokuqhawula. Kungenjalo, khetha ulwahlulo oluphendulayo .list-group-horizontal-{sm|md|lg|xl|xxl}ukwenza uluhlu lweqela elithe tyaba liqala kwelo breakpoint min-width. Okwangoku amaqela oluhlu oluthe tye akanakudityaniswa namaqela oluhlu lokugungxula.

I-ProTip: Ufuna izinto zeqela ezinobubanzi obulinganayo xa zithe tye? Yongeza .flex-fillkuluhlu ngalunye into yeqela.

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

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

Iiklasi zomxholo

Sebenzisa iiklasi zomxholo ukwenza uluhlu lwezinto ezinemvelaphi kunye nombala obalaseleyo.

Uluhlu olulula olumiselweyo umba weqela
Uluhlu olulula olungundoqo lwento yeqela
Into elula yoluhlu lwesibini lweqela
Inqaku leqela lempumelelo elilula
Uluhlu olulula lwezinto ezinobungozi kwiqela
Uluhlu olulula loluhlu lwezinto zeqela
Uluhlu lolwazi olulula into yeqela
Uluhlu olulula loluhlu into yeqela
Into yeqela elilula elimnyama

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

Iiklasi zomxholo nazo zisebenza kunye .list-group-item-action. Qaphela ukongezwa kwezitayile ze-hover apha azikho kumzekelo wangaphambili. Ikwaxhaswa .activengurhulumente; yifake ukubonisa ukhetho olusebenzayo kuluhlu lomxholo wento yeqela.

Uluhlu olulula olumiselweyo umba weqela Uluhlu olulula olungundoqo lwento yeqela Into elula yoluhlu lwesibini lweqela Inqaku leqela lempumelelo elilula Uluhlu olulula lwezinto ezinobungozi kwiqela Uluhlu olulula loluhlu lwezinto zeqela Uluhlu lolwazi olulula into yeqela Uluhlu olulula loluhlu into yeqela Into yeqela elilula elimnyama

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

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hiddeneklasini.

Neebheji

Yongeza iibheji kuyo nayiphi na into yeqela loluhlu ukubonisa amanani angafundwanga, umsebenzi, kunye nokunye ngoncedo lwezinye izinto eziluncedo .

Into yoluhlu14
Into yoluhlu lwesibini2
Into yoluhlu lwesithathu1

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

Umxholo oqhelekileyo

Yongeza phantse nayiphi na i-HTML ngaphakathi, nakuluhlu lwamaqela adityanisiweyo afana neli lingezantsi, ngoncedo lwezinto eziluncedo ze- flexbox .

Uluhlu lwesihloko sento yeqela

kwiintsuku ezi-3 ezidlulileyo

Omnye umxholo wesibambi-ndawo kumhlathi.

Kunye noshicilelo oluncinci.

Uluhlu lwesihloko sento yeqela

kwiintsuku ezi-3 ezidlulileyo

Omnye umxholo wesibambi-ndawo kumhlathi.

Kwaye ezinye iincwadi ezincinci zithulisiwe.

Uluhlu lwesihloko sento yeqela

kwiintsuku ezi-3 ezidlulileyo

Omnye umxholo wesibambi-ndawo kumhlathi.

Kwaye ezinye iincwadi ezincinci zithulisiwe.

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

Iibhokisi zokutshekisha kunye noonomathotholo

Beka iibhokisi zokukhangela ze-Bootstrap kunye nerediyo phakathi kwezinto zoluhlu lweqela kwaye wenze ngokwezifiso njengoko kufuneka. Ungazisebenzisa ngaphandle <label>s, kodwa nceda ukhumbule ukubandakanya aria-labeluphawu kunye nexabiso lofikelelo.

Ibhokisi yokujonga kuqala
Ibhokisi yokukhangela yesibini
Ibhokisi yokukhangela yesithathu
Ibhokisi yokukhangela yesine
Ibhokisi yokukhangela yesihlanu

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

Kwaye ukuba ufuna <label>s njengeendawo .list-group-itemezinkulu ezibethayo, ungayenza loo nto, nayo.

Ibhokisi yokujonga kuqala Ibhokisi yokukhangela yesibini Ibhokisi yokukhangela yesithathu Ibhokisi yokukhangela yesine Ibhokisi yokukhangela yesihlanu

<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

Izinto eziguquguqukayo

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

Imixube

Isetyenziswe ngokudityanisiweyo $theme-colorsnokuvelisa iiklasi ezahlukeneyo zomxholo we- .list-group-items.

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

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

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

Umjikelo

I-Loop eyenza iiklasi zesilungisi kunye list-group-item-variant()nomxube.

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

Ukuziphatha kweJavaScript

Sebenzisa i-plugin ye-JavaScript yethebhu-yibandakanye ngabanye okanye ngefayile ehlanganisiweyo bootstrap.js-ukwandisa iqela lethu loluhlu ukwenza iipaneli ze-tableable zomxholo wendawo.

Ekhaya Inkangeleko yesimo Imiyalezo Iisetingi

Omnye umxholo wesibambi-ndawo kumhlathi onxulumene "neKhaya". Kwaye omnye umxholo ongaphezulu, osetyenziswe apha nje ukucofa kwaye ugcwalise le ndawo yolawulo. Kwimveliso, ngokuqinisekileyo uya kuba nomxholo wokwenyani apha. Kwaye hayi nje umbhalo. Inokuba nantoni na, ngokwenene. Isicatshulwa, imifanekiso, iifom.

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>

Ukusebenzisa iimpawu zedatha

Unokwenza ukhangelo lweqela loluhlu ngaphandle kokubhala nasiphi na iJavaScript ngokuchaza ngokulula data-bs-toggle="list"okanye kwinto. Sebenzisa ezi mpawu zedatha kwi .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>

NgeJavaScript

Yenza umba woluhlu olunokubakho ngeJavaScript (uluhlu ngalunye kufuneka luvulwe ngokwalo):

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

Unokwenza uluhlu ngalunye lusebenze ngeendlela ezininzi:

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

Fade isiphumo

Ukwenza indawo yolawulo yeethebhu iphelelwe, yongeza .fadekuyo nganye .tab-pane. Ipheyini yethebhu yokuqala kufuneka kwakhona .showyenze umxholo wokuqala ubonakale.

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

Iindlela

constructor

Yenza kusebenze into yoluhlu kunye nesiqulatho somxholo. Isithuba kufuneka sibenendawo data-bs-targetokanye indawo hrefyesikhongozeli kwiDOM.

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

bonisa

Ikhetha umba woluhlu olunikiweyo kwaye ibonise isahlulo sayo esinxulumeneyo. Nayiphi na enye into yoluhlu ebikhe yakhethwa ngaphambili ayikhethwanga kwaye isahlulo sayo esinxulumeneyo siyafihlwa. Ibuyisela kumnxebi phambi kokuba ipayini yethebhu iboniswe ngokwenene (umzekelo, phambi kokuba shown.bs.tabisiganeko senzeke).

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

  tab.show()

lahla

Uyonakalisa ithebhu yesiqalelo.

getInstance

Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wesithuba esidityaniswe nesiqalelo seDOM

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

getOrCreateInstance

Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wethebhu edityaniswe nesiqalelo seDOM, okanye wenze entsha ukuba ayiqalwanga.

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

Iziganeko

Xa ubonisa ithebhu entsha, iziganeko zivutha ngolu hlobo lulandelayo:

hide.bs.tab(kwithebhu esebenzayo yangoku)
show.bs.tab(kwi-eza kuboniswa thebhu)
hidden.bs.tab(kwithebhu esebenzayo yangaphambili, efanayo nale hide.bs.tabyesiganeko)
shown.bs.tab(kwisithuba esandula ukusebenza esivele sibonise ithebhu, efanayo show.bs.tabnesesiganeko)

Ukuba akukho thebhu ibisele iyasebenza, i hide.bs.tabkunye hidden.bs.tabneziganeko aziyi kugxothwa.

Uhlobo lomsitho	Inkcazo
`show.bs.tab`	Esi siganeko sivutha kumboniso wethebhu, kodwa ngaphambi kokuba ithebhu entsha iboniswe. Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
`shown.bs.tab`	Esi siganeko sitshisa kwi-tab show emva kokuba ithebhu ibonisiwe. Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
`hide.bs.tab`	Esi siganeko sitshisa xa isithuba esitsha siza kuboniswa (kwaye ke isithuba sangaphambili esisebenzayo siza kufihlwa). Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa ithebhu esebenzayo yangoku kunye nethebhu entsha eza kusebenza ngokukhawuleza, ngokulandelelanayo.
`hidden.bs.tab`	Esi siganeko sivutha emva kokuba ithebhu entsha ibonisiwe (kwaye ke isithuba sangaphambili esisebenzayo sifihliwe). Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa kwithebhu esebenzayo yangaphambili kunye nethebhu entsha esebenzayo, ngokulandelelanayo.

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