Saltar al contenido principal Salta a docs navegación
Check
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ñuqa 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
html nisqapi 
<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
  • Iskay kaq imapas
  • Kimsa kaq item
  • Tawa kaq item
  • Hinaspa huk pichqa kaq
html nisqapi 
<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
  • Iskay kaq imapas
  • Kimsa kaq item
  • Tawa kaq item
  • Hinaspa huk pichqa kaq
html nisqapi 
<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>

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

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

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

Enjuague

Yanapakuy .list-group-flushwakin k'uchukunata hurqunapaq chaymanta muyu k'uchukunata 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
html nisqapi 
<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.

  1. Huk lista nisqapi kaq
  2. Huk lista nisqapi kaq
  3. Huk lista nisqapi kaq
html nisqapi 
<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>

Kaykunaqa ancha allinta llamk'anku sapanchasqa contenidowan hinallataq.

  1. Subtítulo
    Contenido para elemento de lista
    14
  2. Subtítulo
    Contenido para elemento de lista
    14
  3. Subtítulo
    Contenido para elemento de lista
    14
html nisqapi 
<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>

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
html nisqapi 
<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
html nisqapi 
<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
html nisqapi 
<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 pakasqa kaqwan.visually-hidden clasewan 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.
html nisqapi 
<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.
html nisqapi 
<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.

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

.stretched-links nisqapi llamk'achiy atikunki <label>tukuy lista huñu elemento ñit'inapaq kananpaq.

html nisqapi 
<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 nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñachkaq CSS tikraqkuna asuykuyninmanta huknin hina, lista qutukuna kunan kiti CSS tikraqkunata llamk'achinku .list-groupallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

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

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 kaqpi, 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):

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

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

Sapa lista elementota achka ruwaykunapi llamk'achiyta atikunki:

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

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

Métodos y transiciones asíncronas

Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .

Aswan willakuypaq JavaScript qillqaykuta qhaway .

Contenidoykita huk elemento de pestaña hina activan.

Ruraqwan huk tabla instanciata ruwayta atinki, ahinataq:

const bsTab = new bootstrap.Tab('#myTab')
Imayna Willay
dispose Huk elementopa tablanta chinkachin.
getInstance Método estático mayqinchus huk DOM elementowan tinkisqa tab instanciata hap'iyta atikun, kayhinata llamk'achiy atikunki: bootstrap.Tab.getInstance(element).
getOrCreateInstance Método estático mayqinchus huk DOM elementowan tinkisqa tabla instanciata kutichin utaq musuq ruwan mana qallarisqa kaqtin. Chaytaqa kayhinatam servichikuwaq: bootstrap.Tab.getOrCreateInstance(element).
show Qusqa tablata akllan chaymanta tinkisqa panelninta rikuchin. Ima huk tablapas ñawpaq akllasqa karqan mana akllasqaman tukun chaymanta tinkisqa panelnin pakasqa. Llamaqman kutimun manaraq tabla panel chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.tabruway ruwakuchkaptin).

Eventos nisqakuna

Musuq tablata rikuchispa, sucesokuna kay ordenpi ninawan:

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

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

Tipo de evento Willay
hide.bs.tab Kay suceso ninawan mayk'aq huk musuq tabla rikuchisqa kanan tiyan (hinallataq chayhina ñawpaq ruwaq tabla pakasqa kanan tiyan). Utilizar event.targetchaymanta event.relatedTargetkunan ruwasqa tablata chaymanta musuq chaylla llamk'achiq tablata, sapakama.
hidden.bs.tab Kay ruwayqa musuq tabla rikuchisqa kaptin (hinallataq chayhina ñawpaq ruwaq tabla pakasqa kachkan). Utilizar event.targetchaymanta event.relatedTargetñawpaq ruwasqa tablata chaymanta musuq ruwaq tablata targetta ruwanapaq, chaymanta.
show.bs.tab Kay ruwayqa tabla rikuchiypi ninawan, ichaqa manaraq musuq tabla rikuchisqa kachkaptin. Utilizar event.targety event.relatedTargetpara target a la pestaña activa y la pestaña activo anterior (si está disponible) respectivamente.
shown.bs.tab Kay ruwayqa tabla rikuchiypi ninawan huk tabla rikuchisqa kaptin. Utilizar event.targety event.relatedTargetpara target a la pestaña activa y la pestaña activo anterior (si está disponible) respectivamente. 
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
  })
})