I-Navs kunye neethebhu
Amaxwebhu kunye nemizekelo yendlela yokusebenzisa i-Bootstrap equkiweyo yezinto zokukhangela.
Isiseko nav
Ukukhangela kuyafumaneka kwiBootstrap yabelana ngokuphawulwa ngokubanzi kunye nezimbo, ukusuka kwisiseko .nav
seklasi ukuya kumazwe asebenzayo kunye nabakhubazekileyo. Tshintsha iiklasi zesilungisi ukutshintsha phakathi kwesimbo ngasinye.
Icandelo lesiseko .nav
lakhiwe nge-flexbox kwaye libonelela ngesiseko esomeleleyo sokwakha zonke iintlobo zezixhobo zokuhamba. Ibandakanya isimbo sokubhala ngaphezulu (sokusebenza ngezintlu), ezinye iikhonkco zekhonkco kwiindawo ezinkulu ezibethayo, kunye nesimbo esisisiseko sabakhubazekileyo.
Icandelo lesiseko .nav
alibandakanyi naliphi na .active
ilizwe. Le mizekelo ilandelayo ibandakanya iklasi, ikakhulu ukubonisa ukuba le klasi ayiqalisi nasiphi na isimbo esikhethekileyo.
Ukuhambisa imo esebenzayo kubuchwephesha bokuncedisa, sebenzisa aria-current
uphawu — usebenzisa page
ixabiso lephepha langoku, okanye true
into yangoku kwiseti.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Iiklasi zisetyenziswa kulo lonke, ngoko uphawu lwakho lunokuba bhetyebhetye kakhulu. Sebenzisa <ul>
s like ngasentla, <ol>
ukuba ulandelelwano izinto zakho kubalulekile, okanye roll eyakho nge <nav>
element. Kuba .nav
usebenziso display: flex
, amakhonkco e-nav aziphatha ngendlela efanayo nav izinto eziya kwenza, kodwa ngaphandle kophawulo olongezelelweyo.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Izimbo ezikhoyo
Tshintsha isimbo .nav
s icandelo kunye modifiers kunye eziluncedo. Xuba kwaye utshatise njengoko kufuneka, okanye uzakhele eyakho.
Ulungelelwaniso oluthe tye
Guqula ulungelelwaniso oluthe tye lwe nav yakho ngezixhobo ze flexbox . Ngokungagqibekanga, ii-navs zilungelelaniswe ekhohlo, kodwa unokuzitshintsha ngokulula zibesembindini okanye zilungelelaniswe ekunene.
Isembindini nge .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Ilungelelaniswe ekunene ne .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Ngokuthe nkqo
Gcina ukukhangela kwakho ngokutshintsha isikhokelo sento eguqukayo kunye nezinto .flex-column
eziluncedo. Ngaba kufuneka uzibeke kwezinye iindawo zokujonga kodwa hayi kwezinye? Sebenzisa iinguqulelo eziphendulayo (umz., .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Njengesiqhelo, ukukhangela ngokuthe nkqo kunokwenzeka ngaphandle kwe <ul>
-s, kwakhona.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Iithebhu
Ithatha i-nav esisiseko ukusuka phezulu kwaye yongeza .nav-tabs
iklasi ukwenza ujongano olunethabhu. Zisebenzise ukwenza imimandla enokwenzeka ngethebhu yethu iplagi yeJavaScript .
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Iipilisi
Thatha kwaloo HTML inye, kodwa sebenzisa .nav-pills
endaweni yoko:
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Gcwalisa kwaye ugwebe
Nyanzelisa .nav
imixholo yakho ukwandisa ububanzi obukhoyo obugcweleyo kwiiklasi ezimbini zesilungisi. Ukugcwalisa ngokulinganayo yonke indawo ekhoyo ngeyakho .nav-item
, sebenzisa .nav-fill
. Qaphela ukuba yonke indawo ethe tye ihleli, kodwa ayizizo zonke izinto ze-nav ezinobubanzi obufanayo.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Xa usebenzisa <nav>
ukukhangela okusekwe, ungashiya ngokukhuselekileyo .nav-item
njengoko .nav-link
kufuneka kuphela kwizinto zesitayile <a>
.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Kwizinto ezinobubanzi obulinganayo, sebenzisa .nav-justified
. Zonke isithuba esithe tyaba siya kuhlala ngamakhonkco e-nav, kodwa ngokungafaniyo .nav-fill
nokungasentla, yonke into ye-nav iya kuba nobubanzi obufanayo.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Ngokufana .nav-fill
nomzekelo usebenzisa <nav>
ukukhangela okusekwe.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Ukusebenza ngezixhobo eziguqukayo
Ukuba ufuna ukusabela okwahluka kwe-nav, cinga ukusebenzisa uluhlu lwezinto eziluncedo ze- flexbox . Ngelixa i-verbose ngakumbi, ezi zixhobo zibonelela ngokwenziwa ngokwezifiso okukhulu kuzo zonke iindawo ezisabelayo. Kulo mzekelo ungezantsi, i-nav yethu iya kupakishwa kweyona ndawo isezantsi yoqhawulo, emva koko ilungelelanise ubeko oluthe tye olugcwalisa ububanzi obukhoyo ukusuka kwindawo encinci yokuphumla.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Ngokumalunga nokufikeleleka
Ukuba usebenzisa i-navs ukubonelela ngebar yokukhangela, qiniseka ukuba wongeza role="navigation"
u-a kwesona sikhongozeli sinomzali sisengqiqweni se-, <ul>
okanye usonge into ethile kuhambo <nav>
lonke. Musa ukongeza indima kuyo <ul>
ngokwayo, njengoko oku kuya kuthintela ukuba ibhengezwe njengoluhlu lokwenyani ngobuchule bokuncedisa.
Qaphela ukuba iibar zokukhangela, nokuba zibukeka njenge tabhu kunye .nav-tabs
nodidi, akufuneki zinikwe role="tablist"
, role="tab"
okanye role="tabpanel"
iimpawu. Ezi zilungele kuphela ujongano oluguquguqukayo lwethebhu, njengoko kuchaziwe kwi- WAI ARIA yeZenzo zokuBhalisa . Jonga ukuziphatha kweJavaScript yojongano oluguquguqukayo lwethebhu kweli candelo lomzekelo. Uphawu aria-current
loyelelwano aluyomfuneko kujongano oluguquguqukayo lwe tab ukususela ekubeni iJavaScript yethu iphethe imeko ekhethiweyo ngokongeza aria-selected="true"
kwisithuba esisebenzayo.
Ukusebenzisa iidrophu
Yongeza iimenu ezihlayo nge-HTML encinci eyongezelelweyo kunye neplagi ye- JavaScript eyehlayo .
Iithebhu ezinokwehla
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Iipilisi ezine 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Sass
Izinto eziguquguqukayo
$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;
Ukuziphatha kweJavaScript
Sebenzisa i-plugin ye-JavaScript yethebhu-yibandakanye ngabanye okanye bootstrap.js
ngefayile edibeneyo-ukwandisa iithebhu zethu zokuhamba kunye neepilisi ukwenza iipaneli ze-tableable zomxholo wendawo.
I-Dynamic tabbed interfaces, njengoko ichazwe kwi- WAI ARIA yeZenzo zokuBhalisa , ifuna role="tablist"
, role="tab"
, role="tabpanel"
, kunye neempawu ezongezelelweyo aria-
ukwenzela ukuhambisa isakhiwo sabo, ukusebenza kunye nemeko yangoku kubasebenzisi bobuchwepheshe bokuncedisa (njengabafundi besikrini). Njengomsebenzi ogqwesileyo, sincoma ukusebenzisa <button>
izinto zeethebhu, njengoko ezi zizilawuli ezibangela utshintsho oluguquguqukayo, kunezikhonkco eziya kwiphepha elitsha okanye indawo.
Qaphela ukuba ujongano oluguquguqukayo lwe tab akufuneki luqulathe iimenu ezilahlayo, njengoko oku kubangela zombini ukusetyenziswa kunye nemiba yofikelelo. Ukusuka kwimbono yokusebenziseka, into yokuba isiqalo sethebhu ebonisiweyo ngoku ayibonakali ngokukhawuleza (njengoko ingaphakathi kwimenyu eyehlayo evaliweyo) inokubangela ukubhideka. Ukusuka kumbono wofikelelo, okwangoku akukho ndlela isengqiqweni yokwenza imephu yolu hlobo lolwakhiwo kwipatheni eqhelekileyo ye-WAI ARIA, nto leyo ethetha ukuba ayinakwenziwa lula ukuba iqondeke kubasebenzisi bobuchwephesha bokuncedisa.
Lo ngomnye umxholo wesibambi-ndawo ithebhu yaseKhaya umxholo onxulumeneyo. Ukucofa enye isithuba kuya kuguqulela ukubonakala kwalena kwelandelayo. Ithebhu yeJavaScript itshintshanisa iindidi zokulawula ukubonakala komxholo kunye nesimbo. Ungayisebenzisa kunye neethebhu, iipilisi, kunye naluphi na olunye .nav
ukukhangela okunamandla.
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>
Ukunceda ukulingana neemfuno zakho, oku kusebenza <ul>
ngophawu olusekwe-, njengoko kubonisiwe ngasentla, okanye nangaluphi na uphawu olungenamkhethe "rola okwakho". Qaphela ukuba usebenzisa <nav>
, akufuneki udibanise role="tablist"
ngokuthe ngqo kuyo, njengoko oku kuya kubhala ngaphezulu indima yendalo yesiqalelo njengophawu lokukhangela lomhlaba. Endaweni yoko, tshintshela kwenye into (kumzekelo ongezantsi, elula <div>
) kwaye uyisongele <nav>
ngeenxa zonke.
<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>
Iplagi yeethebhu iphinda isebenze kunye neepilisi.
Lo ngomnye umxholo wesibambi-ndawo ithebhu yaseKhaya umxholo onxulumeneyo. Ukucofa enye isithuba kuya kuguqulela ukubonakala kwalena kwelandelayo. Ithebhu yeJavaScript itshintshanisa iindidi zokulawula ukubonakala komxholo kunye nesimbo. Ungayisebenzisa kunye neethebhu, iipilisi, kunye naluphi na olunye .nav
ukukhangela okunamandla.
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>
Kwaye ngeepilisi ezithe nkqo.
Lo ngomnye umxholo wesibambi-ndawo ithebhu yaseKhaya umxholo onxulumeneyo. Ukucofa enye isithuba kuya kuguqulela ukubonakala kwalena kwelandelayo. Ithebhu yeJavaScript itshintshanisa iindidi zokulawula ukubonakala komxholo kunye nesimbo. Ungayisebenzisa kunye neethebhu, iipilisi, kunye naluphi na olunye .nav
ukukhangela okunamandla.
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>
Ukusebenzisa iimpawu zedatha
Unokwenza ithebhu okanye ukukhangela iipilisi ngaphandle kokubhala nayiphi na iJavaScript ngokuchaza ngokulula data-bs-toggle="tab"
okanye data-bs-toggle="pill"
kwinto. Sebenzisa ezi mpawu zedatha kwi .nav-tabs
okanye .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>
NgeJavaScript
Yenza iithebhu ezinokubakho ngeJavaScript (ithebhu nganye kufuneka ivulwe ngokwayo):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Fade isiphumo
Ukwenza iithebhu ziphelelwe, yongeza .fade
kuyo nganye .tab-pane
. Ipheyini yethebhu yokuqala kufuneka kwakhona .show
yenze umxholo wokuqala ubonakale.
<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>
Iindlela
Iindlela zeAsynchronous kunye notshintsho
Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba inguqu iqalisiwe kodwa ingekapheli . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .
constructor
Yenza isiqalelo sethebhu kunye nesiqulatho sisebenze. Isithuba kufuneka sibene data-bs-target
okanye, ukuba usebenzisa ikhonkco, uphawu href
loyelelwano, lujolise kwindawo yesikhongozeli kwiDOM.
<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 a')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
bonisa
Ikhetha isithuba esinikiweyo kwaye ibonise isahlulo sayo esinxulumeneyo. Nayiphi enye isithuba ebesikhe yakhethwa ngaphambili ayikhethwanga kwaye isahlulo sayo esinxulumeneyo siyafihlwa. Ibuyisela kumnxebi phambi kokuba ipayini yethebhu iboniswe ngokwenene (okt phambi kokuba shown.bs.tab
isiganeko senzeke).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
lahla
Uyonakalisa ithebhu yesiqalelo.
getInstance
Indlela engatshintshiyo ekuvumela ukuba ufumane isithuba sesithuba esidityaniswe nesiqalelo seDOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wethebhu edityaniswe nento yeDOM, okanye wenze entsha ukuba ayiqalwanga.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Iziganeko
Xa ubonisa ithebhu entsha, iziganeko zivutha ngolu hlobo lulandelayo:
hide.bs.tab
(kwithebhu esebenzayo yangoku)show.bs.tab
(kwi-eza kuboniswa thebhu)hidden.bs.tab
(kwithebhu esebenzayo yangaphambili, efanayo nalehide.bs.tab
yesiganeko)shown.bs.tab
(kwisithuba esandula ukusebenza esivele sibonise ithebhu, efanayoshow.bs.tab
nesesiganeko)
Ukuba akukho thebhu ibisele iyasebenza, ngoko i hide.bs.tab
kunye hidden.bs.tab
neziganeko aziyi kugxothwa.
Uhlobo lomsitho | Inkcazo |
---|---|
show.bs.tab |
Esi siganeko sivutha kumboniso wethebhu, kodwa ngaphambi kokuba ithebhu entsha iboniswe. Sebenzisa event.target kunye event.relatedTarget nokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo. |
shown.bs.tab |
Esi siganeko sitshisa kwi-tab show emva kokuba ithebhu ibonisiwe. Sebenzisa event.target kunye event.relatedTarget nokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo. |
hide.bs.tab |
Esi siganeko sitshisa xa isithuba esitsha siza kuboniswa (kwaye ke isithuba sangaphambili esisebenzayo siza kufihlwa). Sebenzisa event.target kunye event.relatedTarget nokujolisa ithebhu esebenzayo yangoku kunye nethebhu entsha eza kusebenza ngokukhawuleza, ngokulandelelanayo. |
hidden.bs.tab |
Esi siganeko sivutha emva kokuba ithebhu entsha ibonisiwe (kwaye ke isithuba sangaphambili esisebenzayo sifihliwe). Sebenzisa event.target kunye event.relatedTarget nokujolisa kwithebhu esebenzayo yangaphambili kunye nethebhu entsha esebenzayo, ngokulandelelanayo. |
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
})