Listo grupo

Listogrupoj estas fleksebla kaj potenca komponanto por montri serion de enhavo. Modifi kaj etendi ilin por subteni preskaŭ ajnan enhavon ene.

Sur ĉi tiu paĝo

Baza ekzemplo

La plej baza listogrupo estas neordigita listo kun listeroj kaj la taŭgaj klasoj. Konstruu ĝin per la ebloj kiuj sekvas, aŭ per via propra CSS laŭbezone.

Ero
Dua ero
Tria ero
Kvara ero
Kaj kvina

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>

Aktivaj eroj

Aldonu .activeal a .list-group-itempor indiki la nunan aktivan elekton.

Aktiva ero
Dua ero
Tria ero
Kvara ero
Kaj kvina

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>

Malebligitaj eroj

Aldonu .disabledal a .list-group-itempor ke ĝi aspektu malŝaltita. Notu, ke iuj elementoj kun .disabledankaŭ postulos kutiman JavaScript por plene malŝalti siajn klakajn eventojn (ekz. ligiloj).

Malebligita ero
Dua ero
Tria ero
Kvara ero
Kaj kvina

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>

Ligiloj kaj butonoj

Uzu <a>s aŭ <button>s por krei ageblajn listajn gruperojn kun ŝvebado, malfunkciigita kaj aktiva statoj aldonante .list-group-item-action. Ni apartigas ĉi tiujn pseŭdo-klasojn por certigi, ke listogrupoj faritaj el ne-interagaj elementoj (kiel <li>s aŭ <div>s) ne donas alklakon aŭ frapeton.

Nepre ne uzu la normajn .btnklasojn ĉi tie .

La nuna ligaĵo Dua ligilo Tria ligilo Kvara ligilo Malŝaltita ligaĵo

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>

Per <button>s, vi ankaŭ povas uzi la disabledatributon anstataŭ la .disabledklason. Bedaŭrinde, <a>s ne subtenas la malfunkciigitan atributon.

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

Aldonu .list-group-flushpor forigi kelkajn randojn kaj rondigitajn angulojn por bildigi listgrupojn rando al rando en gepatra ujo (ekz. kartoj).

Ero
Dua ero
Tria ero
Kvara ero
Kaj kvina

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>

Nombrita

Aldonu la .list-group-numberedmodifklason (kaj laŭvole uzu <ol>elementon) por elekti numeritajn listgrupojn. Nombroj estas generitaj per CSS (kontraste al <ol>defaŭlta retumila stilo) por pli bona lokigo ene de listgrupoj kaj por permesi pli bonan personigon.

Nombroj estas generitaj per counter-resetsur la <ol>, kaj poste stilitaj kaj metitaj kun ::beforepseŭdo-elemento sur la <li>kun counter-incrementkaj content.

Lista ero
Lista ero
Lista ero

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>

Ĉi tiuj funkcias bonege kun kutima enhavo ankaŭ.

Subtitolo
Enhavo por listero
14
Subtitolo
Enhavo por listero
14
Subtitolo
Enhavo por listero
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>

Horizontala

Aldonu .list-group-horizontalpor ŝanĝi la aranĝon de listgrupoj de vertikala al horizontala tra ĉiuj rompopunktoj. Alternative, elektu respondeman varianton .list-group-horizontal-{sm|md|lg|xl|xxl}por fari listgrupon horizontala komencante ĉe tiu rompopunkto min-width. Nuntempe horizontalaj listogrupoj ne povas esti kombinitaj kun fluaj listogrupoj.

ProTip: Ĉu vi volas egallarĝajn listajn grupaĵojn kiam horizontale? Aldonu .flex-fillal ĉiu listo grupo eron.

Ero
Dua ero
Tria ero

Ero
Dua ero
Tria ero

Ero
Dua ero
Tria ero

Ero
Dua ero
Tria ero

Ero
Dua ero
Tria ero

Ero
Dua ero
Tria ero

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>

Kuntekstaj klasoj

Uzu kuntekstajn klasojn por stiligi listaĵojn kun laŭta fono kaj koloro.

Simpla defaŭlta listo grupelemento
Simpla primara lista grupero
Simpla sekundara listo-grupelemento
Simpla sukceslista grupa ero
Simpla danĝerlisto grupaĵo
Simpla avertlista grupero
Simpla infolisto grupa ero
Simpla lumlista grupaĵo
Simpla malhela listo grupaĵo

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>

Kuntekstaj klasoj ankaŭ funkcias kun .list-group-item-action. Notu la aldonon de la ŝvebstiloj ĉi tie ne ĉeestantaj en la antaŭa ekzemplo. Ankaŭ subtenas la .activeŝtato; apliku ĝin por indiki aktivan elekton sur kunteksta listo grupelemento.

Simpla defaŭlta listo grupelemento Simpla primara lista grupero Simpla sekundara listo-grupelemento Simpla sukceslista grupa ero Simpla danĝerlisto grupaĵo Simpla avertlista grupero Simpla infolisto grupa ero Simpla lumlista grupaĵo Simpla malhela listo grupaĵo

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>

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hiddenklaso.

Kun insignoj

Aldonu insignojn al iu ajn listgrupo por montri nelegitajn kalkulojn, agadon kaj pli helpe de iuj iloj .

Lista ero14
Dua listero2
Tria listero1

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>

Propra enhavo

Aldonu preskaŭ ajnan HTML-on ene, eĉ por ligitaj listogrupoj kiel tiu ĉi sube, helpe de flexbox-utiloj .

Listo de grupa rubriko

antaŭ 3 tagoj

Iu lokokupilo enhavo en alineo.

Kaj iom da eta printaĵo.

Listo de grupa rubriko

antaŭ 3 tagoj

Iu lokokupilo enhavo en alineo.

Kaj iuj silentigitaj etaj literoj.

Listo de grupa rubriko

antaŭ 3 tagoj

Iu lokokupilo enhavo en alineo.

Kaj iuj silentigitaj etaj literoj.

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>

Markobutonoj kaj radioj

Metu la markobutonojn kaj radiojn de Bootstrap ene de listgrupoj kaj agordu laŭbezone. Vi povas uzi ilin sen <label>s, sed bonvolu memori inkluzivi aria-labelatributon kaj valoron por alirebleco.

Unua markobutono
Dua markobutono
Tria markobutono

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>

Unua radio
Dua radio
Tria radio

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>

Vi povas uzi .stretched-linkon <label>s por alklakebla la tuta listo de grupo.

Unua markobutono
Dua markobutono
Tria markobutono

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

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, listgrupoj nun uzas lokajn CSS .list-group-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

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

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

Miksinoj

Uzita en kombinaĵo kun $theme-colorspor generi la kuntekstajn variantajn klasojn por .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;
      }
    }
  }
}

Buklo

Buklo kiu generas la modifklasojn kun la list-group-item-variant()miksaĵo.

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

Uzu la langetan JavaScript-kromaĵon—inkludu ĝin individue aŭ per la kompilita bootstrap.jsdosiero—por pligrandigi nian listgrupon por krei tabulajn fenestrojn de loka enhavo.

Hejmo Profilo Mesaĝoj Agordoj

Iu lokokupilo enhavo en paragrafo rilatanta al "Hejmo". Kaj iom pli da enhavo, uzata ĉi tie nur por plenigi ĉi tiun langetan panelon. En produktado, vi evidente havus pli realan enhavon ĉi tie. Kaj ne nur teksto. Ĝi povus esti io ajn, vere. Teksto, bildoj, formoj.

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>

Uzante datumajn atributojn

Vi povas aktivigi listan grupnavigadon sen verki JavaScript per simple specifi data-bs-toggle="list"aŭ sur elemento. Uzu ĉi tiujn datumajn atributojn sur .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>

Per JavaScript

Ebligu tabeleblan listeron per JavaScript (ĉiu listero devas esti aktivigita individue):

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

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

Vi povas aktivigi individuan listeron en pluraj manieroj:

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 efiko

Por ke klapeta panelo fadiĝu, aldonu .fadeal ĉiu .tab-pane. La unua klapeta panelo ankaŭ devas .showvidigi la komencan enhavon.

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

Metodoj

Nesinkronaj metodoj kaj transiroj

Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .

Vidu nian JavaScript-dokumentaron por pliaj informoj .

Aktivigas vian enhavon kiel tabula elemento.

Vi povas krei langeton per la konstrukciisto, ekzemple:

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

Metodo	Priskribo
`dispose`	Detruas la langeton de elemento.
`getInstance`	Senmova metodo, kiu ebligas al vi akiri la langeton-instancon asociitan kun DOM-elemento, vi povas uzi ĝin jene: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Senmova metodo kiu resendas langeto-okazaĵon asociitan al DOM-elemento aŭ kreas novan se ĝi ne estis pravigita. Vi povas uzi ĝin tiel: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Elektas la donitan langeton kaj montras ĝian rilatan panelon. Ajna alia langeto, kiu estis antaŭe elektita, fariĝas neelektita kaj ĝia rilata panelo estas kaŝita. Revenas al la alvokanto antaŭ ol la langeto-fenestro efektive estis montrita (te antaŭ ol la `shown.bs.tab`evento okazas).

Eventoj

Kiam oni montras novan langeton, la eventoj ekfunkciigas en la sekva sinsekvo:

hide.bs.tab(en la nuna aktiva langeto)
show.bs.tab(en la montrota langeto)
hidden.bs.tab(sur la antaŭa aktiva langeto, la sama kiel por la hide.bs.tabevento)
shown.bs.tab(en la lastatempe aktiva ĵus montrita langeto, la sama kiel por la show.bs.tabevento)

Se neniu langeto jam estis aktiva, tiam la eventoj hide.bs.tabkaj hidden.bs.tabne estos pafitaj.

Eventa tipo	Priskribo
`hide.bs.tab`	Ĉi tiu evento pafas kiam nova langeto estas montrata (kaj tiel la antaŭa aktiva langeto estas kaŝota). Uzu `event.target`kaj `event.relatedTarget`por celi la nunan aktivan langeton kaj la novan baldaŭ aktivan langeton, respektive.
`hidden.bs.tab`	Ĉi tiu evento ekfunkcias post kiam nova langeto estas montrita (kaj tiel la antaŭa aktiva langeto estas kaŝita). Uzu `event.target`kaj `event.relatedTarget`por celi la antaŭan aktivan langeton kaj la novan aktivan langeton, respektive.
`show.bs.tab`	Ĉi tiu evento ekfunkciigas sur langeto, sed antaŭ ol la nova langeto estis montrita. Uzu `event.target`kaj `event.relatedTarget`por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.
`shown.bs.tab`	Ĉi tiu evento ekfunkciigas sur langeto-spektaklo post kiam langeto estis montrita. Uzu `event.target`kaj `event.relatedTarget`por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.

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