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.
- 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 .active
huk kaqman yapay ..list-group-item
- Huk llamk’aq kaq
- Iskay kaq imapas
- Kimsa kaq item
- Tawa kaq item
- Hinaspa huk pichqa kaq
<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 .disabled
mana .list-group-item
atisqa hina rikurinanpaq . Reparay wakin elementokuna kaqwan .disabled
ruwasqa 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
<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
.
<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 disabled
atribututapas llamk'achiyta atinki. .disabled
Llakikuypaqmi, <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-flush
wakin 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
<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>
Kinranpa
Yanapakuy .list-group-horizontal
lista 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-fill
Sapa 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
<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>
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.
<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 .sr-only
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.
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<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 ñawpaqtaHuk parrafopi wakin sitiokuna contenido.
Y algunas letras pequeñas.Huñupi kaqpa umalliqninta qillqay
3 punchaw ñawpaqtaHuk parrafopi wakin sitiokuna contenido.
Hinaspa wakinqa uchuy qillqakunata upallachirqaku.Huñupi kaqpa umalliqninta qillqay
3 punchaw ñawpaqtaHuk parrafopi wakin sitiokuna contenido.
Hinaspa wakinqa uchuy qillqakunata upallachirqaku.<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">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>
JavaScript nisqap ruwaynin
JavaScript plugin tablata llamk'achiy —sapallan utaq huñusqa bootstrap.js
willañ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
.
<div role="tabpanel">
<!-- 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>
</div>
JavaScript nisqawan
JavaScript kaqnintakama tablakuna lista kaqmanta atichiy (sapa lista kaqmanta sapalla llamk'achinan tiyan):
$('#myList a').on('click', function (event) {
event.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, .fade
sapakamaman yapay .tab-pane
. Ñawpaq kaq tabla panelpas .show
qallariy 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-target
utaq huk href
targeting 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.tab
suceso ruwakuchkaptin).
$('#someListItem').tab('show')
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, kikinhide.bs.tab
ruwaypaq)shown.bs.tab
(musuq-ruray chayraq rikuchisqa ñiqipi, kikinshow.bs.tab
ruwaypaq)
Sichus mana mayqin tablapas llamk'achisqañachu karqan, hide.bs.tab
chaymanta hidden.bs.tab
ruwaykuna mana llamk'achisqachu kanqa.
Tipo de evento | Willay |
---|---|
rikuchiy.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. |
rikuchisqa.bs.tab | Kay ruwayqa tabla rikuchiypi ninawan huk tabla rikuchisqa kaptin. Utilizar event.target y event.relatedTarget para 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.target chaymanta event.relatedTarget kunan 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.target chaymanta event.relatedTarget ñawpaq ruwasqa tablata chaymanta musuq ruwaq tablata targetta ruwanapaq, chaymanta. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})