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
- Zavatra 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
- Zavatra 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
- Zavatra 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 fa tsy manome vola kitihina na paompy ny vondrona lisitra vita amin'ny singa tsy mifanentana (toy ny <li>
s na s).<div>
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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">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
- Zavatra 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>
voalamina
Ampio ny .list-group-numbered
kilasin'ny modifier (ary raha tsy izany dia ampiasao <ol>
singa iray) mba hisafidianana amin'ireo singa vondrona misy lisitra. Noforonina tamin'ny alalan'ny CSS ny isa (mifanohitra amin'ny <ol>
styling navigateur default) mba hametrahana tsaratsara kokoa ao anatin'ny lisitry ny entana ao anatin'ny lisitra ary ahafahana manamboatra tsara kokoa.
Ny isa dia novokarin'ny counter-reset
ao amin'ny <ol>
, ary avy eo apetraka ary apetraka miaraka amin'ny ::before
singa pseudo eo amin'ny <li>
miaraka amin'ny counter-increment
sy content
.
- Cras justo odio
- Cras justo odio
- Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
Ireo dia miasa tsara miaraka amin'ny atiny manokana ihany koa.
-
lohatenikelyCras justo odio
-
lohatenikelyCras justo odio
-
lohatenikelyCras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
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|xxl}
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
- Zavatra fahatelo
- Zavatra iray
- Zavatra faharoa
- Zavatra fahatelo
- Zavatra iray
- Zavatra faharoa
- Zavatra fahatelo
- Zavatra iray
- Zavatra faharoa
- Zavatra fahatelo
- Zavatra iray
- Zavatra faharoa
- Zavatra fahatelo
- Zavatra iray
- Zavatra faharoa
- Zavatra 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>
<ul class="list-group list-group-horizontal-xxl">
<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 fandevenana eto izay tsy hita amin'ny ohatra teo aloha. Tohanana ihany koa ny .active
fanjakana; ampiharo izany mba hanondro fifantenana 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 .visually-hidden
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 bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-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" aria-current="true">
<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>
Boxes sy radios
Apetraho ao anatin'ny lisitry ny entana ao anaty lisitra ny boaty sy radio an'ny Bootstrap ary amboary araka izay ilaina. Azonao atao ny mampiasa azy ireo tsy misy <label>
s, fa tadidio azafady ny mampiditra aria-label
toetra sy sanda ho an'ny fidirana.
- Boaty voalohany
- boaty fanindroany
- Famaritana fahatelo
- boaty fanefatra
- Boaty fisavana fahadimy
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
Ary raha tianao <label>
ny .list-group-item
ho an'ny faritra voadona lehibe dia azonao atao koa izany.
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
Sass
hiovaova
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: $spacer * .5;
$list-group-item-padding-x: $spacer;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
Mixins
Ampiasaina miaraka amin'ny $theme-colors
famoronana kilasy variana contextual ho an'ny .list-group-item
s.
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
manome fitoerana
Loop izay mamorona kilasy modifier miaraka amin'ny list-group-item-variant()
mixin.
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-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):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Azonao atao ny manetsika ny singa lisitra tsirairay amin'ny fomba maro:
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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
constructor
Mampihetsika singa iray amin'ny lisitra sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na iray data-bs-target
na href
kendrena ny node fitoeran-javatra ao amin'ny DOM.
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-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>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
FAMPISEHOANA
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).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
Ario
Manimba ny tabilao misy singa.
getInstance
Fomba static izay ahafahanao mahazo ny ohatra tabilao mifandray amin'ny singa DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Fomba static izay ahafahanao mahazo ny ohatra tabilao mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
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). |
shown.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. |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}