Navs sy tabs
Documentation sy ohatra momba ny fampiasana ireo singa fitetezana ao amin'ny Bootstrap.
Base nav
Ny fitetezana hita ao amin'ny Bootstrap dia mizara marika sy fomba ankapobeny, manomboka amin'ny .nav
kilasy fototra ka hatrany amin'ny fanjakana mavitrika sy kilemaina. Ampifamadiho ny kilasy modifier mba hifindra eo amin'ny fomba tsirairay.
Ny .nav
singa fototra dia naorina tamin'ny flexbox ary manome fototra mafy orina amin'ny fananganana karazana singa rehetra amin'ny navigateur. Ao anatin'izany ny fanodinkodinana fomba sasany (amin'ny fiasana amin'ny lisitra), ny fametahana rohy sasany ho an'ny faritra voadona lehibe kokoa, ary ny fanaingoana fototra kilemaina.
Ny .nav
singa fototra dia tsy ahitana .active
fanjakana. Ireto ohatra manaraka ireto dia ahitana ny kilasy, indrindra indrindra mba hampisehoana fa ity kilasy manokana ity dia tsy miteraka fanaingoana manokana.
Mba hampita ny toetra mavitrika amin'ny teknolojia manampy, ampiasao ny aria-current
toetra — mampiasa ny page
sanda ho an'ny pejy ankehitriny, na true
ho an'ny singa ankehitriny ao anaty andiana.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Ampiasaina manerana ny kilasy ny kilasy, noho izany dia mety ho malefaka be ny marikao. Ampiasao <ul>
ny s toy ny etsy ambony, <ol>
raha zava-dehibe ny filaharan'ireo entanao, na manodina ny anao amin'ny <nav>
singa iray. Satria ny .nav
fampiasana display: flex
, ny rohy nav dia mitovy amin'ny zavatra nav, fa tsy misy marika fanampiny.
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Fomba misy
Hanova ny endriky ny .nav
singa s miaraka amin'ny modifiers sy utility. Afangaro ary ampifanaraho araka izay ilaina, na manangana anao manokana.
Fandrindrana marindrano
Ovay ny fampifanarahana marindrano amin'ny nav anao amin'ny fitaovana flexbox . Amin'ny alàlan'ny default, ny navs dia mirindra havia, saingy azonao atao ny manova azy ireo mora foana ho afovoany na havanana.
Foibe miaraka amin'ny .justify-content-center
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Mifanaraka tsara amin'ny .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
mijidina
Atsangano ny fitetezanao amin'ny alàlan'ny fanovana ny làlan'ny singa flex miaraka amin'ny .flex-column
fitaovana. Mila manangana azy ireo amin'ny toerana fijery sasany fa tsy ny hafa? Ampiasao ny dikan-teny mamaly (oh, .flex-sm-column
).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Toy ny mahazatra, azo atao ny navigateur mitsangana tsy misy <ul>
s ihany koa.
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Tabs
Maka ny nav fototra avy any ambony ary manampy ny .nav-tabs
kilasy hamoronana interface tsara misy tabilao. Ampiasao izy ireo mba hamoronana faritra misy tabilao miaraka amin'ny plugin JavaScript tab .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
levitra
Raiso io HTML io ihany, fa ampiasao .nav-pills
kosa:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Fenoy ary manamarina
Manery ny .nav
atiny hanitarana ny sakany feno iray amin'ireo kilasy modifier roa. Mba hamenoana ny habaka rehetra misy amin'ny .nav-item
s anao, ampiasao ny .nav-fill
. Mariho fa ny habaka marindrano rehetra dia mipetraka, fa tsy ny singa nav rehetra dia mitovy ny sakany.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Rehefa mampiasa <nav>
navigateur mifototra ianao, dia azonao atao ny manaisotra tsara .nav-item
satria .nav-link
ilaina amin'ny <a>
singa fanaingoana.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Ho an'ny singa mitovy sakany dia ampiasao .nav-justified
. Ny habaka marindrano rehetra dia hofehezin'ny rohy nav, fa tsy toy ny .nav-fill
etsy ambony, ny singa nav rehetra dia hitovy ny sakany.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Mitovy amin'ny .nav-fill
ohatra mampiasa <nav>
navigateur mifototra.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Miasa amin'ny flex utility
Raha mila fiovaovan'ny nav mamaly ianao dia diniho ny fampiasana andiana fitaovana flexbox . Na dia mibaribary kokoa aza, ireo fitaovana ireo dia manolotra fanasokajiana bebe kokoa amin'ireo teboka fiatoana mamaly. Ao amin'ny ohatra etsy ambany, ny nav-ntsika dia hapetraka eo amin'ny teboka farany ambany indrindra, avy eo ampifanaraho amin'ny lamina marindrano izay mameno ny sakany misy manomboka amin'ny teboka kely.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>
Momba ny accessibility
Raha mampiasa navs ianao mba hanomezana bara fitetezana, aza hadino ny manampy a role="navigation"
amin'ny fitoeran'ny ray aman-dreny lojika indrindra amin'ny <ul>
, na manarona <nav>
singa iray manodidina ny fitetezana manontolo. Aza ampidirina amin'ny <ul>
tenany ny andraikitra, satria izany dia hanakana azy tsy hambara ho lisitra tena izy amin'ny alàlan'ny teknolojia manampy.
Mariho fa ny bar navigation, na dia natao ho toy ny tabilao miaraka amin'ny .nav-tabs
kilasy aza, dia tsy tokony homena role="tablist"
, role="tab"
na role="tabpanel"
toetra. Ireo ihany no mety amin'ny interface dynamic tabbed, araka ny voalaza ao amin'ny WAI ARIA Authoring Practices . Jereo ny fitondran-tena JavaScript ho an'ny seha-pifandraisana mavitrika amin'ity fizarana ity ho ohatra. Ny aria-current
toetra dia tsy ilaina amin'ny dynamic tabbed interfaces satria ny JavaScript-ntsika no mitantana ny fanjakana voafantina amin'ny fanampiana aria-selected="true"
amin'ny tabilao mavitrika.
Mampiasa dropdowns
Ampio ny menio midina miaraka amin'ny HTML fanampiny kely sy ny plugin JavaScript dropdowns .
Kiheba misy fidinana
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Pills misy dropdowns
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Sass
hiovaova
$nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$nav-link-font-size: null;
$nav-link-font-weight: null;
$nav-link-color: $link-color;
$nav-link-hover-color: $link-hover-color;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color: $gray-600;
$nav-tabs-border-color: $gray-300;
$nav-tabs-border-width: $border-width;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color: $gray-700;
$nav-tabs-link-active-bg: $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
$nav-pills-border-radius: $border-radius;
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;
Fihetsika JavaScript
Ampiasao ny plugin JavaScript kiheba—ampidiro tsirairay izany na amin'ny alalan'ny bootstrap.js
rakitra natambatra—mba hanitarana ny tabilao sy pills navigateur mba hamoronana takelaka misy tabilao misy ny atiny eo an-toerana.
Ny interface dynamic tabbed, araka ny voalaza ao amin'ny WAI ARIA Authoring Practices , dia mitaky role="tablist"
, role="tab"
, role="tabpanel"
, ary aria-
toetra fanampiny mba hampitana ny rafitra, ny fiasany ary ny toetrany amin'izao fotoana izao amin'ireo mpampiasa ny teknolojia manampy (toy ny mpamaky efijery). Amin'ny maha fanao tsara indrindra, dia manoro hevitra ny fampiasana <button>
singa ho an'ny tabilao izahay, satria ireo dia fanaraha-maso izay miteraka fiovana mavitrika, fa tsy rohy mandeha amin'ny pejy na toerana vaovao.
Mariho fa ny interface dynamique tabbed dia tsy tokony ahitana menio midina, satria miteraka olana amin'ny fampiasana sy ny fidirana. Avy amin'ny fomba fijery azo ampiasaina, mety hiteraka fisavoritahana ny hoe tsy hita avy hatrany ny singa trigger an'ny kiheba aseho amin'izao fotoana izao (satria ao anatin'ny menio midina mihidy). Amin'ny fomba fijery azo idirana, tsy misy fomba azo saina amin'izao fotoana izao hanoratana an'io karazana fanorenana io amin'ny lamina WAI ARIA mahazatra, midika izany fa tsy mora azo amin'ny mpampiasa ny teknolojia fanampiana izany.
Ity dia atiny mpihazona toerana sasany amin'ny atiny mifandray amin'ny tabilao Home. Ny fipihana kiheba hafa dia hanova ny fahitana an'ity iray ity ho an'ny manaraka. Ny tabilao JavaScript dia mifamadika kilasy mba hifehezana ny fahitana ny atiny sy ny fomba. Azonao atao ny mampiasa azy io miaraka amin'ny tabilao, pilina, ary .nav
navigation hafa.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Mba hanampiana amin'ny zavatra ilainao, ity dia miasa miaraka amin'ny <ul>
marika mifototra, araka ny aseho etsy ambony, na miaraka amin'ny marika "manodina ny anao manokana". Mariho fa raha mampiasa <nav>
, ianao dia tsy tokony hanampy role="tablist"
azy mivantana, satria izany dia hanaisotra ny andraikitry ny teratany ho toy ny mari-pamantarana fitetezana. Fa kosa, miverena amina singa iray hafa (amin'ny ohatra etsy ambany, tsotra <div>
) ary aforeto ny <nav>
manodidina azy.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
Ny plugin tabs koa dia miasa miaraka amin'ny pilina.
Ity dia atiny mpihazona toerana sasany amin'ny atiny mifandray amin'ny tabilao Home. Ny fipihana kiheba hafa dia hanova ny fahitana an'ity iray ity ho an'ny manaraka. Ny tabilao JavaScript dia mifamadika kilasy mba hifehezana ny fahitana ny atiny sy ny fomba. Azonao atao ny mampiasa azy io miaraka amin'ny tabilao, pilina, ary .nav
navigation hafa.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
Ary miaraka amin'ny pilina mitsangana.
Ity dia atiny mpihazona toerana sasany amin'ny atiny mifandray amin'ny tabilao Home. Ny fipihana kiheba hafa dia hanova ny fahitana an'ity iray ity ho an'ny manaraka. Ny tabilao JavaScript dia mifamadika kilasy mba hifehezana ny fahitana ny atiny sy ny fomba. Azonao atao ny mampiasa azy io miaraka amin'ny tabilao, pilina, ary .nav
navigation hafa.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
Mampiasa ny angona toetra
Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-bs-toggle="tab"
na data-bs-toggle="pill"
amin'ny singa iray. Ampiasao amin'ny .nav-tabs
na .nav-pills
.
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Amin'ny JavaScript
Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:
var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Fade effect
Mba hahatonga ny tabilao ho levona, 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" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
fomba
Fomba sy fifindrana asynchronous
Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .
Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .
constructor
Mampihetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana data-bs-target
na, raha mampiasa rohy, href
toetra iray, mikendry ny node container ao amin'ny DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab li:last-child button')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
show
Mifidy ny kiheba nomena ary mampiseho ny tontonana mifandray aminy. Izay kiheba 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 (izany hoe alohan'ny shown.bs.tab
nitrangan'ny hetsika).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
dispose
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
Events
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 ho voaroaka 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 tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})