Navs
Nuŋlɔɖiwo kple kpɔɖeŋuwo na alesi woazã Bootstrap ƒe mɔfiame ƒe akpa siwo le eme.
Base nav
Navigation si li le Bootstrap me ma dzesi kple atsyãwo le xexeame katã, tso gɔmeɖoanyi .nav
ƒe klass dzi va ɖo nɔnɔme siwo le dɔ wɔm kple esiwo me nuwɔametɔ le dzi. Trɔ asi le tɔtrɔ ƒe hatsotsowo ŋu be nàtrɔ ɖe atsyã ɖesiaɖe dome.
Wotu gɔmeɖoanyi .nav
ƒe akpaa kple flexbox eye wònaa gɔmeɖoanyi sesẽ aɖe na mɔfiame ƒe akpa ƒomevi ɖesiaɖe tutu. Elɔ atsyã ƒe tɔtrɔ aɖewo ɖe eme (hena dɔwɔwɔ kple xexlẽdzesiwo), kadodo ƒe padding aɖewo na teƒe siwo lolo wu siwo woƒo, kple atsyã vevi siwo wowɔ le nuwɔametɔwo ŋu.
.nav
ƒe akpaa melɔ
.active
nɔnɔme aɖeke ɖe eme o. Kpɔɖeŋu siwo gbɔna la lɔ klass la ɖe eme, vevietɔ be woaɖee afia be klass sia koŋ meʋãa atsyã tɔxɛ aɖeke o.
<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>
Wozãa klasswo katã, eyata wò markup ate ŋu anye super flexible. Zã <ul>
s abe alesi wòle etame ene, ne wò nuwo ƒe ɖoɖo le vevie, alo nàtsɔ element <ol>
aɖe aƒo tɔwò . <nav>
Elabena the .nav
uses display: flex
, nav kadodoawo wɔa nu abe alesi nav nuawo awɔ nui ene, gake dzesidede kpeɖeŋutɔa manɔmee.
<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>
Atsyã siwo li
Trɔ .nav
s component ƒe atsyã kple modifiers kple utilities. Tsɔe tsaka eye nàtsɔe asɔ kple wo nɔewo ne ehiã, alo nàtu tɔwò.
Nusiwo woɖo ɖe ɖoɖo nu le tsia dzi
Trɔ wò nav ƒe ɖoɖo si le tsia dzi kple flexbox dɔwɔnuwo . Le gɔmedzedzea me la, navs le miame, gake àteŋu atrɔ wo bɔbɔe be woaɖo titina alo ɖusime.
Le titina kple .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>
Woɖoe ɖe ɖusime kple .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>
Tsi tsitre
Stack wò navigation to asitɔtrɔ le flex item ƒe mɔfiame kple .flex-column
utility la me. Ðe wòhiã be nàƒo wo nu ƒu ɖe nukpɔkpɔmɔ̃ aɖewo dzi gake menye ɖe bubuwo dzi oa? Zã gɔmeɖeɖe siwo ɖoa nya ŋu (le kpɔɖeŋu me, .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>
Abe alesi wònɔna ɖaa ene la, mɔzɔzɔ le tsitrenu ate ŋu adzɔ <ul>
s manɔmee, hã.
<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>
Tabwo ƒe ƒuƒoƒo
Exɔa nav vevi la tso dziƒo eye wòtsɔa .nav-tabs
klass la kpena ɖe eŋu be wòawɔ tabbed interface. Zã wo nàtsɔ awɔ tabbable nutowo kple míaƒe 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>
Atikekuiwo
Tsɔ HTML ma ke, gake zãe .nav-pills
boŋ:
<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>
Kpe ɖo eye nàɖo kpe edzi
Zi wò .nav
's emenyawo dzi be woakeke kekeme bliboa si li la ɖe enu le tɔtrɔɖenu ƒe hatsotso eve dometɔ ɖeka me. .nav-item
Be nàtsɔ wò s ayɔ teƒe siwo katã li la ɖe ɖoɖo nu la, zã .nav-fill
. De dzesii be woxɔ teƒe siwo katã le tsia dzi, gake menye nav nu ɖesiaɖe ƒe kekeme sɔ o.
<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>
Ne èle <nav>
mɔfiame si wotu ɖe -dzi zãm la, àte ŋu aɖe asi le eŋu dedie .nav-item
elabena ɖeko .nav-link
wòhiã na atsyã ƒe <a>
akpawo.
<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>
Ne èdi nusiwo ƒe kekeme sɔ la, zã .nav-justified
. Nav kadodowo axɔ teƒe siwo katã le tsia dzi, gake to vovo na esiwo le .nav-fill
etame la, nav nu ɖesiaɖe ƒe kekeme anɔ ɖeka.
<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>
Abe .nav-fill
kpɔɖeŋu si wozã <nav>
-si wotu ɖe mɔfiame dzi ene.
<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>
Dɔwɔwɔ kple flex utilities
Ne èhiã nav tɔtrɔ siwo ɖoa nya ŋu la, bu flexbox dɔwɔnu siwo kplɔ wo nɔewo ɖo zazã ŋu . Togbɔ be nyagbɔgblɔ geɖe wu hã la, dɔwɔnu siawo naa asitɔtrɔ geɖe wu le breakpoints siwo ɖoa nya ŋu me. Le kpɔɖeŋu si le ete me la, míaƒe nav la aƒo ƒu ɖe gbagbãƒe si bɔbɔ wu dzi, emegbe woatrɔ ɖe ɖoɖo si le tsia dzi si ayɔ kekeme si li la me adze egɔme tso gbagbãƒe sue la dzi.
<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>
Ku ɖe alesi woate ŋu aɖoe ŋu
Ne èle navs zãm tsɔ le mɔfiame ƒe ʋuƒo nam la, kpɔ egbɔ be yetsɔ a kpe role="navigation"
ɖe dzila ƒe nugoe si me susu le wu ŋu le <ul>
, alo nàxatsa nu <nav>
aɖe ɖe mɔfiame bliboa ŋu. Mègatsɔ akpaa akpe ɖe <ul>
eya ŋutɔ ŋu o, elabena esia axe mɔ na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu be woaɖe gbeƒãe be enye xexlẽdzesi ŋutɔŋutɔ o.
De dzesii be mele be woana mɔfiamewo, ne wowɔ wo le nukpɔkpɔ me abe tabwo kple .nav-tabs
klass la ene gɔ̃ hã la , , alo nɔnɔmewo o. Esiawo sɔ na tabbed ƒe ŋgɔdonya siwo trɔna ko, abe alesi woɖe eme le ARIA Authoring Practices Guide tabs pattern me ene. Kpɔ JavaScript ƒe nuwɔna na dynamic tabbed interfaces le akpa sia me hena kpɔɖeŋu.role="tablist"
role="tab"
role="tabpanel"
Nusiwo wotsɔna ƒua gbe zazã
Tsɔ nu siwo le tsia dzi kple HTML vi aɖe kpee kple JavaScript ƒe kpeɖeŋutɔ siwo le tsia dzi la kpe ɖe eŋu .
Tab siwo dzi woŋlɔ nu ɖo
<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>
Atikekui siwo me wotsɔa atikekuiwo ƒua gbe ɖo
<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>
JavaScript ƒe nuwɔna
Zã tab JavaScript plugin—de eme ɖekaɖeka alo to bootstrap.js
faɛl si woƒo ƒu la dzi—be nàkeke míaƒe mɔfiamewo ƒe tabwo kple atikekuiwo ɖe enu be nàwɔ teƒea me nyatakakawo ƒe akpa siwo woate ŋu aƒo tagba ɖo.
Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js
.
Dynamic tabbed interfaces, abe alesi woɖe eme le ARIA Authoring Practices Guide tabs pattern me ene la, bia role="tablist"
, role="tab"
, role="tabpanel"
, kple aria-
nɔnɔme bubuwo be woatsɔ agblɔ woƒe wɔwɔme, dɔwɔwɔ kple nɔnɔme si li fifia na kpekpeɖeŋu mɔ̃ɖaŋunuwo (abe screen readers ene) zãlawo. Abe nuwɔna nyuitɔ ene la, míeɖo aɖaŋu be nàzã <button>
nusiwo le tabawo me, elabena esiawo nye dziɖuɖu siwo hea tɔtrɔ si trɔna vɛ, ke menye kadodo siwo yia axa alo teƒe yeye aɖe dzi o.
Teƒeɖoɖo ƒe nyatakakawo na tab ƒe akpaa. Esia ku ɖe aƒeme tab la ŋu. Ekplɔa wò kilometa geɖe, kɔkɔ ale gbegbe, ‘elabena dukɔwo dome alɔgbɔnukoko ɖeka ma le esi. Amedzro aɖe le nye aba dzi, ƒoƒo aɖe le nye ta me. Oo, ao. Le agbe bubu me la, mana nànɔ anyi. ‘Elabena nye, ŋutete le ŋunye le nusianu me. Suiting up na nye fiakuku ƒe aʋa la. Wozãnɛ tsɔ fia dziwòlawo ƒe aha helia xɔa tame. Tone, tan fit kple klalo, trɔe ɖe dzi cause eƒe gettin 'kpekpe. Eƒe lɔlɔ̃ le abe atike vɔ̃ɖi ene. Mesusu be meŋlɔ be be tiatia aɖe le asinye.
Teƒeɖoɖo ƒe nyatakakawo na tab ƒe akpaa. Esia ku ɖe profile tab la ŋu. Xɔtuɖaŋu nyuitɔ kekeakee su asiwò. Mɔzɔgbalẽ ƒe stampwo, enye cosmopolitan. Enyo, yeye, sesẽ, míexɔe ɖe gaƒoɖokui dzi. Nyemewɔ ɖoɖo kpɔ be gbeɖeka mabu wò o. Eɖua wò dzi ɖa. Wò nugbugbɔ nye cosmic, ʋuʋu ɖesiaɖe nye akunyawɔwɔ. Mebe woawo, mebe abe eyae nye amea ene. Gbedoname lɔlɔ̃tɔwo mina míazɔ mɔ aɖe. Ðeko zã la tɔ abe July 4 lia ene! Gake anyo na wò wu be nàgblẽ nu.
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>
Be wòakpe ɖe ŋuwò wòasɔ ɖe wò hiahiãwo nu la, esia wɔa dɔ kple dzesi si wotu ɖe <ul>
-dzi, abe alesi woɖee fia le etame ene, alo kple dzesi ɖesiaɖe si nèdi be yeaƒo “ƒo wò ŋutɔ wò” nu. De dzesii be ne èle , zãm <nav>
la, mele be nàtsɔe akpe ɖe eŋu role="tablist"
tẽ o, elabena esia agblẽ nu le element la ƒe akpa si wòwɔna ŋutɔŋutɔ abe mɔzɔzɔ ƒe dzesi ene ŋu. Ke boŋ trɔ ɖe nu bubu aɖe ŋu (le kpɔɖeŋu si le ete me la, bɔbɔe aɖe <div>
) eye nàxatsa ɖe <nav>
eŋu.
<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>
Tabs plugin la hã wɔa dɔ kple atikekuiwo.
Teƒeɖoɖo ƒe nyatakakawo na tab ƒe akpaa. Esia ku ɖe aƒeme tab la ŋu. Ekplɔa wò kilometa geɖe, kɔkɔ ale gbegbe, ‘elabena dukɔwo dome alɔgbɔnukoko ɖeka ma le esi. Amedzro aɖe le nye aba dzi, ƒoƒo aɖe le nye ta me. Oo, ao. Le agbe bubu me la, mana nànɔ anyi. ‘Elabena nye, ŋutete le ŋunye le nusianu me. Suiting up na nye fiakuku ƒe aʋa la. Wozãnɛ tsɔ fia dziwòlawo ƒe aha helia xɔa tame. Tone, tan fit kple klalo, trɔe ɖe dzi cause eƒe gettin 'kpekpe. Eƒe lɔlɔ̃ le abe atike vɔ̃ɖi ene. Mesusu be meŋlɔ be be tiatia aɖe le asinye.
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>
Eye kple atikekui siwo le tsitrenu.
Teƒeɖoɖo ƒe nyatakakawo na tab ƒe akpaa. Esia ku ɖe aƒeme tab la ŋu. Mekpɔ wò le dua ƒe titina nènɔ Blues ha dzim. Kpɔe ɖa be nànɔ tsatsam le tsidzɔƒea ŋu. Nukata mèɖe mɔ nam be matɔ ɖe afima o? Ta si doa fiakukua la kpekpe. Ẽ, míenaa mawudɔlawo doa ɣli, eye tsi dzana ɖe anyigba dzi tso dziƒo. Di be yeakpɔ wɔnaa le 3D me, si nye sinima. Ðe nèsena le ɖokuiwò me kpɔ be, se le ɖokuiwò me be pepa le sue alea gbegbea. Enye ẽ alo ao, ɖewohĩ ao.
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>
Nyatakaka ƒe nɔnɔmewo zazã
Àte ŋu awɔ tab alo pill navigation ŋudɔ JavaScript aɖeke maŋlɔ to element aɖe gbɔgblɔ data-toggle="tab"
alo ɖe edzi ko me. data-toggle="pill"
Zã nyatakaka ƒe nɔnɔme siawo le .nav-tabs
alo .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>
To JavaScript dzi
Na tabbable tabs nawɔ dɔ to JavaScript dzi (ele be woawɔ tab ɖesiaɖe ŋudɔ ɖekaɖeka):
$('#myTab button').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Àte ŋu awɔ tab ɖekaɖekawo ŋudɔ le mɔ vovovowo nu:
$('#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
Fade ƒe ŋusẽkpɔɖeamedzi
Be nàna tabwo naɖiɖi la, tsɔe kpe .fade
ɖe wo dometɔ ɖesiaɖe .tab-pane
ŋu . Ele be tab ƒe akpa gbãtɔ hã .show
nana nya siwo le gɔmedzedzea me la nadze.
<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>
Mɔnuwo
Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo
API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .
$().tab ƒe ƒuƒoƒo
Ewɔa tab element kple emenyawo ƒe nugoe ŋudɔ. Ele be tab nanye data-target
alo, ne èle kadodo aɖe zãm la, href
nɔnɔme si ɖo taɖodzinu na nugoe ƒe node le DOM me.
<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('ɖee fia')
Tia tab si wona eye wòaɖe eƒe akpa si do ƒome kplii afia. Tab bubu ɖesiaɖe si wotia va yi la va zua esi wometia o eye eƒe akpa si do ƒome kplii la ɣlana. Trɔ yi yɔla gbɔ hafi woɖe tab ƒe akpaa fia ŋutɔŋutɔ (si nye hafi shown.bs.tab
nudzɔdzɔa nadzɔ).
$('#someTab').tab('show')
.tab('tsɔe ƒu gbe')
Egblẽa nu le element aɖe ƒe tab ŋu.
Nudzɔdzɔwo
Ne èle tab yeye aɖe ɖem fia la, nudzɔdzɔawo dzona le ɖoɖo si gbɔna nu:
hide.bs.tab
(le tab si le dɔ wɔm fifia dzi)show.bs.tab
(le tab si woaɖe afia la dzi)hidden.bs.tab
(le tab si le dɔ wɔm va yi dzi la, esi lehide.bs.tab
nudzɔdzɔa gome la ke)shown.bs.tab
(le tab si woɖe fia teti koe nye ema si le dɔ wɔm yeyee la dzi la, esi sɔ kple esi wowɔ nashow.bs.tab
wɔnaa tɔ)
Ne tab aɖeke menɔ dɔ wɔm xoxo o la, ekema womaɖe asi le hide.bs.tab
kple nudzɔdzɔawo ŋu o.hidden.bs.tab
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
ɖee fia.bs.tab | Nudzɔdzɔ sia dzona le tab show dzi, gake hafi woaɖe tab yeyea afia. Zã event.target kple event.relatedTarget nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome. |
woɖe fia.bs.tab | Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. Zã event.target kple event.relatedTarget nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome. |
ɣla.bs.tab la | Nudzɔdzɔ sia doa dzo ne woaɖe tab yeye aɖe afia (eye to esia me la, woaɣla tab si le dɔ wɔm va yi). Zã event.target kple event.relatedTarget nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm fifia kple tab yeye si awɔ dɔ kpuie la, ɖe wo nɔewo yome. |
ɣaɣla.bs.tab | Nudzɔdzɔ sia dzona ne woɖe tab yeye aɖe fia vɔ (eye to esia me la, woɣla tab si le dɔ wɔm va yi). Zã event.target kple event.relatedTarget nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm va yi kple tab yeye si le dɔ wɔm la, ɖe wo nɔewo yome. |
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})