in English

I-Navs

Amadokhumenti nezibonelo zokuthi zisetshenziswa kanjani izingxenye ze-Bootstrap zokuzulazula ezifakiwe.

Isisekelo nav

Ukuzulazula kutholakala ku-Bootstrap yabelana ngemakhaphu evamile nezitayela, kusukela kusigaba sesisekelo .navkuya ezifundazweni ezisebenzayo nezikhubazekile. Shintshanisa amakilasi okushintsha ukuze ushintshe phakathi kwesitayela ngasinye.

Ingxenye yesisekelo .navyakhiwe nge-flexbox futhi inikeza isisekelo esiqinile sokwakha zonke izinhlobo zezingxenye zokuzulazula. Kubandakanya ukubhala ngaphezulu kwesitayela esithile (sokusebenza ngezinhlu), ezinye izixhumanisi zokunamathisela izindawo ezinkulu ezishaywayo, kanye nesitayela esiyisisekelo esikhubazekile.

Ingxenye yesisekelo .navayifaki noma yisiphi .activeisimo. Izibonelo ezilandelayo zifaka ikilasi, ikakhulukazi ukukhombisa ukuthi lesi sigaba asibangeli isitayela esikhethekile. 
<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>

Amakilasi asetshenziswa kulo lonke, ngakho umaki wakho ungaguquguquka kakhulu. Sebenzisa u <ul>-s njengangenhla, <ol>uma ukuhleleka kwezinto zakho kubalulekile, noma gingqa eyakho ngento <nav>. Ngoba .navukusetshenziswa display: flex, izixhumanisi ze-nav ziziphatha ngendlela efanayo nezinto ze-nav, kodwa ngaphandle kwemakhaphu eyengeziwe.

<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>

Izitayela ezitholakalayo

Shintsha isitayela sengxenye ye- .navs ngezilungisi kanye nezinsiza. Hlanganisa futhi ufanise njengoba kudingeka, noma wakhe owakho.

Ukuqondanisa okuvundlile

Shintsha ukuqondanisa okuvundlile kwe-nav yakho nezinsiza ze- flexbox . Ngokuzenzakalelayo, ama-navs aqondaniswe kwesokunxele, kodwa ungakwazi ukuwashintsha kalula ukuze aqondaniswe maphakathi noma kwesokudla.

Kuphakathi kokuthi .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>

Iqondaniswe kwesokudla ne- .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>

Iqondile

Beka ukuzulazula kwakho ngokushintsha isiqondiso sento eguquguqukayo ngohlelo .flex-columnlokusebenza. Udinga ukuwabeka kwezinye izindawo zokubuka kodwa hhayi kwezinye? Sebenzisa izinguqulo eziphendulayo (isb, .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>

Njengenjwayelo, ukuzulazula okuqondile kuyenzeka ngaphandle <ul>kuka-s, futhi.

<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>

Amathebhu

Ithatha i-nav eyisisekelo kusuka phezulu futhi yengeza .nav-tabsiklasi ukuze ikhiqize isixhumi esibonakalayo esinamathebhu. Zisebenzise ukuze udale izifunda ezithintekayo ngethebhu yethu i- 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>

Amaphilisi

Thatha leyo HTML efanayo, kodwa sebenzisa .nav-pillsesikhundleni salokho:

<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>

Gcwalisa futhi ubeke izizathu

Phoqa .navokuqukethwe kwakho ukunweba ububanzi obugcwele obutholakalayo izigaba ezimbili zesilungisi. Ukuze ugcwalise ngokulinganayo zonke izikhala ezitholakalayo nge- .nav-items yakho, sebenzisa .nav-fill. Qaphela ukuthi sonke isikhala esivundlile sigcwele, kodwa akuzona zonke izinto ze-nav ezinobubanzi obufanayo.

<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>

Uma usebenzisa <nav>ukuzulazula okusekelwe, ungashiya ngokuphephile .nav-itemnjengoba .nav-linkkudingeka kuphela <a>ezintweni zesitayela.

<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>

Ukuze uthole ama-elementi anobubanzi obulinganayo, sebenzisa .nav-justified. Sonke isikhala esivundlile sizosetshenziswa izixhumanisi ze-nav, kodwa ngokungafani nalokhu .nav-fillokungenhla, yonke into ye-nav izoba nobubanzi obufanayo.

<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>

Ngokufanayo .nav-fillnesibonelo usebenzisa <nav>ukuzulazula okusekelwe.

<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>

Ukusebenza ngezinsiza eziguqukayo

Uma udinga ukuhlukahluka okusabelayo kwe-nav, cabanga ukusebenzisa uchungechunge lwezinsiza ze- flexbox . Ngenkathi i-verbose kakhudlwana, lezi zinsiza zinikeza ukwenza ngokwezifiso okukhulu kuwo wonke ama-breakpoints asabelayo. Esibonelweni esingezansi, i-nav yethu izopakishwa endaweni yokuphumula ephansi kakhulu, bese ijwayelana nesakhiwo esivundlile esigcwalisa ububanzi obutholakalayo kusukela endaweni encane yokuhlukana.

<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>

Mayelana nokufinyeleleka

Uma usebenzisa i-navs ukuze unikeze ibha yokuzulazula, qiniseka ukuthi ungeza u-a role="navigation"esiqukathi esinengqondo kunazo zonke esingumzali se- <ul>, noma usonge into ethile kukho <nav>konke ukuzulazula. Ungangezi indima <ul>kuyona uqobo, njengoba lokhu kuzoyivimbela ukuthi imenyezelwe njengohlu lwangempela ngobuchwepheshe obusizayo.

Qaphela ukuthi amabha okuzulazula, ngisho noma enziwe isitayela njengamathebhu aneklasi .nav-tabs, akufanele anikezwe , role="tablist"noma role="tab"izibaluli role="tabpanel". Lokhu kulungele kuphela ukuxhumana kwamathebhu ashukumisayo, njengoba kuchazwe kuphethini yamathebhu ethi I-ARIA Authoring Practices Guide . Bona impatho ye-JavaScript yezindawo zokusebenzelana zamathebhu ashukumisayo kulesi sigaba njengesibonelo.

Ukusebenzisa okwehliswayo

Engeza amamenyu okwehlayo nge-HTML encane eyengeziwe kanye ne- plugin ye-JavaScript eyehlayo .

Amathebhu anokwehliswayo

<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>

Amaphilisi ane dropdowns

<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>

Ukuziphatha kweJavaScript

Sebenzisa i-plugin yethebhu ye-JavaScript—ifake ngayodwa noma ngefayela elihlanganisiwe bootstrap.js—ukuze unwebe amathebhu ethu okuzulazula namaphilisi ukuze udale amafasitelana angamathebhu okuqukethwe kwasendaweni.

Uma wakha i-JavaScript yethu ngomthombo, idingautil.js .

Izixhumi ezibonakalayo ezinamathebhu anamandla, njengoba kuchazwe kuphethini yamathebhu Omhlahlandlela Wemikhuba Yokugunyaza ye-ARIA , zidinga role="tablist", role="tab", role="tabpanel", kanye nezibaluli ezengeziwe aria-ukuze kudluliselwe ukwakheka kwazo, ukusebenza nesimo samanje kubasebenzisi bobuchwepheshe obusizayo (njengabafundi besikrini). Njengomkhuba omuhle kakhulu, sincoma ukusebenzisa <button>izici zamathebhu, njengoba lezi kuyizilawuli ezicupha ushintsho oluguqukayo, kunezixhumanisi ezizulazulela ekhasini elisha noma indawo.

Qaphela ukuthi i-plugin yethebhu ye-JavaScript ayisekeli izixhumi ezibonakalayo ezinamathebhu eziqukethe amamenyu okwehlayo, njengoba lokhu kubangela kokubili izinkinga zokusebenziseka nokufinyeleleka. Ngokombono wokusebenziseka, iqiniso lokuthi i-elementi ye-trigger yethebhu ebonisiwe okwamanje ayibonakali ngokushesha (njengoba ingaphakathi kwemenyu yokudonsela phansi evaliwe) ingabangela ukudideka. Ngokombono wokufinyeleleka, okwamanje ayikho indlela ephusile yokubeka lolu hlobo lokwakha kuphethini evamile ye-WAI ARIA, okusho ukuthi ngeke yenziwe iqondakale kalula kubasebenzisi bobuchwepheshe obusizayo.

Okuqukethwe kwesimeli sephaneli yethebhu. Lokhu kuhlobene nethebhu yasekhaya. Ikuyisa phezulu ngamamayela, iphakeme kakhulu, ngoba inalokho kumomotheka okukodwa kwamazwe ngamazwe. Kunomuntu engingamazi embhedeni wami, kuduma ikhanda lami. O, cha. Kwenye impilo ngizokwenza uhlale. Ngoba mina, ngingenza noma yini. Ukulungela impi yami yomqhele. Ujwayele ukweba utshwala babazali bakho ugibele ophahleni. Ithoni, i-tan ilingana futhi ilungile, yiphakamise bangela ukuba kube nzima kakhulu. Uthando lwakhe lufana nesidakamizwa. Ngicabanga ukuthi ngikhohliwe ukuthi nganginokukhetha.

Okuqukethwe kwesimeli sephaneli yethebhu. Lokhu kuhlobene nethebhu yephrofayela. Unezakhiwo ezinhle kakhulu. Izitembu zamaphasiphothi, ungumuntu wezizwe zonke. Kuhle, kusha, kunolaka, sikufake kukhiye. Angikaze ngihlele ukuthi ngelinye ilanga ngiyolahlekelwa nguwe. Udla inhliziyo yakho. Ukuqabula kwakho ku-cosmic, konke ukunyakaza kuwumlingo. Ngisho laba, ngiqonde ukuthi uyena. Sanibonani zithandwa asithathe uhambo. Vele uphathe ubusuku obunjengomhla zizi-4 kuJulayi! Kodwa uncamela ukumoshakala.

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>

Ukusiza ukulingana nezidingo zakho, lokhu kusebenza <ul>ngomaka -osuselwe, njengoba kuboniswe ngenhla, noma nganoma iyiphi imakhaphu ethi "zigoqe ngokwakho". Qaphela ukuthi uma usebenzisa i- <nav>, akufanele wengeze kuyo role="tablist"ngokuqondile, njengoba lokhu kuzokhipha indima yomdabu ye-elementi njengophawu lwendawo yokuzulazula. Esikhundleni salokho, shintshela kwenye into (esibonelweni esingezansi, elula <div>) bese uyisonga <nav>.

<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>

I-plugin yamathebhu futhi isebenza namaphilisi.

Okuqukethwe kwesimeli sephaneli yethebhu. Lokhu kuhlobene nethebhu yasekhaya. Ikuyisa phezulu ngamamayela, iphakeme kakhulu, ngoba inalokho kumomotheka okukodwa kwamazwe ngamazwe. Kunomuntu engingamazi embhedeni wami, kuduma ikhanda lami. O, cha. Kwenye impilo ngizokwenza uhlale. Ngoba mina, ngingenza noma yini. Ukulungela impi yami yomqhele. Ujwayele ukweba utshwala babazali bakho ugibele ophahleni. Ithoni, i-tan ilingana futhi ilungile, yiphakamise bangela ukuba kube nzima kakhulu. Uthando lwakhe lufana nesidakamizwa. Ngicabanga ukuthi ngikhohliwe ukuthi nganginokukhetha.

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>

Futhi namaphilisi aqondile.

Okuqukethwe kwesimeli sephaneli yethebhu. Lokhu kuhlobene nethebhu yasekhaya. Ngakubona edolobheni ucula iBlues. Buka ukuthi uzungeza umsele. Kungani ungangivumeli ngidlule? Lisinda ikhanda elithwele umqhele. Yebo, sikhalisa izingelosi, izulu line emhlabeni livela phezulu. Ufuna ukubona umbukiso nge-3D, imuvi. Uyake uzwe, uzwe iphepha lincane kangaka. Nguyebo noma cha, cha mhlawumbe.

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>

Ukusebenzisa izibaluli zedatha

Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-JavaScript ngokucacisa data-toggle="tab"noma ngento data-toggle="pill"ethile. Sebenzisa lezi zibaluli zedatha kokuthi .nav-tabsnoma .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>

Nge-JavaScript

Nika amandla amathebhu aphathekayo nge-JavaScript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwa):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Ungavula amathebhu ngamanye ngezindlela ezimbalwa:

$('#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 umphumela

Ukuze wenze amathebhu afiphale, .fadeengeza .tab-pane. Ifasitelana lethebhu yokuqala kufanele futhi .showlenze okuqukethwe kokuqala kubonakale.

<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>

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

$().ithebhu

Yenza i-elementi yethebhu isebenze nesiqukathi sokuqukethwe. Ithebhu kufanele ibe data-targetnoma, uma isebenzisa isixhumanisi, hrefisibaluli esiqondise indawo yesiqukathi ku-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>

.ithebhu('bonisa')

Ikhetha ithebhu enikeziwe futhi ibonise ifasitelana elihlotshaniswa nayo. Noma iyiphi enye ithebhu ekhethwe ngaphambilini iyayekwa ukukhethwa futhi ifasitelana elihlobene nalo liyafihlwa. Ibuyela kofonayo ngaphambi kokuba kuboniswe ifasitelana lethebhu (okungukuthi ngaphambi kokuba shown.bs.tabkwenzeke umcimbi).

$('#someTab').tab('show')

.tab('lahla')

Icekela phansi ithebhu yento.

Imicimbi

Uma ubonisa ithebhu entsha, izehlakalo zivutha ngokulandelana okulandelayo:

  1. hide.bs.tab(kuthebhu esebenzayo yamanje)
  2. show.bs.tab(kuthebhu ezoboniswa)
  3. hidden.bs.tab(kuthebhu esebenzayo yangaphambilini, efanayo hide.bs.tabneyomcimbi)
  4. shown.bs.tab(kuthebhu esanda kuboniswa, efanayo show.bs.tabneyomcimbi)

Uma ingekho ithebhu ebivele iyasebenza, kuzosho ukuthi i- hide.bs.tabnemicimbi hidden.bs.tabngeke kuxoshwe.

Uhlobo Lomcimbi Incazelo
show.bs.tab Lo mcimbi uvutha embukisweni wethebhu, kodwa ngaphambi kokuthi kuboniswe ithebhu entsha. Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo.
ithebhu.bs.ebonisiwe Lo mcimbi uvutha embukisweni wethebhu ngemva kokuthi ithebhu isibonisiwe. Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo.
fihla.bs.tab Lo mcimbi uvutha lapho ithebhu entsha izoboniswa (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo izofihlwa). Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo yamanje kanye nethebhu entsha ezosebenza maduze, ngokulandelana.
ithebhu.bs.efihliwe Lo mcimbi uvutha ngemva kokuboniswa kwethebhu entsha (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo ifihliwe). Sebenzisa event.targetfuthi event.relatedTargetuqondise ithebhu esebenzayo yangaphambilini kanye nethebhu entsha esebenzayo, ngokulandelanayo. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})