Vondrona lisitra
Ny vondrona lisitra dia singa mora sy matanjaka amin'ny fanehoana andiam-panazavana. Ovao sy ampitomboy izy ireo mba hanohanana ny atiny rehetra ao anatiny.
Ohatra fototra
Ny vondrona lisitra fototra indrindra dia lisitra tsy misy filaharana miaraka amin'ireo singa lisitra sy ireo kilasy mety. Amboary miaraka amin'ireo safidy manaraka izany, na miaraka amin'ny CSS anao manokana raha ilaina.
- Zavatra iray
- Zavatra faharoa
- Singa fahatelo
- Zavatra fahefatra
- Ary ny fahadimy
<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>
Zavatra mavitrika
Ampio .active
amin'ny a .list-group-item
hanondro ny safidy mavitrika ankehitriny.
- Singa mavitrika
- Zavatra faharoa
- Singa fahatelo
- Zavatra fahefatra
- Ary ny fahadimy
<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>
Zavatra kilemaina
Ampio .disabled
amin'ny a .list-group-item
hahatonga azy ho kilemaina. Mariho fa ny singa sasany miaraka .disabled
dia mitaky JavaScript manokana ihany koa mba hanesorana tanteraka ny hetsika kitiny (oh: rohy).
- Zavatra kilemaina
- Zavatra faharoa
- Singa fahatelo
- Zavatra fahefatra
- Ary ny fahadimy
<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>
Rohy sy bokotra
Mampiasà <a>
s na <button>
s mba hamoronana singa vondrona lisitra azo atao miaraka amin'ny fanjakana hover, kilemaina ary mavitrika amin'ny fanampiana .list-group-item-action
. Asarahinay ireto kilasy pseudo ireto mba hiantohana ny vondrona lisitra vita amin'ny singa tsy misy fifampiraharahana (toy ny <li>
s or<div>
fa tsy manome vola kitihina na paompy
Ataovy azo antoka fa tsy mampiasa ny .btn
kilasy mahazatra eto .
<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>
Miaraka amin'ny <button>
s, azonao atao koa ny mampiasa ny disabled
toetra fa tsy ny .disabled
kilasy. Mampalahelo fa <a>
tsy manohana ny toetra kilemaina i s.
<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>
kabone
Ampio .list-group-flush
hanesorana ny sisin-tany sasany sy ny zorony boribory mba hamerenana ny lisitry ny lisitry ny singa amin'ny sisiny amin'ny fitoeran'ny ray aman-dreny (oh: karatra).
- Zavatra iray
- Zavatra faharoa
- Singa fahatelo
- Zavatra fahefatra
- Ary ny fahadimy
<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>
Marindrano
Ampio .list-group-horizontal
hanova ny fisehon'ireo singa vondrona lisitra manomboka amin'ny mitsangana mankany amin'ny marindrano manerana ny teboka rehetra. Raha tsy izany, mifidiana variana mamaly .list-group-horizontal-{sm|md|lg|xl}
mba hanaovana vondrona lisitra mitsivalana manomboka amin'io toerana fiatoana io min-width
. Amin'izao fotoana izao dia tsy azo ampifandraisina amin'ny vondrona lisitra mitsivalana.
ProTip: Te hitovy sakan'ny lisitry ny singa vondrona rehefa mitsivalana? Ampio .flex-fill
isaky ny singa vondrona lisitra.
- Zavatra iray
- Zavatra faharoa
- Singa fahatelo
- Zavatra iray
- Zavatra faharoa
- Singa fahatelo
- Zavatra iray
- Zavatra faharoa
- Singa fahatelo
- Zavatra iray
- Zavatra faharoa
- Singa fahatelo
- Zavatra iray
- Zavatra faharoa
- Singa fahatelo
<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>
Kilasy ara-tantara
Mampiasà kilasy contextual mba hamolavolana ny lisitry ny zavatra miaraka amin'ny loko sy loko.
- Singa vondrona lisitra default tsotra
- Zavatra vondrona lisitra voalohany tsotra
- Zavatra vondrona lisitra faharoa tsotra
- Lisitry ny lisitry ny fahombiazana tsotra
- Zavatra vondrona lisitra loza tsotra
- Zavatra vondrona lisitra fampitandremana tsotra
- Zavatra vondrona lisitra tsotsotra
- Zavatra vondrona lisitra maivana tsotra
- Zavatra vondrona lisitra maizina tsotra
<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>
Ny kilasy contextual dia miasa miaraka amin'ny .list-group-item-action
. Mariho ny fanampim-panazavana amin'ireo fomba fanatodizana eto tsy hita amin'ny ohatra teo aloha. Tohanana ihany koa ny .active
fanjakana; ampiharo izany mba hanondro safidy mavitrika amin'ny singa vondrona lisitra contextual.
<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>
Fampitaovana ny dikan'ny teknôlôjia manampy
Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-only
kilasy.
Miaraka amin'ny badge
Manampia marika amin'ny singa vondrona lisitra mba hampisehoana ny isa tsy novakiana, ny hetsika ary ny maro hafa miaraka amin'ny fanampian'ny fitaovana sasany .
- Zavatra lisitra14
- Zavatra lisitra faharoa2
- Zavatra lisitra fahatelo1
<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>
atiny manokana
Ampio saika HTML rehetra ao anatiny, eny fa na dia ho an'ny vondrona lisitra mifandray toy ny etsy ambany aza, miaraka amin'ny fanampian'ny flexbox utility .
Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izayNy votoatin'ny placeholder sasany ao anaty fehintsoratra iray.
Ary misy pirinty kely.Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izayNy votoatin'ny placeholder sasany ao anaty fehintsoratra iray.
Ary misy printy kely mangina.Tanisao ny lohatenin'ny singa vondrona
3 andro lasa izayNy votoatin'ny placeholder sasany ao anaty fehintsoratra iray.
Ary misy printy kely mangina.<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>
Fihetsika JavaScript
Ampiasao ny plugin JavaScript kiheba—ampidiro tsirairay izany na amin'ny alàlan'ny bootstrap.js
rakitra natambatra—mba hanitarana ny vondrona lisitray mba hamoronana takelaka misy tabilao misy votoaty eo an-toerana.
<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>
Mampiasa ny angona toetra
Azonao atao ny manetsika ny fitetezana vondrona lisitra nefa tsy manoratra JavaScript amin'ny alàlan'ny famaritana fotsiny data-toggle="list"
na amin'ny singa iray. Ampiasao amin'ny .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>
Amin'ny JavaScript
Alefaso amin'ny alalan'ny JavaScript ny singa lisitry ny tabilao (mila ampihetsika tsirairay ny singa lisitra tsirairay):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Azonao atao ny manetsika ny singa lisitra tsirairay amin'ny fomba maro:
$('#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
Fade effect
Mba hahatonga ny tontonana hanjavona, ampio .fade
ny tsirairay .tab-pane
. Ny takelaka tabilao voalohany dia tsy maintsy .show
manao ny atiny voalohany ho hita ihany koa.
<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>
fomba
$().tab
Mampihetsika singa iray amin'ny lisitra sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-target
kendrena href
ny node container ao amin'ny DOM.
<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('show')
Mifidy ny lisitra nomena ary mampiseho ny tontonana mifandray aminy. Ny singa lisitra hafa izay nofantenana teo aloha dia lasa tsy voafantina ary nafenina ny tontonana mifandraika aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (ohatra, alohan'ny shown.bs.tab
hitrangan'ny hetsika).
$('#someListItem').tab('show')
zava-mitranga
Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:
hide.bs.tab
(amin'ny tabilao mavitrika ankehitriny)show.bs.tab
(eo amin'ny tabilao haseho)hidden.bs.tab
(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'nyhide.bs.tab
hetsika)shown.bs.tab
(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'nyshow.bs.tab
hetsika)
Raha tsy misy kiheba efa navitrika, dia tsy hodorana ny hetsika ary hide.bs.tab
.hidden.bs.tab
Karazana hetsika | Description |
---|---|
show.bs.tab | Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.target sy event.relatedTarget kendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy). |
aseho.bs.tab | Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.target sy event.relatedTarget kendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy). |
hide.bs.tab | Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao event.target sy event.relatedTarget kendrena ny tabilao mavitrika ankehitriny sy ny tabilao vaovao tsy ho ela. |
hidden.bs.tab | Mirehitra ity hetsika ity rehefa miseho ny tabilao vaovao (ary noho izany dia afenina ny tabilao mavitrika teo aloha). Ampiasao event.target sy event.relatedTarget ikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})