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" aria-disabled="true">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 .

Cras justo odio Dapibus ac nisqa wasipi Morbi leo risus nisqa Porta ac consectetur nisqa Vestibulo en eros 
<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" tabindex="-1" aria-disabled="true">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>

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

  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
<ul class="list-group list-group-horizontal">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
<ul class="list-group list-group-horizontal-sm">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
<ul class="list-group list-group-horizontal-md">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
<ul class="list-group list-group-horizontal-lg">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac nisqa wasipi
  • Morbi leo risus nisqa
<ul class="list-group list-group-horizontal-xl">
  <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>
</ul>

Clases contextuales nisqa

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

  • Dapibus ac nisqa wasipi
  • 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">Dapibus ac facilisis in</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.

Dapibus ac nisqa wasipi 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">Dapibus ac facilisis in</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 .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 .

Huñupi kaqpa umalliqninta qillqay
3 punchaw ñawpaqta

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Maecenas sed diam nisqa risus varius blandit nisqa.

Donec id elit mana mi porta.
Huñupi kaqpa umalliqninta qillqay
3 punchaw ñawpaqta

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Maecenas sed diam nisqa risus varius blandit nisqa.

Donec id elit mana mi porta.
Huñupi kaqpa umalliqninta qillqay
3 punchaw ñawpaqta

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Maecenas sed diam nisqa risus varius blandit nisqa.

Donec id elit mana mi porta. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action 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">
    <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">
    <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.

Velit aute mollit ipsum ad dolor consectetur culpa adipisicing ejercicio fugiat temporal. Voluptate deserunt tiyay sunt nisi aliqua fugiat proident ea ut. Mollit volupta reprehenderit occaecat nisi ad mana minimo temporal sunt volupta consectetur ejercicio id ut nulla. Ea y fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor nisqamanta. Anim ad Lorem aliqua en cupidatat nisi enimi eu nostrud hacer aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

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