Ndepụta otu
Otu ndepụta bụ ihe na-agbanwe agbanwe ma dị ike maka igosipụta usoro ọdịnaya. Gbanwee ma gbasaa ha iji kwado naanị ọdịnaya ọ bụla dị n'ime.
Ihe atụ bụ isi
Otu ndepụta kachasị ewu ewu bụ ndepụta edeghị aha nke nwere ihe ndepụta yana klaasị kwesịrị ekwesị. Jiri nhọrọ ndị na-eso wulite ya, ma ọ bụ jiri CSS nke gị dị ka achọrọ.
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Ihe nke anọ
- Na nke ise
<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>
Ihe na-arụ ọrụ
Tinye .active
na a .list-group-item
iji gosi nhọrọ nọ n'ọrụ ugbu a.
- Ihe na-arụ ọrụ
- A second item
- A third item
- A fourth item
- And a fifth one
<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>
Ihe ndị nwere nkwarụ
Tinye .disabled
na a .list-group-item
ka ọ yie enweghị nkwarụ. Rịba ama na ụfọdụ ihe nwere .disabled
ga-achọkwa Javascript omenala iji gbanyụọ mmemme ọpịpị ha (dịka ọmụmaatụ, njikọ).
- Ihe nwere nkwarụ
- A second item
- A third item
- A fourth item
- And a fifth one
<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>
Njikọ na bọtịnụ
Jiri <a>
s ma ọ bụ <button>
s mepụta ndepụta otu ihe nwere ike ime ya na hover, nwere nkwarụ na steeti nọ n'ọrụ site na ịgbakwunye .list-group-item-action
. Anyị na-ekewa klaasị pseudo ndị a iji hụ na otu ndepụta nke ihe anaghị emekọrịta ihe (dị ka <li>
s ma ọ bụ <div>
s) anaghị enye ohere ọpịpị ma ọ bụ kpatụ ego.
Jide n'aka na ị gaghị eji .btn
klas ọkọlọtọ ebe a .
<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>
Na <button>
s, ị nwekwara ike iji disabled
njirimara kama .disabled
klaasị. Ọ dị nwute, <a>
s anaghị akwado njirimara nkwarụ.
<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>
Ghichaa
Tinye .list-group-flush
ka iwepu ụfọdụ oke na nkuku gburugburu iji nye otu ihe ndepụta n'akụkụ ruo n'ọnụ n'ime akpa nne na nna (dịka ọmụmaatụ, kaadị).
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Ihe nke anọ
- Na nke ise
<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>
Akpọrọ ọnụ
Tinye .list-group-numbered
klaasị mgbanwe (ma jiri nhọrọ nhọrọ <ol>
) banye n'ime ihe ndị nwere ndepụta aha. A na-ewepụta ọnụọgụgụ site na CSS (na-emegide ụdị <ol>
nhazi ihe nchọgharị ndabere) maka ntinye ka mma n'ime ndepụta otu yana inye ohere maka nhazi nke ọma.
A na-emepụta ọnụọgụgụ site counter-reset
na na <ol>
, wee hazie ya ma tinye ya na ::before
pseudo-element na <li>
ya counter-increment
na content
.
- Ihe ndepụta
- Ihe ndepụta
- Ihe ndepụta
<ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
</ol>
Ndị a na-arụkwa ọrụ nke ọma na ọdịnaya omenala.
-
Isi isiokwuỌdịnaya maka ihe ndepụta
-
Isi isiokwuỌdịnaya maka ihe ndepụta
-
Isi isiokwuỌdịnaya maka ihe ndepụta
<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>
Content for list item
</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>
Content for list item
</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>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Kehoraizin
Tinye .list-group-horizontal
ka ịgbanwee okirikiri nhọrọ ukwuu nke ihe otu ndetu site na vetikal gaa na kehoraizin gafee ebe nkwụsịtụ niile. N'aka nke ọzọ, họrọ ụdị dị iche iche na-anabata .list-group-horizontal-{sm|md|lg|xl|xxl}
iji mee ka otu ndepụta dị n'ahịrị malite na ebe nkwụsịtụ ahụ min-width
. Ugbu a enweghị ike ijikọ otu ndepụta kewapụrụ na otu ndepụta mkpocha.
ProTip: Chọrọ ihe ndị otu ndepụta obosara nhata nhata mgbe ọ kwụ ọtọ? Tinye .flex-fill
n'ime ihe ndepụta nke ọ bụla.
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
<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>
Klaasị ihe atụ
Jiri klaasị okirikiri mee ndepụta ihe ndị nwere nzụlite na agba mara mma.
- Otu ihe ndepụta ndabara dị mfe
- Otu ihe ndepụta izizi dị mfe
- Otu ihe ndepụta nke abụọ dị mfe
- Otu ihe ndepụta ihe ịga nke ọma dị mfe
- Otu ihe ndepụta ihe egwu dị mfe
- Otu ihe ndepụta ịdọ aka ná ntị dị mfe
- Otu ihe ndepụta ozi dị mfe
- Otu ihe ndepụta ọkụ dị mfe
- Otu ihe ndepụta gbara ọchịchịrị dị mfe
<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>
Klas Contextual na-arụkwa ọrụ na .list-group-item-action
. Rịba ama mgbakwunye na ụdị hover ebe a adịghị na ihe atụ gara aga. Ihe na-akwadokwa bụ .active
steeti; tinye ya iji gosi nhọrọ na-arụ ọrụ n'ime ihe otu ndepụta okwu.
<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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hidden
klaasị.
Na baajị
Tinye baajị na ihe otu ndepụta ọ bụla iji gosi ọnụọgụgụ, mmemme na ndị ọzọ site n'enyemaka nke ụfọdụ ngwa .
- Ihe ndepụta14
- Ihe ndepụta nke abụọ2
- Ihe ndepụta nke atọ1
<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>
Ọdịnaya ahaziri ahazi
Tinye ihe fọrọ nke nta ka ọ bụrụ HTML ọ bụla n'ime, ọbụlagodi maka otu ndepụta ejikọtara dị ka nke dị n'okpuru, site na enyemaka nke flexbox utilities .
Depụta isiokwu isiokwu otu
Ụbọchị 3 gara agaỤfọdụ ọdịnaya edebe ebe dị na paragraf.
Na ụfọdụ obere mbipụta.Depụta isiokwu isiokwu otu
Ụbọchị 3 gara agaỤfọdụ ọdịnaya edebe ebe dị na paragraf.
Ma ụfọdụ mechiri obere mbipụta.Depụta isiokwu isiokwu otu
Ụbọchị 3 gara agaỤfọdụ ọdịnaya edebe ebe dị na paragraf.
Ma ụfọdụ mechiri obere mbipụta.<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>
Igbe nlele na redio
Debe igbe nlele na redio Bootstrap n'ime ndepụta otu ma hazie dịka achọrọ ya. Ị nwere ike iji ha na-enweghị <label>
s, mana biko cheta itinye aria-label
àgwà na uru maka nnweta.
- Igbe nrịbama nke mbụ
- Igbe nrịbama nke abụọ
- Igbe nrịbama nke atọ
- Igbe nrịbama nke anọ
- Igbe nrịbama nke ise
<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>
Ma ọ bụrụ na ị chọrọ <label>
s dị ka .list-group-item
maka nnukwu hit ebe, ị nwere ike ime nke ahụ, kwa.
<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
Mgbanwe
$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;
Ngwakọta
Ejikọtara ya na $theme-colors
iwepụta klaasị dị iche iche maka .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;
}
}
}
}
Loop
Loop nke na-ewepụta klaasị modifier na 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);
}
Omume Javascript
Jiri ngwa mgbakwunye Javascript taabụ-gụnye ya n'otu n'otu ma ọ bụ site na bootstrap.js
faịlụ ekpokọtara-iji gbasaa otu ndepụta anyị iji mepụta paịlị ọdịnaya mpaghara.
<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>
Iji njirimara data
Ị nwere ike rụọ ọrụ igodo otu ndepụta na-edeghị Javascript ọ bụla site na ịkọwapụta data-bs-toggle="list"
ma ọ bụ na mmewere. Jiri njirimara data ndị a na .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>
Site JavaScript
Kwado ihe ndepụta tabbable site na Javascript (ihe ndepụta ọ bụla kwesịrị ịgbalite n'otu n'otu):
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()
})
})
Ị nwere ike ịgbalite ihe ndepụta onye ọ bụla n'ụzọ dị iche iche:
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
Mbelata mmetụta
Iji mee ka panel tabs daa, tinye .fade
na nke ọ bụla .tab-pane
. Iberibe taabụ nke mbụ ga-enwerịrịrịrị .show
ime ka a hụ ọdịnaya mbụ.
<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>
Ụzọ
constructor
Na-eme ka mmewere ihe ndepụta na akpa ọdịnaya rụọ ọrụ. Tab kwesịrị inwe ma ọ data-bs-target
bụ ihe href
ezubere iche maka ọnụ akpa na 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>
gosi
Na-ahọpụta ihe ndepụta enyere wee gosi pane metụtara ya. Ihe ndepụta ọ bụla ọzọ ahọpụtara na mbụ na-aghọ nke ahọpụtaghị, yana akụkụ ya jikọtara ya na-ezo. Na-alaghachi na onye na-akpọ oku tupu egosiri pane taabụ (dịka ọmụmaatụ, tupu shown.bs.tab
mmemme emee).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
tufuo
Na-emebi taabụ mmewere.
nweta ihe atụ
Usoro static na-enye gị ohere ịnweta ihe atụ taabụ jikọtara ya na ihe DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
nwetaOrCreateInstance
Usoro static nke na-enye gị ohere ịnweta ihe atụ taabụ jikọtara ya na ihe DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Ihe omume
Mgbe ị na-egosi taabụ ọhụrụ, mmemme ahụ na-agba ọkụ n'usoro a:
hide.bs.tab
(na taabụ na-arụ ọrụ ugbu a)show.bs.tab
(na taabụ a ga-egosi)hidden.bs.tab
(na taabụ arụ ọrụ gara aga, otu maka mmemmehide.bs.tab
ahụ)shown.bs.tab
(na taabụ egosiri ọhụrụ na-arụ ọrụ, otu maka mmemmeshow.bs.tab
ahụ)
Ọ bụrụ na ọ nweghị taabụ na-arụ ọrụ, agaghị agbanyụọ mmemme hide.bs.tab
na hidden.bs.tab
mmemme ahụ.
Ụdị mmemme | Nkọwa |
---|---|
show.bs.tab |
Ihe omume a na-agba ọkụ na ihe ngosi taabụ, mana tupu egosiri taabụ ọhụrụ. Jiri event.target ma event.relatedTarget tụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu. |
shown.bs.tab |
Ihe omume a na-agba ọkụ na ihe ngosi taabụ ka egosiri taabụ. Jiri event.target ma event.relatedTarget tụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu. |
hide.bs.tab |
Ihe omume a na-agba ọkụ mgbe a ga-egosi taabụ ọhụrụ (ya mere a ga-ezobe taabụ arụ ọrụ gara aga). Jiri event.target na event.relatedTarget dobe taabụ na-arụ ọrụ ugbu a yana taabụ ọhụrụ ga-arụ ọrụ n'oge adịghị anya, n'otu n'otu. |
hidden.bs.tab |
Ihe omume a na-agba ọkụ ka egosiri taabụ ọhụrụ (ma yabụ na-ezobe taabụ arụ ọrụ gara aga). Jiri event.target ma event.relatedTarget dobe taabụ nọ n'ọrụ gara aga yana taabụ arụ ọrụ ọhụrụ, n'otu n'otu. |
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
})
}