Aty lista rehegua
Umi aty lista rehegua haꞌehína peteĩ componente flexible ha ipuꞌakapáva ojehechauka hag̃ua peteĩ serie contenido rehegua. Emoambue ha embohape umíva oipytyvõ hag̃ua haimete oimeraẽ contenido oĩva hyepýpe.
Tembiecharã básico
Pe lista aty iñimportantevéva haꞌehína peteĩ lista noñemohendapáiva oguerekóva umi elemento lista rehegua ha umi clase hekopete. Emopu’ã hi’ári umi opción oúva reheve, térã nde CSS tee reheve tekotevẽháicha.
- Peteĩ mba’e
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
- Peteĩ mba’e irundyha
- Ha peteĩ quinto
<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>
Umi mba’e omba’apóva
Oñemoĩ .active
peteĩ .list-group-item
-pe ohechauka hag̃ua jeporavopyre ombaꞌapóva koꞌág̃a.
- Peteĩ mba’e omba’apóva
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
- Peteĩ mba’e irundyha
- Ha peteĩ quinto
<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>
Umi mba’e ojejokóva
Emoĩ .disabled
peteĩ .list-group-item
-pe ojehechauka hag̃ua ndojejapói hague. Eñamindu’u oĩha elemento orekóva .disabled
oikotevẽta avei JavaScript jeporupyre ombogue hag̃ua hekopete umi mba’e ojehúva clic-pe (techapyrã, joajuha).
- Peteĩ mba’e ojejokóva
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
- Peteĩ mba’e irundyha
- Ha peteĩ quinto
<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 ha botones rehegua
Eipuru <a>
s térã <button>
s emoheñói hag̃ua mba’e’oka aty lista rehegua ojejapokuaava oguerekóva estado hover, desactivado ha activo emoĩvo .list-group-item-action
. Roipeꞌa koꞌã pseudo-clase roñangareko hag̃ua umi aty lista rehegua ojejapóva elemento ndahaꞌeiva interactivo-gui ( <li>
s térã <div>
s-icha) nomeꞌei peteĩ clic térã tap affordance.
Ejesareko ani hag̃ua reipuru umi .btn
mbo’esyry estándar ko’ápe .
<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>
s rupive <button>
, ikatu avei ojepuru disabled
atributo .disabled
clase rangue. Ñembyasyrã, <a>
s ndoipytyvõi atributo oñemboykéva.
<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>
Ojejohéi hagua
Oñembojoapy .list-group-flush
ojeipeꞌa hag̃ua peteĩva vore ha esquina oñembojere hag̃ua ojehechauka hag̃ua lista aty mbaꞌekuéra vore guive vore peve peteĩ mbaꞌeryru túvape (techapyrã, tarjetakuéra).
- Peteĩ mba’e
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
- Peteĩ mba’e irundyha
- Ha peteĩ quinto
<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>
Ipekuévo
Oñembojoapy .list-group-horizontal
oñemoambue hag̃ua lista aty mbaꞌekuéra ñemohenda vertical guive horizontal peve opaite punto de ruptura rupi. Ikatu avei, eiporavo peteĩ variante .list-group-horizontal-{sm|md|lg|xl}
ombohováiva ejapo hag̃ua peteĩ lista aty horizontal oñepyrũvo upe punto de ruptura-gui min-width
. Koꞌág̃aite umi lista horizontal aty ndaikatúi oñembojoaju umi lista flush aty ndive.
ProTip: ¿Reipota umi elemento aty lista ancho joja rehegua oĩ jave horizontal? Oñemoĩve .flex-fill
peteĩteĩva lista-pe aty mba’e.
- Peteĩ mba’e
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
- Peteĩ mba’e
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
- Peteĩ mba’e
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
- Peteĩ mba’e
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
- Peteĩ mba’e
- Peteĩ mba’e mokõiha
- Mbohapyha mba’e
<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>
Umi mbo’esyry contextual rehegua
Eipuru umi clase contextual estilo hag̃ua umi elemento lista rehegua orekóva peteĩ fondo ha color estado rehegua.
- Peteĩ elemento aty lista por defecto simple
- Peteĩ elemento grupo lista primaria simple rehegua
- Peteĩ elemento aty lista secundaria simple rehegua
- Peteĩ elemento grupo de lista de éxito simple
- Peteĩ elemento grupo de lista de peligro simple
- Peteĩ elemento grupo de advertencia simple
- Peteĩ elemento grupo de lista de info simple
- Peteĩ elemento grupo lista de luz simple rehegua
- Peteĩ elemento grupo lista iñypytũva simple
<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>
Umi mbo’esyry contextual rehegua omba’apo avei .list-group-item-action
. Ñañamindu’u oñembojoapýha umi estilo hover ko’ápe noĩriva techapyrã mboyveguápe. Avei oipytyvõ .active
Estado; eipuru ohechauka hag̃ua peteĩ jeporavopyre activo peteĩ elemento aty lista contextual rehegua.
<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>
Ombohasávo he’iséva umi tecnología oipytyvõvape
Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .sr-only
mboꞌepy ndive.
Umi insignia reheve
Emoĩ insignia oimeraẽva lista aty mba’e’oka rehegua ehechauka hag̃ua jepapa ndojelee’ỹva, tembiapo ha hetave mba’e peteĩva umi tembipuru’i pytyvõ rupive .
- Peteĩ mba’e lista-pegua14 rehegua
- Peteĩ mokõiha mba’e lista-pegua2. 2.1
- Peteĩ mba’e mbohapyha lista-pegua1. 1.1
<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 rehegua
Emoĩ haimete oimeraẽ HTML hyepýpe, jepe umi lista aty oñembojoajúvape g̃uarã pe oĩva iguýpeguáicha, flexbox purupyrã pytyvõ rupive .
Emoĩ lista elemento aty rehegua rubro
Ojapóma 3 áraOĩ contenido tenda rehegua peteĩ párrafope.
Ha unos kuánto letra michĩva.Emoĩ lista elemento aty rehegua rubro
Ojapóma 3 áraOĩ contenido tenda rehegua peteĩ párrafope.
Ha oĩ umi letra michĩva oñemboguevaʼekue.Emoĩ lista elemento aty rehegua rubro
Ojapóma 3 áraOĩ contenido tenda rehegua peteĩ párrafope.
Ha oĩ umi letra michĩva oñemboguevaʼekue.<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 jepokuaa
Eipuru pe ficha JavaScript plugin —emoinge peteĩteĩ térã bootstrap.js
vore oñembohekopyréva rupive—embotuichave hag̃ua ore lista aty emoheñói hag̃ua vore vore’i contenido local rehegua.
<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>
Oipurúvo umi atributo de datos rehegua
Ikatu emomba’apo peteĩ lista aty jeguata rehai’ỹre mba’eveichagua JavaScript emombe’úvo data-toggle="list"
térã peteĩ elemento ári. Eipuru ko’ã atributo dato rehegua .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 rupive
Emboguata mba’e lista tabla rehegua JavaScript rupive (peteĩteĩ mba’e lista rehegua tekotevẽ oñemboguata peteĩteĩ):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Ikatu eactiva elemento lista individual heta hendáicha:
$('#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 desvanecimiento rehegua
Ojejapo hag̃ua panel de fichas oñedesvanece, emoĩ .fade
peteĩteĩme .tab-pane
. Peteĩha vore vore oguerekovaꞌerã avei .show
ojehecha hag̃ua pe contenido ñepyrũrã.
<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étodo-kuéra rehegua
$().tab rehegua
Omombaꞌapo peteĩ elemento elemento lista rehegua ha mbaꞌeryru contenido rehegua. Tab oguerekovaꞌerã peteĩ data-target
térã peteĩ href
ojepytasóva peteĩ nodo mbaꞌerepy rehegua DOM-pe.
<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('ehechauka') .
Oiporavo mbaꞌe lista rehegua oñemeꞌevaꞌekue ha ohechauka iparado ojoajúva hese. Oimeraẽ ambue mba’e lista-pegua ojeporavóva’ekue ymave ndojeporavoiva’ekue ha oñeñomi iparte ojoajúva hese. Ojevy ohenóivape ojehechauka mboyve añetehápe pe ficha vore (techapyrã, oiko mboyve pe shown.bs.tab
mbaꞌe ojehúva).
$('#someListItem').tab('show')
Umi mba’e oikóva
Ohechauka jave peteĩ ficha pyahu, umi mbaꞌe ojehúva odispara koꞌã orden-pe:
hide.bs.tab
(pe ficha activa ko’áĝaguápe)show.bs.tab
(pe pestaña ojehechaukátavape)hidden.bs.tab
(pe ficha activa mboyvegua-pe, peteĩchagua pehide.bs.tab
evento-pe g̃uarã)shown.bs.tab
(pe pestaña ojehechauka ramóvape, peteĩchagua peshow.bs.tab
evento-pe g̃uarã)
Ndaipóriramo peteĩ ficha ndojejapóiva’ekue voi, umi hide.bs.tab
ha hidden.bs.tab
mba’e ojehúva ndojedisparamo’ãi.
Tipo de evento rehegua | Techaukaha |
---|---|
ohechauka.bs.tab | Ko mbaꞌe ojehúva odispara ficha jehechaukahápe, ha katu ojehechauka mboyve ficha pyahu. Eipuru event.target ha event.relatedTarget emohenda hag̃ua ficha activa ha ficha activa mboyvegua (oĩramo) peteĩteĩ. |
ojehechauka.bs.tab | Ko mba’e ojehúva odispara ficha jehechaukahápe ojehechauka rire peteĩ ficha. Eipuru event.target ha event.relatedTarget emohenda hag̃ua ficha activa ha ficha activa mboyvegua (oĩramo) peteĩteĩ. |
omokañy.bs.tab | Ko mbaꞌe ojehúva odispara ojehechaukavaꞌerã jave peteĩ ficha pyahu (ha upéicha rupi oñeñomivaꞌerã pe ficha activa mboyvegua). Eipuru event.target ha event.relatedTarget emohenda hag̃ua pe ficha activa ko’áĝagua ha pe ficha pyahu pya’e ojejapótava, peteĩteĩ. |
kañymby.bs.tab | Ko mbaꞌe ojehúva oñembopu ojehechauka rire peteĩ ficha pyahu (ha upéicha oñeñomi pe ficha activa mboyvegua). Eipuru event.target ha event.relatedTarget emohenda hag̃ua pe ficha activa mboyvegua ha pe ficha activa pyahu, peteĩteĩ. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})