Source

Lista qutu

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

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.

  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
  • Porta ac consectetur nisqa
  • Vestibulo en eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Artículos activos

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

  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
  • Porta ac consectetur nisqa
  • Vestibulo en eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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).

  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
  • Porta ac consectetur nisqa
  • Vestibulo en eros
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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 .

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</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">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</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).

  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
  • Porta ac consectetur nisqa
  • Vestibulo en eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Clases contextuales nisqa

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

  • Dapibus ac nisqa wasipi
  • Kayqa huk ñawpaq lista huñu kaqmi
  • Kayqa iskay ñiqin lista huñu kaqmi
  • Kayqa huk allin lista huñu itemmi
  • Kayqa huk peligro lista huñu itemmi
  • Kayqa huk willay lista huñu kaqmi
  • Kayqa huk info lista huñu itemmi
  • Kayqa huk k'anchay lista huñu kaqmi
  • Kayqa tutayaq lista huñu kaqmi
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a 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.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>


  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a 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 .sr-onlyclasewan pakasqa.

Insigniakunawan

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

  • Cras justo odio14
  • Dapibus ac nisqa wasipi2.
  • Morbi leo risus nisqa1.
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Contenido personalizado

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

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

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.

<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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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-toggle="list", huk elemento kaqpi willaspalla. Kay willay layakunata llamk'achiy .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>

JavaScript nisqawan

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

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Sapa lista elementota achka ruwaykunapi llamk'achiyta atikunki:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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

$().tab nisqa

Huk lista elemento elementota chaymanta contenido waqaychanata llamk'achin. Tab huk data-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-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('rikuchiy')

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

$('#someListItem').tab('show')

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 llamk'achisqañachu karqan, hide.bs.tabchaymanta hidden.bs.tabruwaykuna mana llamk'achisqachu kanqa.

Tipo de evento Willay
rikuchiy.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.
rikuchisqa.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.
pakay.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.
pakasqa.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.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})