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

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>

Izinto ezisebenzayo

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

Into esebenzayo
Into yesibini
Into yesithathu
Into yesine
Kwaye owesihlanu

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>

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
Into yesibini
Into yesithathu
Into yesine
Kwaye owesihlanu

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>

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

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>

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

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>

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

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>

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

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>

Ezi zisebenza kakuhle kunye nomxholo wesiko ngokunjalo.

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

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

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

Irediyo yokuqala
Unomathotholo wesibini
Unomathotholo wesithathu

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>

Ungasebenzisa .stretched-linkkwi <label>s ukwenza uluhlu lonke lweqela umba ucofa.

Ibhokisi yokujonga kuqala
Ibhokisi yokukhangela yesibini
Ibhokisi yokukhangela yesithathu

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

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yeBootstrap eguquguqukayo yeCSS, amaqela oluhlu ngoku asebenzisa izinto eziguquguqukayo zeCSS zasekhaya .list-groupukuze kuphuculwe ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Iinguqu zeSass

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

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

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

Unokwenza uluhlu ngalunye lusebenze ngeendlela ezininzi:

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

Iindlela ze-Asynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

Yenza umxholo wakho njengento yethebhu.

Unokwenza umzekelo wethebhu kunye nomakhi, umzekelo:

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

Indlela	Inkcazo
`dispose`	Uyonakalisa ithebhu yesiqalelo.
`getInstance`	Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wesithuba esidityaniswe nesiqalelo seDOM, ungayisebenzisa ngolu hlobo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Indlela engatshintshiyo ebuyisela umzekelo wethebhu edityaniswe kwinto yeDOM okanye wenze entsha ukuba ayiqalwanga. Ungayisebenzisa ngolu hlobo `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Ikhetha isithuba esinikiweyo kwaye ibonise isahlulo sayo esinxulumeneyo. Nayiphi enye isithuba ebesikhe yakhethwa ngaphambili ayikhethwanga kwaye isahlulo sayo esinxulumeneyo siyafihlwa. Ibuyisela kumnxebi phambi kokuba ipayini yethebhu iboniswe ngokwenene (okt phambi kokuba `shown.bs.tab`isiganeko senzeke).

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, ngoko i hide.bs.tabkunye hidden.bs.tabneziganeko aziyi kugxothwa.

Uhlobo lomsitho	Inkcazo
`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.
`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.

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