Navs
Fa'amaumauga ma fa'ata'ita'iga mo le fa'aogaina o vaega ole fa'atautaiga a Bootstrap.
Nav faavae
Fa'asagaga o lo'o maua i Bootstrap fa'asoa fa'ailoga lautele ma sitaili, mai le .nav
vasega fa'avae i setete malosi ma le le atoatoa. Fa'afesuia'i vasega sui e fesuia'i i le va o sitaili ta'itasi.
O le .nav
vaega autu e fausia i le flexbox ma maua ai se faavae malosi mo le fausiaina o ituaiga uma o vaega o le folauga. E aofia ai nisi sitaili fa'asili (mo le galue ma lisi), nisi fa'apipi'i feso'ota'iga mo vaega lapo'a lapo'a, ma sitaili fa'aletonu masani.
.nav
vaega faavae e le aofia ai soʻo se
.active
setete. O fa'ata'ita'iga o lo'o mulimuli mai e aofia ai le vasega, aemaise lava e fa'aalia ai o lenei vasega fa'apitoa e le fa'aosoina so'o se sitaili fa'apitoa.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" 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>
O vasega e fa'aoga i le taimi atoa, ina ia mafai ona matua fetuutuunai lau fa'ailoga. Fa'aoga <ul>
s pei o luga, <ol>
pe a taua le fa'atonuga o au mea, pe ta'avale oe lava ma se <nav>
elemene. Ona o le .nav
fa'aoga display: flex
, o feso'ota'iga nav e amio tutusa ma mea nav, ae aunoa ma le fa'ailoga fa'aopoopo.
<nav class="nav">
<a class="nav-link active" 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>
Sitaili avanoa
Suia le sitaili o .nav
le s vaega i suiga ma mea aoga. Faʻafefiloi ma faʻafetaui pe a manaʻomia, pe fau sau oe lava.
Fa'asagaga fa'asaga
Suia le laina faalava o lau nav ma flexbox utilities . E le mafai, o navs e fa'aoga agavale, ae faigofie ona e suia i le ogatotonu po'o le taumatau.
Fa'atotonugalemu ma .justify-content-center
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" 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>
Fa'aoga taumatau ma .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" 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>
Tusa'o
Fa'aputu lau fa'atautaiga e ala i le suia o le fa'atonuga o mea fa'apipi'i ma le .flex-column
aoga. Mana'omia le fa'aputuina i luga o nisi va'aiga ae le o isi? Fa'aaogā fa'aliliuga tali (fa'ata'ita'iga, .flex-sm-column
).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" 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>
E pei lava o taimi uma, e mafai ona fa'atauva'a tūsa'o e aunoa ma <ul>
le s, fo'i.
<nav class="nav flex-column">
<a class="nav-link active" 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
Ave le nav faavae mai luga ma faʻaopoopo le .nav-tabs
vasega e faʻatupuina se faʻaoga faʻapipiʻi. Fa'aoga latou e fai ai vaega tabbable ma la matou tab JavaScript plugin .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" 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>
Pills
Ave lena lava HTML, ae faʻaaoga .nav-pills
nai lo:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" 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>
Faatumu ma tauamiotonuina
Fa'amalosi au .nav
mea e fa'alautele le lautele o avanoa se tasi o vasega fa'aleleia e lua. Ina ia fa'atumu uma avanoa avanoa i lau .nav-item
s, fa'aoga .nav-fill
. Matauina o avanoa uma faalava o lo'o nofoia, ae le o mea uma nav e tutusa le lautele.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" 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>
A fa'aogaina se <nav>
fa'ata'ita'iga fa'avae, e mafai ona e fa'ate'aina ma le saogalemu .nav-item
pe a na'o .nav-link
mea e mana'omia mo le fa'avasegaina <a>
o elemene.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" 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>
Mo elemene tutusa-lautele, faʻaaoga .nav-justified
. O avanoa fa'ata'atia uma o le a nofoia e feso'ota'iga nav, ae le pei o .nav-fill
luga, o mea uma nav o le a tutusa le lautele.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" 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>
E tutusa ma le .nav-fill
faʻataʻitaʻiga e faʻaaoga ai se <nav>
faʻataʻitaʻiga faʻavae.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" 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>
Galulue fa'atasi ma mea fa'aoga felefele
Afai e te mana'omia ni suiga o le nav tali, mafaufau e fa'aaoga se faasologa o flexbox utilities . E ui ina sili atu le tautala, o nei mea aoga e ofoina atu le faʻavasegaina sili atu i le tali atu. I le faʻataʻitaʻiga o loʻo i lalo, o le a faʻapipiʻi la matou nav i luga o le pito pito i lalo, ona faʻafetaui lea i se faʻasologa faʻalava e faʻatumu ai le lautele avanoa e amata mai i le vaʻa laʻititi.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" 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>
E tusa ai ma le avanoa
Afai o lo'o e fa'aogaina navs e tu'uina atu ai se pa fa'atauta'iga, ia mautinoa e fa'aopoopo se role="navigation"
i le koneteina matua sili ona talafeagai o le <ul>
, po'o le afifiina o se <nav>
elemene i le ta'avale atoa. Aua le fa'aopoopoina le matafaioi ia <ul>
te ia lava, aua o le a taofia ai mai le fa'asalalauina o se lisi moni e ala i tekinolosi fesoasoani.
Manatua o faʻamau faʻatau, e tusa lava pe faʻailoga vaʻaia e pei o faʻamau i le .nav-tabs
vasega, e le tatau ona tuʻuina atu role="tablist"
, role="tab"
poʻo role="tabpanel"
uiga. E na'o mea ia e talafeagai mo feso'ota'iga fa'apipi'i malolosi, e pei ona fa'amatalaina i le ARIA Authoring Practices Guide tabs pattern . Va'ai le amio a le JavaScript mo feso'ota'iga fa'apipi'i malolosi i lenei vaega mo se fa'ata'ita'iga.
Fa'aaogā fa'alalolalo
Faaopoopo i lalo menus ma sina HTML faaopoopo ma le dropdowns JavaScript plugin .
Fa'amau i lalo
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</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 ma pa'u i lalo
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</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>
Amioga JavaScript
Fa'aoga le fa'aupuga JavaScript plugin-fa'aofia ai ta'ito'atasi pe ala i le bootstrap.js
faila tu'ufa'atasia-e fa'alautele ai a tatou fa'ailoga fa'ata'ita'iga ma pills e fa'atupu ai fa'amau fa'apipi'i o mea fa'apitonu'u.
Afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.js
.
Dynamic tabbed interfaces, e pei ona faʻamatalaina i le ARIA Authoring Practices Guide tabs pattern , e manaʻomia role="tablist"
, role="tab"
, role="tabpanel"
, ma isi aria-
uiga faʻaopoopo ina ia mafai ai ona faʻaalia o latou fausaga, faʻatinoga ma le tulaga o loʻo i ai nei i tagata faʻaogaina tekinolosi fesoasoani (e pei o lau faitau mata). I le avea ai o se faiga sili, matou te fautuaina le faʻaogaina <button>
o elemene mo faʻamau, aua o pulega ia e faʻaosofia ai se suiga malosi, nai lo soʻotaga e faʻafeiloaʻi i se itulau fou poʻo se nofoaga.
O mea o lo'o tu'u iai mo le laulau fa'amau. O lenei mea e fesoʻotaʻi ma le laupepa fale. E alu ai oe i maila maualuga, maualuga tele, 'aua o lo'o ia te ia lena laufofoga fiafia faavaomalo. O loʻo i ai se tagata ese i loʻu moega, o loʻo i ai se tuʻi i loʻu ulu. Oi, leai. I se isi olaga ou te faia oe e nofo ai. Aua o a'u, ou te mafaia soo se mea. E fetaui mo la'u taua faapaleina. Sa masani ona gaoi le ava a ou matua ma a'e i luga o le fale. Leo, lanu enaena ma sauni, liliu i luga ona o lona mamafa. O lona alofa e pei o se fualaau faasaina. Ou te masalo ua galo ia te au sa i ai sau filifiliga.
O mea o lo'o tu'u iai mo le laulau fa'amau. O le mea lea e fa'atatau i le fa'ailoga fa'ailoga. Ua e maua le fausaga sili ona lelei. Faailoga tusifolau, o ia o le lalolagi. Lelei, fou, saua, na matou maua i le loka. E le'i fuafuaina lava e i ai se aso o le a ou leiloa ai oe. Na te 'ai lou loto. O lau kisi o le lagi, o gaioiga uma o se togafiti. O le uiga o la'u tala, o le uiga o la'u tala e pei o ia. Talofa e pele ia tatou malaga. Na'o le umiaina o le po e pei o le aso 4 o Iulai! Ae e sili atu lou maumau.
Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
Ina ia fesoasoani e fetaui ma ou manaʻoga, e aoga lenei <ul>
faʻailoga -faʻavae, e pei ona faʻaalia i luga, poʻo soʻo se faʻailoga "taʻavale lau oe" faʻailoga. Manatua afai o loʻo e faʻaaogaina <nav>
, e le tatau ona e faʻaopoopo role="tablist"
saʻo i ai, aua o le a faʻaumatia ai le matafaioi masani a le elemene o se faʻailoga faʻailoga. Ae, sui i se isi elemene (i le faʻataʻitaʻiga o loʻo i lalo, se faigofie <div>
) ma afifi le <nav>
faʻataʻamilomilo.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
O lo'o galue fo'i le fa'apipi'i fa'atasi ma fualaau.
O mea o lo'o tu'u iai mo le laulau fa'amau. O lenei mea e fesoʻotaʻi ma le laupepa fale. E alu ai oe i maila maualuga, maualuga tele, 'aua o lo'o ia te ia lena laufofoga fiafia faavaomalo. O loʻo i ai se tagata ese i loʻu moega, o loʻo i ai se tuʻi i loʻu ulu. Oi, leai. I se isi olaga ou te faia oe e nofo ai. Aua o a'u, ou te mafaia soo se mea. E fetaui mo la'u taua faapaleina. Sa masani ona gaoi le ava a ou matua ma a'e i luga o le fale. Leo, lanu enaena ma sauni, liliu i luga ona o lona mamafa. O lona alofa e pei o se fualaau faasaina. Ou te masalo ua galo ia te au sa i ai sau filifiliga.
Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>
Ma faatasi ai ma fualaau tuusao.
O mea o lo'o tu'u iai mo le laulau fa'amau. O lenei mea e fesoʻotaʻi ma le laupepa fale. Va'ai oe i le taulaga o usuina le Blues. Matamata e te li'o le alavai. Aisea e te le faatagaina ai a'u ou te alu atu? E mamafa le ulu e ofuina le pale. Ioe, tatou te faia agelu ma fetagisi, ma timu mai luga i le lalolagi. Mana'o e matamata i le fa'aaliga i le 3D, o se ata tifaga. E te lagona ea, lagona le manifinifi pepa. O le ioe pe leai, leai atonu.
Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
</div>
<div class="col-9">
<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>
</div>
Fa'aaogaina uiga fa'amaumauga
E mafai ona e fa'agaoioia se fa'ailoga po'o se pill navigation e aunoa ma le tusiaina o so'o se JavaScript i le na'o le fa'ama'oti data-toggle="tab"
po'o data-toggle="pill"
luga o se elemene. Fa'aoga nei uiga fa'amaumauga i luga .nav-tabs
po'o .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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
E ala i le JavaScript
Fa'aaga tabbable tabs e ala i le JavaScript (ta'itasi ta'itasi e mana'omia ona fa'agaoioia ta'ito'atasi):
$('#myTab button').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
E mafai ona e fa'agaoioia ta'iala ta'itasi i le tele o auala:
$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab
Aafiaga mou
Ina ia fa'agesegese fa'amau i totonu, fa'aopoopo .fade
i .tab-pane
. E tatau fo'i .show
i le fa'ailoga muamua ona fa'aalia le mea muamua.
<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>
Metotia
Metotia ma suiga e le tutusa
O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amanaʻiaina se auala e valaʻau ai i se vaega o suiga .
$().tab
Fa'aagaoioia se fa'ailoga elemene ma mea o lo'o i totonu. O le Tab e tatau ona iai se data-target
po'o, pe a fa'aogaina se feso'ota'iga, se href
uiga e fa'atatau i se node koneteina i le 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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
$(function () {
$('#myTab li:last-child button').tab('show')
})
</script>
.tab('fa'aali')
Filifili le fa'ailoga ua tu'uina atu ma fa'aali atu lona fa'ailoga fa'atasi. So'o se isi fa'ailoga sa filifilia muamua e le'i filifilia ma o lona fa'ailoga e natia. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le fa'ailoga (fa'atusa a'o le'i tupu le shown.bs.tab
mea na tupu).
$('#someTab').tab('show')
.tab('tuu'u')
Fa'aleaga le lisi o se elemene.
Mea na tutupu
Pe a fa'aalia se lisi fou, e mu mea na tutupu i le fa'asologa lenei:
hide.bs.tab
(i luga o le lisi o lo'o galue nei)show.bs.tab
(i luga o le faʻailoga o le a faʻaalia)hidden.bs.tab
(i luga o le lisi galue muamua, tutusa ma lehide.bs.tab
mea na tupu)shown.bs.tab
(i luga o le faʻailoga fou faatoa faʻaalia, tutusa ma leshow.bs.tab
mea na tupu)
Afai e le'i fa'agaoioi le tab, o le a le tapeina le hide.bs.tab
ma mea tutupu.hidden.bs.tab
Ituaiga Mea | Fa'amatalaga |
---|---|
show.bs.tab | O lenei mea na tupu e mu i luga o faʻaaliga faʻaaliga, ae leʻi faʻaalia le faʻailoga fou. Fa'aoga event.target ma event.relatedTarget fa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi. |
fa'aalia.bs.tab | O lenei mea na tupu e mu i luga o le faʻaaliga faʻapipiʻi pe a uma ona faʻaalia se tab. Fa'aoga event.target ma event.relatedTarget fa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi. |
hide.bs.tab | E mu lenei mea pe a fa'aalia se fa'ailoga fou (ma fa'apea e natia ai le fa'agaioiga muamua). Fa'aoga event.target ma event.relatedTarget fa'atatau i le lisi o lo'o i ai nei ma le lisi fou e le o toe mamao-to-be-active. |
hidden.bs.tab | O lenei mea na tupu e mu pe a uma ona faʻaalia se laupepa fou (ma faʻapea o loʻo natia le laupepa muamua). Fa'aoga event.target ma event.relatedTarget fa'atatau i le ta'ifa'agaaga muamua ma le fa'ailoga fou fou, fa'asologa. |
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})