in English

Lista qutu

Lista huñukuna huk flexible chaymanta atiyniyuq componente kanku huk serie contenidota rikuchinapaq. Modificar y extenderlos para apoyar solo cualquier contenido dentro.

Kay p'anqapi

Ejemplo básico

Aswan sapaq lista huñu huk mana kamachisqa lista lista elementokunayuq chaymanta allin clasekunayuq. Chaypi ruway qatiq akllanakunawan, utaq kikiyki CSS kaqwan necesitasqanmanhina.

Huk imapas
Iskay kaq imapas
Kimsa kaq item
Tawa kaq item
Hinaspa huk pichqa kaq

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

Artículos activos

Kunan llamk'achisqa akllasqa kaqta rikuchinapaq .activehuk kaqman yapay ..list-group-item

Huk llamk’aq kaq
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Mana atiq kaqkuna

Hukman yapay .disabledmana .list-group-itematisqa hina rikurinanpaq . Reparay wakin elementokuna kaqwan .disabledruwasqa JavaScript kaqtapas mañanqanku hunt'asqata mana llamk'achinankupaq ñit'iy ruwayninkuta (kayhina, t'inkikuna).

Huk mana atiq kaq
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Enlaces y botones

<a>s utaq <button>s llamk'achiy ruwanapaq lista huñu imakuna ruwanapaq hover kaqwan, mana llamk'achisqa kaqwan chaymanta ruwasqa estadokunawan yapaspa .list-group-item-action. Kay pseudo-clases t'aqayku lista qutukuna mana interactivo elementokunamanta ruwasqa ( <li>s utaq <div>s hina) mana huk ñit'iy utaq tap affordance qunkuchu.

Aseguray ama kaypi clasekuna estándarta llamk'achiyta.btn .

Kunan kaq t'inki kaq Iskay kaq t’inkisqa kaq Kimsa kaq t’inki kaq Tawa kaq t’inkisqa kaq Huk mana llamk'achisqa t'inki kaq

<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

<button>s nisqawanqa, clasepa rantinpi disabledatribututapas llamk'achiyta atinki. .disabledLlakikuypaqmi, <a>s mana atichisqa atributota yanapanchu.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Enjuague

Yanapakuy .list-group-flushwakin k'uchukunata chaymanta muyu k'uchukunata hurqunapaq lista huñu imakuna kantumanta kantuman huk tayta waqaychanapi ruwanapaq (kayhina, tarjetakuna).

Huk imapas
Iskay kaq imapas
Kimsa kaq item
Tawa kaq item
Hinaspa huk pichqa kaq

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

Yupasqa

.list-group-numberedTikraq claseta yapay (hinallataq munasqaykimanta huk <ol>elementota llamk'achiy) yupasqa lista huñu imakuna kaqpi akllanapaq. Yupaykuna CSS kaqnintakama ruwasqa kanku (huk <ol>s ñawpaqmanta maskaq estilo kaqmanta) aswan allin churanapaq lista huñu imakuna ukhupi chaymanta aswan allin ruwanapaq saqinanpaq.

counter-resetYupaykunaqa , nisqapi nisqawanmi paqarichisqa <ol>, chaymantataqmi estilochasqa hinaspa huk ::beforepseudo-elementowan churasqa kachkan <li>with nisqapi counter-incrementchaymanta content.

Cras justo odio
Cras justo odio
Cras justo odio

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Kaykunaqa ancha allinta llamk'anku sapanchasqa contenidowan hinallataq.

Subtítulo
Cras justo odio
14
Subtítulo
Cras justo odio
14
Subtítulo
Cras justo odio
14

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Kinranpa

Yanapakuy .list-group-horizontallista huñu imakunap churayninta sayaqmanta sayaqman llapa pakinakunapi tikranapaq. Hukninpi, huk kutichiq variante akllay huk .list-group-horizontal-{sm|md|lg|xl|xxl}lista huñu horizontal ruwanapaq chay breakpoint kaqmanta qallarispa min-width. Kunanqa horizontal lista qutukunataqa manam flush lista qutukunawan tinkuchiyta atikunmanchu.

ProTip: ¿Hayka anchoyuq lista huñu imakunata munankichu horizontal kachkaptin? .flex-fillSapa lista huñupi kaqkunaman yapay .

Huk imapas
Iskay kaq imapas
Kimsa kaq item

Huk imapas
Iskay kaq imapas
Kimsa kaq item

Huk imapas
Iskay kaq imapas
Kimsa kaq item

Huk imapas
Iskay kaq imapas
Kimsa kaq item

Huk imapas
Iskay kaq imapas
Kimsa kaq item

Huk imapas
Iskay kaq imapas
Kimsa kaq item

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

Clases contextuales nisqa

Contextual clasekunata llamk'achiy, estadoyuq qhipaman, llimp'iyuq imakuna listapaq estilopaq.

Huk sanu ñawpaqmanta churasqa lista huñu elemento
Huk sanu primaria lista huñu elemento
Huk sanu iskay kaq lista huñu elemento
Huk sanu allin ruway lista huñu elemento
Huk sanu peligro lista huñu elemento
Huk sanu willakuy lista huñu elemento
Huk sanu info lista huñu elemento
Huk sanu k’anchay lista huñu elemento
Huk sanu tutayaq lista huñu elemento

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

Clases contextual nisqakunapas llamkanku .list-group-item-action. Reparay kaypi hover estilokuna yapasqa kaqta mana ñawpaq ejemplopi kaqchu. Shinallatak mamallakta yanapashkami kan .active; chayta churay huk ruwasqa akllanata rikuchinapaq huk contextual lista huñu elemento kaqpi.

Huk sanu ñawpaqmanta churasqa lista huñu elemento Huk sanu primaria lista huñu elemento Huk sanu iskay kaq lista huñu elemento Huk sanu allin ruway lista huñu elemento Huk sanu peligro lista huñu elemento Huk sanu willakuy lista huñu elemento Huk sanu info lista huñu elemento Huk sanu k’anchay lista huñu elemento Huk sanu tutayaq lista huñu elemento

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

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .visually-hiddenclasewan pakasqa.

Insigniakunawan

Insigniakunata mayqin lista huñu kaqmanpas yapay mana ñawirisqa yupaykunata, ruwayta chaymanta aswan wakin yanapakuykunawan rikuchinapaq .

Huk lista nisqapi kaq14
Iskay kaq lista nisqapi kaq2.
Kimsa kaq lista nisqapi kaq1.

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

Contenido personalizado

Yaqa mayqin HTML ukhupipas yapay, uraypi kaqhina t'inkisqa lista huñukunapaqpas, flexbox yanapakuykunawan yanapakuywan .

Huñupi kaqpa umalliqninta qillqay

3 punchaw ñawpaqta

Huk parrafopi wakin sitiokuna contenido.

Y algunas letras pequeñas.

Huñupi kaqpa umalliqninta qillqay

3 punchaw ñawpaqta

Huk parrafopi wakin sitiokuna contenido.

Hinaspa wakinqa uchuy qillqakunata upallachirqaku.

Huñupi kaqpa umalliqninta qillqay

3 punchaw ñawpaqta

Huk parrafopi wakin sitiokuna contenido.

Hinaspa wakinqa uchuy qillqakunata upallachirqaku.

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

Cajas de verificación y radios

Bootstrap kaqpa qhaway qutukuna chaymanta radiokuna lista qutu imakuna ukhupi churay chaymanta necesitasqanmanhina ruway. Mana <label>s kaqwan llamk'achiy atikunki, ichataq ama hina kaspa yuyariy huk aria-labelatributo chaymanta chanin yaykuypaq churayta.

Ñawpaq kaq cuadro de verificación
Iskay kaq cuadrocha
Kimsa kaq qillqana mayt’u
Tawa kaq qillqana mayt’u
Pichqa kaq qillqana maytu

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Hinaspa sichus munanki <label>s hina chay .list-group-itemhatun golpe áreaspaq, chayta ruwayta atinki, hinallataq.

Ñawpaq kaq cuadro de verificación Iskay kaq cuadrocha Kimsa kaq qillqana mayt’u Tawa kaq qillqana mayt’u Pichqa kaq qillqana maytu

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Variables nisqakuna

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

Mixinkuna

Utilizado en combinación con $theme-colorspara generar las clases de variante contextual para .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;
      }
    }
  }
}

Kutipayay

Mixinwan tikraq clasekunata paqarichiq list-group-item-variant()llimp'i.

// 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 nisqap ruwaynin

JavaScript plugin tablata llamk'achiy —sapallan utaq huñusqa bootstrap.jswillañiqi kaqnintakama churay— lista qutuyku mast'ariypaq tablakuna ruwanakuna kitipi ruwanakuna ruwanapaq.

Wasi Runapa kaynin Willakuykuna Ajustes

Wakin tiyanapaq contenido huk parrafopi "Wasi" kaqwan tupaq. Y algunos contenidos más, utilizados aquí solo para pad out y llenar este panel de fichas. Producción nisqapiqa, sut’imanta kaypi aswan chiqap contenidoyuq kankiman. Y no solo texto. Imapas kanmanmi, chiqaptapuni. Texto, imágenes, formas.

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>

Atributos de datos nisqawan yanapachikuspa

Huk lista huñu puriyta llamk'achiyta atikunki mana ima JavaScript qillqaspalla data-bs-toggle="list", huk elemento kaqpi willaspalla. Kay willay layakunata llamk'achiy .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>

JavaScript nisqawan

JavaScript kaqnintakama tablakuna lista kaqmanta atichiy (sapa lista kaqmanta sapalla llamk'achinan tiyan):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Sapa lista elementota achka ruwaykunapi llamk'achiyta atikunki:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Efecto de desvanecer

Panel de tablas chinkananpaq, .fadesapakamaman yapay .tab-pane. Ñawpaq kaq tabla panelpas .showqallariy contenido rikukuq kananpaq kanan tiyan.

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

Métodos

constructor

Huk lista elemento elementota chaymanta contenido waqaychanata llamk'achin. Tab huk data-bs-targetutaq huk hreftargeting huk contenedor nodo DOM kaqpi kanan tiyan.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

qawachiy

Qusqa lista elementota akllan chaymanta tinkisqa panelninta rikuchin. Ima huk lista kaqpas ñawpaq akllasqa karqan mana akllasqaman tukun chaymanta tinkisqa panelnin pakasqa. Llamaqman kutimun manaraq tab panel chiqamanta rikuchisqa kachkaptin (kayhina, manaraq shown.bs.tabsuceso ruwakuchkaptin).

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

  tab.show()

wischuy

Huk elementopa tablanta chinkachin.

GetInstancia

Método estático mayqinchus huk DOM elementowan tinkisqa tabla instanciata jap'iyta atikun

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

Instanciata tariyUtaq Ruway

Método estático mayqinchus huk DOM elementowan tinkisqa tab instanciata hap'iyta atikun, utaq musuq ruwayta sichus mana qallarisqachu karqa

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

Eventos nisqakuna

Musuq tablata rikuchispa, sucesokuna kay ordenpi ninawan:

hide.bs.tab(kunan llamk'aq tablapi)
show.bs.tab(qhawanapaq kaq tablapi)
hidden.bs.tab(ñawpaq ruwaq tablapi, kikin hide.bs.tabruwaypaq)
shown.bs.tab(musuq-ruray chayraq rikuchisqa ñiqipi, kikin show.bs.tabruwaypaq)

Sichus mana mayqin tablapas llamk'achisqañachu karqan, hide.bs.tabchaymanta hidden.bs.tabruwaykuna mana llamk'achisqachu kanqa.

Tipo de evento	Willay
`show.bs.tab`	Kay ruwayqa tabla rikuchiypi ninawan, ichaqa manaraq musuq tabla rikuchisqa kachkaptin. Utilizar `event.target`y `event.relatedTarget`para target a la pestaña activa y la pestaña activo anterior (si está disponible) respectivamente.
`shown.bs.tab`	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`hide.bs.tab`	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
`hidden.bs.tab`	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.

var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}