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
Copia
<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 .active
huk kaqman yapay ..list-group-item
Cras justo odio
Dapibus ac nisqa wasipi
Morbi leo risus nisqa
Porta ac consectetur nisqa
Vestibulo en eros
Copia
<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 .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).
Cras justo odio
Dapibus ac nisqa wasipi
Morbi leo risus nisqa
Porta ac consectetur nisqa
Vestibulo en eros
Copia
<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 kaqmanta 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
.
Copia
<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 disabled
atribututapas llamk'achiyta atinki. .disabled
Llakikuypaqmi, <a>
s mana atichisqa atributota yanapanchu.
Cras justo odio
Dapibus ac nisqa wasipi
Morbi leo risus nisqa
Porta ac consectetur nisqa
Vestibulo en eros
Copia
<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-flush
wakin k'uchukunata chaymanta muyu k'uchukunata hurqunapaq 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
Copia
<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-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 .
Cras justo odio
Dapibus ac nisqa wasipi
Morbi leo risus nisqa
Copia
<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
Copia
<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
Copia
<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
Copia
<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
Copia
<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
Copia
<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.
Copia
<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-only
clasewan 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.
Copia
<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 .
Copia
<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.js
willañiqi kaqnintakama churay—lista huñuyku mast'ariypaq tablakuna ruwanakuna kitipi ruwanakuna ruwanapaq.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing ejercicio ruway fugiat temporal. Voluptate deserunt tiyay sunt nisi aliqua fugiat proident ea ut. Mollit volupta reprehenderit occaecat nisi ad mana mínimo 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 cupidat nisi enim 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.
Copia
<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
.
Copia
<!-- 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 elementota atichiy (sapa lista elemento sapankama llamk'achinan tiyan):
Copia
$ ( ' #myList a ' ). on ( ' click ' , function ( e ) {
e . preventDefault ()
$ ( this ). tab ( ' show ' )
})
Sapa lista elementota achka ruwaykunapi llamk'achiyta atikunki:
Copia
$ ( ' #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.
Copia
<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.
Copia
<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).
Copia
$ ( ' #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, kikin hide.bs.tab
ruwaypaq)
shown.bs.tab
(musuq-ruray chayraq rikuchisqa ñiqipi, kikin show.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 dirigir 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 dirigir 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.
Copia
$ ( ' a[data-toggle="list"] ' ). on ( ' shown.bs.tab ' , function ( e ) {
e . target // newly activated tab
e . relatedTarget // previous active tab
})