Lis gwoup

Gwoup lis yo se yon eleman fleksib ak pwisan pou montre yon seri kontni. Modifye ak pwolonje yo pou sipòte prèske nenpòt kontni andedan.

Nan paj sa a

Egzanp de baz

Gwoup lis ki pi fondamantal la se yon lis ki pa gen lòd ak atik lis yo ak klas apwopriye yo. Bati sou li ak opsyon ki swiv yo, oswa ak pwòp CSS ou jan sa nesesè.

Yon atik
Yon dezyèm atik
Yon twazyèm atik
Yon katriyèm atik
Ak yon senkyèm youn

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>

Atik aktif

Ajoute .activenan yon .list-group-itempou endike seleksyon aktif aktyèl la.

Yon atik aktif
Yon dezyèm atik
Yon twazyèm atik
Yon katriyèm atik
Ak yon senkyèm youn

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>

Atik ki andikape

Ajoute .disablednan yon .list-group-itempou fè li parèt enfim. Remake byen ke kèk eleman ak .disabledyo pral mande tou JavaScript koutim konplètman enfim evènman klike sou yo (egzanp, lyen).

Yon atik ki andikape
Yon dezyèm atik
Yon twazyèm atik
Yon katriyèm atik
Ak yon senkyèm youn

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>

Lyen ak bouton

Sèvi ak <a>s oswa <button>s pou kreye atik gwoup lis aksyon ak eta hover, andikape, ak aktif lè w ajoute .list-group-item-action. Nou separe pseudo-klas sa yo pou asire gwoup lis ki fèt ak eleman ki pa entèaktif (tankou <li>s oswa <div>s) pa bay yon abònman klike sou oswa tiyo.

Asire w ou pa sèvi ak klas estanda .btnyo isit la .

Atik lyen aktyèl la Yon dezyèm atik lyen Yon twazyèm atik lyen Yon atik lyen katriyèm Yon atik lyen ki andikape

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>

Avèk <button>s, ou ka sèvi ak disabledatribi a olye pou .disabledklas la. Malerezman, <a>yo pa sipòte atribi ki andikape.

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

Ajoute .list-group-flushpou retire kèk fwontyè ak kwen awondi pou rann atik gwoup lis kwen-a-bò nan yon veso paran (pa egzanp, kat).

Yon atik
Yon dezyèm atik
Yon twazyèm atik
Yon katriyèm atik
Ak yon senkyèm youn

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>

Nimero

Ajoute .list-group-numberedklas modifikatè a (epi opsyonèl itilize yon <ol>eleman) pou patisipe nan atik gwoup lis nimewote yo. Nimewo yo pwodwi atravè CSS (kontrèman ak <ol>style navigatè defo a) pou pi bon plasman andedan atik gwoup lis yo epi pou pèmèt pi bon personnalisation.

Nimewo yo te pwodwi pa counter-resetsou <ol>, ak Lè sa a, estile epi mete ak yon ::beforepseudo-eleman sou la <li>ak counter-incrementak content.

Yon atik lis
Yon atik lis
Yon atik lis

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>

Sa yo travay anpil ak kontni koutim tou.

Soutit
Kontni pou atik lis la
14
Soutit
Kontni pou atik lis la
14
Soutit
Kontni pou atik lis la
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>

Orizontal

Ajoute .list-group-horizontalpou chanje Layout atik gwoup lis yo soti nan vètikal a orizontal atravè tout pwen rupture. Altènativman, chwazi yon varyant ki reponn .list-group-horizontal-{sm|md|lg|xl|xxl}pou fè yon gwoup lis orizontal apati pwen breakpoint sa a min-width. Aktyèlman gwoup lis orizontal pa ka konbine avèk gwoup lis flush.

ProTip: Vle atik gwoup lis egal-lajè lè orizontal? Ajoute .flex-fillnan chak atik gwoup lis.

Yon atik
Yon dezyèm atik
Yon twazyèm atik

Yon atik
Yon dezyèm atik
Yon twazyèm atik

Yon atik
Yon dezyèm atik
Yon twazyèm atik

Yon atik
Yon dezyèm atik
Yon twazyèm atik

Yon atik
Yon dezyèm atik
Yon twazyèm atik

Yon atik
Yon dezyèm atik
Yon twazyèm atik

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>

Klas kontèks yo

Sèvi ak klas kontèks pou style atik lis yo ak yon background ak koulè.

Yon senp atik gwoup lis default
Yon senp atik gwoup lis prensipal
Yon senp atik gwoup lis segondè
Yon senp atik gwoup lis siksè
Yon senp atik gwoup lis danje
Yon atik gwoup lis avètisman senp
Yon atik gwoup lis enfòmasyon senp
Yon senp atik gwoup lis limyè
Yon senp atik gwoup lis nwa

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>

Klas kontèks yo travay tou ak .list-group-item-action. Remake byen adisyon nan estil yo hover isit la pa prezan nan egzanp anvan an. Leta sipòte tou .active; aplike li pou endike yon seleksyon aktif sou yon atik gwoup lis kontèks.

Yon senp atik gwoup lis default Yon senp atik gwoup lis prensipal Yon senp atik gwoup lis segondè Yon senp atik gwoup lis siksè Yon senp atik gwoup lis danje Yon atik gwoup lis avètisman senp Yon atik gwoup lis enfòmasyon senp Yon senp atik gwoup lis limyè Yon senp atik gwoup lis nwa

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>

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .visually-hiddenklas la.

Avèk badj

Ajoute badj nan nenpòt atik gwoup lis pou montre konte yo, aktivite, ak plis ankò avèk èd kèk sèvis piblik .

Yon atik lis14
Yon dezyèm atik lis2
Yon twazyèm atik lis1

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>

Kontni Custom

Ajoute prèske nenpòt HTML nan, menm pou gwoup lis ki lye tankou sa ki anba a, avèk èd nan sèvis piblik flexbox .

Lis gwoup atik tit

3 jou de sa

Gen kèk kontni anplasman nan yon paragraf.

Ak kèk ti enprime.

Lis gwoup atik tit

3 jou de sa

Gen kèk kontni anplasman nan yon paragraf.

Ak kèk ti enprime muet.

Lis gwoup atik tit

3 jou de sa

Gen kèk kontni anplasman nan yon paragraf.

Ak kèk ti enprime muet.

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>

Case ak radyo

Mete kaz ak radyo Bootstrap yo nan atik gwoup lis yo epi pèsonalize jan sa nesesè. Ou ka sèvi ak yo san yo pa <label>s, men tanpri sonje mete yon aria-labelatribi ak valè pou aksè.

Premye kaz
Dezyèm kaz
Twazyèm kaz

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>

Premye radyo
Dezyèm radyo
Twazyèm radyo

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>

Ou ka itilize .stretched-linksou <label>s pou fè tout atik gwoup lis la klike sou.

Premye kaz
Dezyèm kaz
Twazyèm kaz

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

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch Bootstrap a evolye varyab CSS, gwoup lis kounye a itilize varyab CSS lokal yo .list-grouppou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

  --#{$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 varyab

$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

Itilize ansanm ak $theme-colorspou jenere klas varyant kontèks pou .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;
      }
    }
  }
}

Bouk

Bouk ki jenere klas modifye yo ak list-group-item-variant()mixin la.

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

Konpòtman JavaScript

Sèvi ak tab JavaScript plugin la—enkli li endividyèlman oswa atravè bootstrap.jsfichye konpile a—pou pwolonje gwoup lis nou an pou kreye fenèt tabulab nan kontni lokal yo.

Lakay Profile Mesaj Anviwònman

Gen kèk kontni anplasman nan yon paragraf ki gen rapò ak "Lakay". Ak kèk plis kontni, yo itilize isit la jis pad deyò epi ranpli panèl tab sa a. Nan pwodiksyon, ou ta evidamman gen plis kontni reyèl isit la. Epi li pa jis tèks. Li ta ka nenpòt bagay, reyèlman. Tèks, imaj, fòm.

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>

Sèvi ak atribi done yo

Ou ka aktive yon navigasyon gwoup lis san yo pa ekri okenn JavaScript pa senpleman espesifye data-bs-toggle="list"oswa sou yon eleman. Sèvi ak atribi done sa yo sou .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

Pèmèt atik lis tabable atravè JavaScript (yo dwe aktive chak atik nan lis endividyèlman):

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

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

Ou ka aktive atik endividyèl lis nan plizyè fason:

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

Efè fennen

Pou fè panèl onglets fennen nan, ajoute .fadenan chak .tab-pane. Premye volet tab la dwe genyen tou .showpou fè kontni inisyal la vizib.

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

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

Aktive kontni ou kòm yon eleman tab.

Ou ka kreye yon egzanp tab ak konstrukteur a, pou egzanp:

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

Metòd	Deskripsyon
`dispose`	Detwi tab yon eleman.
`getInstance`	Metòd estatik ki pèmèt ou jwenn egzanp tab ki asosye ak yon eleman DOM, ou ka itilize li tankou sa a: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Metòd estatik ki retounen yon egzanp tab ki asosye ak yon eleman DOM oswa kreye yon nouvo nan ka li pa te inisyalize. Ou ka itilize li tankou sa a: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Chwazi tab la bay epi li montre fenèt ki asosye li yo. Nenpòt lòt tab ki te chwazi deja vin pa seleksyone epi fenèt ki asosye li yo kache. Retounen bay moun kap rele a anvan yo te montre volet tab la (sa vle di anvan `shown.bs.tab`evènman an rive).

Evènman

Lè w ap montre yon nouvo tab, evènman yo pran dife nan lòd sa a:

hide.bs.tab(sou onglet aktif aktyèl la)
show.bs.tab(sou onglet ki dwe montre)
hidden.bs.tab(sou onglet aktif anvan an, menm jan ak hide.bs.tabevènman an)
shown.bs.tab(sou onglet ki fèk parèt aktif la, menm bagay la tou pou show.bs.tabevènman an)

Si pa gen okenn tab te deja aktif, Lè sa a, hide.bs.tabak hidden.bs.tabevènman yo pa pral revoke.

Kalite evènman	Deskripsyon
`hide.bs.tab`	Evènman sa a dife lè yon nouvo tab yo dwe montre (e konsa tab aktif anvan an dwe kache). Sèvi `event.target`ak ak `event.relatedTarget`pou vize onglet aktyèl la aktif ak nouvo tab la byento-a-aktif, respektivman.
`hidden.bs.tab`	Evènman sa a dife apre yo fin montre yon nouvo tab (e konsa tab aktif anvan an kache). Sèvi `event.target`ak ak `event.relatedTarget`pou vize tab aktif anvan an ak nouvo tab aktif la, respektivman.
`show.bs.tab`	Evènman sa a dife sou tab montre, men anvan yo te montre nouvo tab la. Sèvi `event.target`ak ak `event.relatedTarget`pou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
`shown.bs.tab`	Evènman sa a pran dife sou tab montre apre yo fin montre yon tab. Sèvi `event.target`ak ak `event.relatedTarget`pou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.

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