Navs
Dokumentacija ir pavyzdžiai, kaip naudoti „Bootstrap“ įtrauktus naršymo komponentus.
Bazinė navigacija
„Bootstrap“ pasiekiama navigacija turi bendrus žymėjimus ir stilius – nuo pagrindinės .nav
klasės iki aktyvios ir išjungtos būsenos. Sukeiskite modifikatorių klases, kad perjungtumėte kiekvieną stilių.
Bazinis .nav
komponentas pagamintas naudojant „flexbox“ ir suteikia tvirtą pagrindą visų tipų navigacijos komponentams kurti. Tai apima tam tikrus stiliaus nepaisymus (dirbant su sąrašais), kai kuriuos nuorodų užpildymą didesnėms sritims ir pagrindinį išjungtą stilių.
.nav
komponentas neapima jokios
.active
būsenos. Toliau pateikti pavyzdžiai apima klasę, daugiausia siekiant parodyti, kad ši konkreti klasė nesukelia jokio specialaus stiliaus.
<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>
Klasės naudojamos visur, todėl jūsų žymėjimas gali būti itin lankstus. Jei elementų tvarka svarbi, naudokite <ul>
kaip nurodyta aukščiau , arba sukite elementą. Kadangi naudoja , naršymo nuorodos veikia taip pat, kaip ir navigacijos elementai, bet be papildomo žymėjimo.<ol>
<nav>
.nav
display: flex
<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>
Galimi stiliai
Pakeiskite s komponento stilių .nav
naudodami modifikatorius ir priemones. Maišykite ir suderinkite pagal poreikį arba sukurkite savo.
Horizontalus lygiavimas
Pakeiskite horizontalų navigacijos sistemos išlygiavimą naudodami „ flexbox“ priemones . Pagal numatytuosius nustatymus naršymo juostos yra sulygiuotos kairėje, bet galite lengvai jas pakeisti į centre arba dešinėje.
Centruota su .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>
Sulygiuotas dešinėje su .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>
Vertikalus
Sudėkite navigaciją, naudodami paslaugų programą pakeisdami lankstaus elemento kryptį .flex-column
. Reikia juos sudėti į kai kurias peržiūros sritis, bet ne į kitas? Naudokite interaktyvias versijas (pvz., .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>
Kaip visada, vertikali navigacija galima ir be <ul>
s.
<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>
Skirtukai
Paima pagrindinę navigaciją iš viršaus ir prideda .nav-tabs
klasę, kad sukurtų sąsają su skirtukais. Naudokite juos norėdami sukurti skirtukų sritis naudodami skirtuko JavaScript papildinį .
<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>
Tabletes
Paimkite tą patį HTML, bet .nav-pills
vietoj jo naudokite:
<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>
Užpildykite ir pagrįskite
Priverskite savo .nav
turinį išplėsti visą galimą plotį viena iš dviejų modifikavimo klasių. Norėdami proporcingai užpildyti visą turimą erdvę savo .nav-item
s, naudokite .nav-fill
. Atkreipkite dėmesį, kad visa horizontali erdvė yra užimta, bet ne kiekvienas navigacijos elementas yra vienodo pločio.
<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>
Naudodami <nav>
navigaciją galite saugiai praleisti .nav-item
, nes .nav-link
tai reikalinga tik stiliaus <a>
elementams.
<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>
Vienodo pločio elementams naudokite .nav-justified
. Visą horizontalią erdvę užims navigacijos nuorodos, tačiau skirtingai nei .nav-fill
aukščiau, kiekvienas navigacijos elementas bus vienodo pločio.
<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>
Panašiai kaip .nav-fill
pavyzdyje naudojant <nav>
navigaciją.
<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>
Darbas su lanksčiomis komunalinėmis paslaugomis
Jei jums reikia interaktyvių navigacijos variantų, apsvarstykite galimybę naudoti keletą „ flexbox“ paslaugų . Nors šios komunalinės paslaugos yra išsamesnės, jas galima geriau pritaikyti reaguojant į pertraukos taškus. Toliau pateiktame pavyzdyje mūsų navigacija bus sukrauta žemiausiame pertraukos taške, tada pritaikyta prie horizontalaus išdėstymo, kuris užpildo galimą plotį, pradedant nuo mažos pertraukos taško.
<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>
Kalbant apie prieinamumą
Jei naudojate naršymo juostą, kad pateiktumėte naršymo juostą, būtinai pridėkite role="navigation"
prie logiškiausio pirminio sudėtinio rodinio <ul>
arba apvyniokite <nav>
elementą aplink visą naršymą. Nepridėkite vaidmens prie <ul>
paties vaidmens, nes tai neleis jo paskelbti kaip tikrojo pagalbinių technologijų sąrašo.
Atminkite, kad naršymo juostose, net jei jos vizualiai sukurtos kaip skirtukai su .nav-tabs
klase, neturėtų būti pateikiamos role="tablist"
, role="tab"
arba role="tabpanel"
atributai. Jie tinka tik dinaminėms sąsajoms su skirtukais, kaip aprašyta ARIA kūrimo praktikos vadovo skirtukų šablone . Pavyzdį rasite šiame skyriuje „ JavaScript“ elgsena dinaminėms sąsajoms su skirtukais.
Išskleidžiamųjų meniu naudojimas
Pridėkite išskleidžiamųjų meniu naudodami šiek tiek papildomo HTML ir išskleidžiamąjį JavaScript papildinį .
Skirtukai su išskleidžiamaisiais meniu
<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>
Tabletės su išskleidžiamaisiais meniu
<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 elgesys
Naudokite skirtuko „JavaScript“ papildinį (įtraukite jį atskirai arba per sudarytą bootstrap.js
failą), kad išplėstumėte naršymo skirtukus ir tabletes, kad sukurtumėte vietinio turinio skirtukus.
Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js
.
Dinaminėms sąsajoms su skirtukais, kaip aprašyta ARIA kūrimo praktikos vadovo skirtukų šablone , reikia role="tablist"
, role="tab"
, role="tabpanel"
ir papildomų aria-
atributų, kad pagalbinių technologijų (pvz., ekrano skaitytuvų) naudotojams būtų perteikta jų struktūra, funkcionalumas ir dabartinė būsena. Kaip geriausią praktiką rekomenduojame naudoti <button>
skirtukų elementus, nes tai yra valdikliai, suaktyvinantys dinaminį pakeitimą, o ne nuorodos, nukreipiančios į naują puslapį ar vietą.
Skirtukų skydelio rezervuotos vietos turinys. Tai susiję su pagrindiniu skirtuku. Nukelia tave mylių aukštai, taip aukštai, nes ji turi tą vienintelę tarptautinę šypseną. Mano lovoje nepažįstamas žmogus, galvoje beldžiasi. O, ne. Kitame gyvenime aš priversčiau tave pasilikti. Nes aš galiu viską. Tinka mano karūnuojančiam mūšiui. Naudojamas pavogti tavo tėvų alkoholinius gėrimus ir lipti ant stogo. Tonas, įdegis ir paruoštas, padidinkite, nes jis tampa sunkus. Jos meilė yra kaip narkotikas. Manau, kad pamiršau, kad turiu pasirinkimą.
Skirtukų skydelio rezervuotos vietos turinys. Tai susiję su profilio skirtuku. Turite geriausią architektūrą. Paso antspaudai, ji kosmopolitė. Puikus, šviežias, nuožmus, mes jį užrakinome. Niekada neplanavau, kad vieną dieną tave prarasiu. Ji valgo tavo širdį. Tavo bučinys kosminis, kiekvienas judesys magiškas. Turiu galvoje tuos, turiu galvoje, kad ji yra ta. Sveiki, mylimieji, leiskime į kelionę. Tiesiog turėk tokią naktį kaip liepos 4 d.! Bet verčiau būni iššvaistytas.
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>
Kad atitiktų jūsų poreikius, tai veikia naudojant <ul>
žymėjimą, pagrįstą, kaip parodyta aukščiau, arba bet kokius savavališkus žymėjimus. Atminkite, kad jei naudojate <nav>
, neturėtumėte role="tablist"
prie jo tiesiogiai pridėti, nes tai pakeistų elemento, kaip naršymo orientyro, savąjį vaidmenį. Vietoj to pereikite prie alternatyvaus elemento (toliau pateiktame pavyzdyje paprastas <div>
) ir apvyniokite jį <nav>
aplink jį.
<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>
Skirtukų papildinys taip pat veikia su tabletėmis.
Skirtukų skydelio rezervuotos vietos turinys. Tai susiję su pagrindiniu skirtuku. Nukelia tave mylių aukštai, taip aukštai, nes ji turi tą vienintelę tarptautinę šypseną. Mano lovoje nepažįstamas žmogus, galvoje beldžiasi. O, ne. Kitame gyvenime aš priversčiau tave pasilikti. Nes aš galiu viską. Tinka mano karūnuojančiam mūšiui. Naudojamas pavogti tavo tėvų alkoholinius gėrimus ir lipti ant stogo. Tonas, įdegis ir paruoštas, padidinkite, nes jis tampa sunkus. Jos meilė yra kaip narkotikas. Manau, kad pamiršau, kad turiu pasirinkimą.
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>
Ir su vertikaliomis tabletėmis.
Skirtukų skydelio rezervuotos vietos turinys. Tai susiję su pagrindiniu skirtuku. Mačiau tave miesto centre dainuojant bliuzą. Stebėkite, kaip apibėgate kanalizaciją. Kodėl neleidi man užsukti? Sunki yra galva, kuri nešioja karūną. Taip, mes verkiame angelus, lyjančius žemėje iš viršaus. Nori pamatyti serialą 3D formatu, filmą. Ar kada nors jautiesi, toks popierinis plonas. Tai taip arba ne, galbūt ne.
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>
Duomenų atributų naudojimas
Galite suaktyvinti skirtuką arba piliulės naršymą neįrašydami jokio „JavaScript“, tiesiog nurodydami data-toggle="tab"
arba data-toggle="pill"
ant elemento. Naudokite šiuos duomenų atributus .nav-tabs
arba .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>
Per JavaScript
Įgalinti skirtukų skirtukus naudodami „JavaScript“ (kiekvieną skirtuką reikia suaktyvinti atskirai):
$('#myTab button').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Atskirus skirtukus galite suaktyvinti keliais būdais:
$('#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
Išblukimo efektas
Jei norite, kad skirtukai išnyktų, pridėkite .fade
prie kiekvieno .tab-pane
. Pirmojo skirtuko srityje taip pat turi būti .show
matomas pradinis turinys.
<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>
Metodai
Asinchroniniai metodai ir perėjimai
Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .
Daugiau informacijos rasite mūsų JavaScript dokumentacijoje .
$().tab
Suaktyvina skirtuko elementą ir turinio konteinerį. Skirtuke turi būti atributas data-target
arba, jei naudojama nuoroda, href
atributas, taikomas pagal sudėtinio rodinio mazgą 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('show')
Parenka nurodytą skirtuką ir parodo su juo susijusią sritį. Bet kuris kitas anksčiau pasirinktas skirtukas bus nepažymėtas, o su juo susijusi sritis paslėpta. Grįžta į skambinantįjį, kol skirtuko sritis iš tikrųjų nebuvo parodyta (ty prieš shown.bs.tab
įvykį).
$('#someTab').tab('show')
.tab('dispose')
Sunaikina elemento skirtuką.
Renginiai
Kai rodomas naujas skirtukas, įvykiai suaktyvinami tokia tvarka:
hide.bs.tab
(dabartiniame aktyviame skirtuke)show.bs.tab
(skirtuke, kurį reikia rodyti)hidden.bs.tab
(ankstesniame aktyviame skirtuke tas pats, kaip irhide.bs.tab
įvykio)shown.bs.tab
(naujai suaktyvintame, ką tik parodytame skirtuke, tas pats kaip irshow.bs.tab
įvykio)
Jei joks skirtukas dar nebuvo aktyvus, hide.bs.tab
ir hidden.bs.tab
įvykiai nebus suaktyvinti.
Renginio tipas | apibūdinimas |
---|---|
Rodyti.bs.tab | Šis įvykis suaktyvinamas rodant skirtuką, bet anksčiau nei rodomas naujas skirtukas. Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra). |
parodyta.bs.tab | Šis įvykis suaktyvinamas rodant skirtuką, kai rodomas skirtukas. Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra). |
hide.bs.tab | Šis įvykis suaktyvinamas, kai turi būti rodomas naujas skirtukas (taigi, ankstesnis aktyvus skirtukas turi būti paslėptas). Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į dabartinį aktyvų skirtuką ir į naują, kuris netrukus bus aktyvus. |
paslėptas.bs.tab | Šis įvykis suaktyvinamas, kai parodomas naujas skirtukas (taigi ankstesnis aktyvus skirtukas yra paslėptas). Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į ankstesnį aktyvų skirtuką ir naują aktyvų skirtuką. |
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})