in English

Liste ya groupe

Ba groupes ya liste ezali composante flexible pe ya makasi pona kolakisa série ya contenus. Bobongola mpe bobakisi yango mpo na kosunga kaka pene na makambo nyonso oyo ezali na kati.

Na lokasa oyo

Ndakisa ya moboko

Lisanga ya liste ya moboko mingi ezali liste oyo ezali na molongo te na biloko ya liste mpe bakelasi oyo ebongi. Tongela likolo na yango na ba options oyo elandi, to na CSS na yo moko soki esengeli.

Eloko moko
Eloko ya mibale
Eloko ya misato
Likambo ya minei
Mpe moko ya mitano

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>

Biloko oyo ezali kosala

Bakisa .activena a .list-group-itemmpo na kolakisa kopona oyo ezali kosala sikoyo.

Eloko moko oyo ezali kosala
Eloko ya mibale
Eloko ya misato
Likambo ya minei
Mpe moko ya mitano

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>

Biloko oyo ezali na bolɛmbu

Bakisa .disabledna a .list-group-itemmpo emonana lokola ekangami. Yeba ete ba éléments mosusu na .disabledekosenga mpe JavaScript personnalisé mpo na ko désactiver entièrement ba événements na bango ya cliquage (par exemple, ba liens).

Eloko moko oyo ekangami
Eloko ya mibale
Eloko ya misato
Likambo ya minei
Mpe moko ya mitano

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>

Ba liens na ba boutons

Salelá <a>s to <button>s mpo na kosala biloko ya etuluku ya liste oyo ekoki kosala na makambo oyo ezali na hover, oyo ekangami, mpe oyo ezali kosala na kobakisa .list-group-item-action. Tokaboli ba pseudo-classes oyo pona ko assurer que ba groupes ya liste oyo esalemi na ba éléments non interactifs (lokola <li>s to <div>s) epesa te affordance ya clic to tap.

Sala makasi osalela ba classes standard.btn awa te .

Eloko ya lien ya lelo Eloko ya mibale ya lien Eloko ya misato ya lien Eloko ya minei ya lien Eloko ya lien oyo ekangami

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>

Na <button>s, okoki mpe kosalela disabledattribut na esika ya .disabledkelasi. Likambo ya mawa, <a>s esungaka te attribut oyo ekangami.

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>

Kosukola yango

Bakisa .list-group-flushmpo na kolongola mwa bandelo mpe ba coins ya arrondi mpo na kolakisa biloko ya lisanga ya liste nsɔngɛ na nsɔngɛ na kati ya eloko ya moboti (ndakisa, bakarte).

Eloko moko
Eloko ya mibale
Eloko ya misato
Likambo ya minei
Mpe moko ya mitano

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>

Bazali na banimero

Bakisa .list-group-numberedkelasi ya mobongisi (mpe na bolingi kosalela <ol>eleman moko) mpo na kopona na kati ya biloko ya etuluku ya liste oyo ezali na banimero. Mituya esalemi na nzela ya CSS (na bokeseni na <ol>s styling ya navigateur par défaut) mpo na kotia malamu na kati ya biloko ya lisanga ya liste mpe mpo na kopesa nzela na bopesi malamu koleka.

Mituya esalemi na counter-resetna <ol>, mpe na nsima esalemi na lolenge mpe etyami na ::beforepseudo-élément na <li>na counter-incrementmpe content.

Eloko moko ya liste
Eloko moko ya liste
Eloko moko ya liste

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>

Ba oyo basalaka malamu na contenus personnalisé lokola.

Motó ya likambo moke
Contenu mpo na eloko ya liste
14
Motó ya likambo moke
Contenu mpo na eloko ya liste
14
Motó ya likambo moke
Contenu mpo na eloko ya liste
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>

Ya kolala

Bakisa .list-group-horizontalmpo na kobongola bobongisi ya biloko ya lisanga ya liste uta na vertical kino na horizontal na kati ya ba points de rupture nionso. Na lolenge mosusu, pona variante oyo ezo répondre .list-group-horizontal-{sm|md|lg|xl|xxl}pona kosala groupe ya liste horizontale kobanda na point de rupture wana's min-width. Sikawa bituluku ya liste horizontale ekoki kosangisama te na bituluku ya liste ya flush.

ProTip: Olingi biloko ya etuluku ya liste ya bonene ekokani ntango ezali horizontal? Bakisa .flex-fillna eloko mokomoko ya etuluku ya liste.

Eloko moko
Eloko ya mibale
Eloko ya misato

Eloko moko
Eloko ya mibale
Eloko ya misato

Eloko moko
Eloko ya mibale
Eloko ya misato

Eloko moko
Eloko ya mibale
Eloko ya misato

Eloko moko
Eloko ya mibale
Eloko ya misato

Eloko moko
Eloko ya mibale
Eloko ya misato

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>

Ba kelasi ya contexte

Salelá bakelasi ya contexte mpo na kosala liste ya biloko oyo ezali na fond mpe langi ya état.

Eloko ya groupe ya liste par défaut ya pete
Eloko ya groupe ya liste primaire ya pete
Eloko ya groupe ya liste secondaire ya pete
Eloko ya groupe ya liste ya succès ya pete
Eloko ya groupe ya liste ya makama ya pete
Eloko ya etuluku ya liste ya likebisi ya pɛtɛɛ
Eloko ya groupe ya liste ya info ya pete
Eloko ya etuluku ya liste ya pole ya pɛtɛɛ
Eloko ya groupe ya liste ya molili ya pete

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>

Ba kelasi ya contexte esalaka mpe na .list-group-item-action. Boyeba kobakisa ba styles ya hover awa oyo ezali te na ndakisa ya liboso. Lisusu esungami ezali l’ .activeEtat; kosalela yango mpo na kolakisa koponama ya mosala na eloko ya etuluku ya liste ya contexte.

Eloko ya groupe ya liste par défaut ya pete Eloko ya groupe ya liste primaire ya pete Eloko ya groupe ya liste secondaire ya pete Eloko ya groupe ya liste ya succès ya pete Eloko ya groupe ya liste ya makama ya pete Eloko ya etuluku ya liste ya likebisi ya pɛtɛɛ Eloko ya groupe ya liste ya info ya pete Eloko ya etuluku ya liste ya pole ya pɛtɛɛ Eloko ya groupe ya liste ya molili ya pete

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>

Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .visually-hiddenkelasi.

Na ba badges

Bakisa ba badges na eloko nyonso ya groupe ya liste mpo na kolakisa ba comptes oyo etangami te, activité, mpe makambo mosusu na lisalisi ya ba utilitaires mosusu .

Eloko moko ya liste14
Eloko ya mibale ya liste2. 2
Eloko ya misato ya liste1. 1.

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>

Contenu personnalisé

Bakisa pene na HTML nyonso na kati, ata mpo na bituluku ya liste oyo ezali na boyokani lokola oyo ezali awa na nse, na lisalisi ya ba utilitaires ya flexbox .

Liste ya motó ya likambo ya eloko ya etuluku

3 mikolo eleki

Makambo mosusu oyo ezali na kati ya paragrafe moko.

Mpe mwa makomi ya mikemike.

Liste ya motó ya likambo ya eloko ya etuluku

3 mikolo eleki

Makambo mosusu oyo ezali na kati ya paragrafe moko.

Mpe mwa makomi ya mikemike oyo ezalaki kokanga mongongo.

Liste ya motó ya likambo ya eloko ya etuluku

3 mikolo eleki

Makambo mosusu oyo ezali na kati ya paragrafe moko.

Mpe mwa makomi ya mikemike oyo ezalaki kokanga mongongo.

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>

Ba cases ya kotiya bilembo mpe ba radios

Tia ba cases ya kotiya bilembo ya Bootstrap mpe ba radios na kati ya biloko ya groupe ya liste mpe sala yango na ndenge esengeli. Okoki kosalela yango kozanga <label>s, kasi kobosana te kotia aria-labelattribut mpe motuya mpo na accessibilité.

Boîte de coche ya liboso
Boîte de vérification ya mibale
Boîte de coche ya misato

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>

Radio ya liboso
Radio ya mibale
Radio ya misato

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>

Okoki kosalela .stretched-linkna <label>s mpo na kosala ete eloko ya etuluku mobimba ya liste ekoki kofina.

Boîte de coche ya liboso
Boîte de vérification ya mibale
Boîte de coche ya misato

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

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba groupes ya liste basalelaka sikoyo ba variables CSS locales na .list-grouppona personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

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

Ba variables ya Sass

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

Ba mixins

Esalemi na bosangani na $theme-colorsmpo na kobimisa ba kelasi ya variante contextuelle mpo na .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;
      }
    }
  }
}

Boucle

Boucle oyo ebimisaka ba classes ya modificateur na list-group-item-variant()mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Etamboli ya JavaScript

Salelá onglet plugin JavaScript —kotia yango mokomoko to na nzela ya bootstrap.jsfisyé oyo esangisi —mpo na koyeisa monene etuluku na biso ya liste mpo na kosala ba panneaux tabbables ya makambo ya esika.

Ndako Profil Ba messages Ba paramètres

Ba contenus ya placeholder mosusu na paragraphe moko oyo etali "Ndako". Mpe mwa makambo mosusu, esalelami awa kaka mpo na kopakola mpe kotondisa panneau oyo ya onglet. Na production, olingaki évidemment kozala na ba contenus ya solo mingi awa. Mpe kaka te bamesaje. Ekoki kozala eloko nyonso, mpenza. Makomi, bililingi, baformilɛrɛ.

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>

Kosalela ba attributs ya ba données

Okoki ko activer navigation ya groupe ya liste sans kokoma JavaScript moko te na ko préciser kaka data-bs-toggle="list"to na élément moko. Salelá bizaleli oyo ya ba données na .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>

Na nzela ya JavaScript

Activer eloko ya liste ya ba tabbables na nzela ya JavaScript (esengeli ko activer eloko moko na moko ya liste moko moko):

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

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

Okoki ko activer eloko ya liste moko moko na ba façons ebele:

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

Effet ya kosila

Mpo na kosala ete panneau ya ba onglets esili, bakisa .fadena moko na moko .tab-pane. Panneau ya onglet ya liboso esengeli mpe kozala .showna kosala ete makambo ya ebandeli emonanaka.

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

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

Ezali ko activer contenus na yo lokola élément ya onglet.

Okoki kosala instance ya tab na constructeur, ndakisa:

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

Metode	Ndimbola
`dispose`	Ebebisaka tab ya élément moko.
`getInstance`	Méthode statique oyo e permettre yo ozua instance ya onglet associé na élément DOM, okoki kosalela yango boye: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Méthode statique oyo ezongisaka instance ya onglet oyo ezo sangana na élément DOM to ezo sala ya sika au cas où ezalaki initialisé te. Okoki kosalela yango boye: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Pona tab oyo epesami mpe elakisaka panneau na yango oyo esangisi yango. Onglet mosusu nyonso oyo eponami liboso ekómaka oyo eponami te mpe etanda na yango oyo esangisi yango ebombami. Ezongi na mobengi yambo ete esika ya tab elakisama mpenza (elingi koloba liboso ete `shown.bs.tab`likambo esalema).

Makambo oyo esalemaki

Ntango ozali kolakisa tab ya sika, makambo yango ekobeta na molɔngɔ oyo elandi:

hide.bs.tab(na tab oyo ezali kosala lelo)
show.bs.tab(na tab oyo esengeli kolakisa)
hidden.bs.tab(na onglet actif ya liboso, ndenge moko na oyo ya hide.bs.tabévénement)
shown.bs.tab(na tab oyo euti kolakisa sika oyo ezali kosala sika, ndenge moko na oyo ya show.bs.tablikambo yango)

Soki onglet moko te ezalaki déjà activé, alors ba événements hide.bs.tabmpe hidden.bs.tabekobeta te.

Lolenge ya likambo	Ndimbola
`hide.bs.tab`	Evenement oyo ezo beta tango onglet ya sika esengeli kolakisa (et donc onglet actif ya kala esengeli kobombama). Salelá `event.target`mpe `event.relatedTarget`mpo na kopesa motuya na tab oyo ezali kosala sikoyo mpe onglet ya sika oyo ekosalema kala mingi te, na kolanda.
`hidden.bs.tab`	Evenement oyo ezo beta sima ya onglet ya sika elakisami (mpe bongo onglet actif ya kala ebombami). Salelá `event.target`mpe mpo na `event.relatedTarget`ko cibler onglet active ya kala mpe onglet active ya sika, respectivement.
`show.bs.tab`	Evenement oyo ezo beta na tab show, mais avant onglet ya sika elakisama. Salelá `event.target`mpe mpo na `event.relatedTarget`ko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement.
`shown.bs.tab`	Evenement oyo ezo beta na tab show sima ya tab moko elakisama. Salelá `event.target`mpe mpo na `event.relatedTarget`ko cibler onglet active mpe onglet active ya kala (soki ezali) respectivement.

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