Navs

Zolemba ndi zitsanzo zamomwe mungagwiritsire ntchito zida za Bootstrap zomwe zikuphatikizidwa.

Base nav

Kuyenda komwe kukupezeka mu Bootstrap kugawana zowonetsera ndi masitayelo, kuchokera kumagulu oyambira .navkupita kumayiko omwe akugwira ntchito ndi olumala. Sinthani makalasi osintha kuti musinthe pakati pa sitayilo iliyonse.

Chigawo choyambira .navchimamangidwa ndi flexbox ndipo chimapereka maziko olimba omangira mitundu yonse ya zigawo za navigation. Zimaphatikizapo zolembedwa zina (zogwira ntchito ndi mindandanda), zolumikizira zina zamagawo akuluakulu omenyedwa, ndi masitayelo olemala.

Chigawo choyambira .navsichimaphatikizapo dziko lililonse .active. Zitsanzo zotsatirazi zikuphatikiza kalasi, makamaka kuwonetsa kuti kalasi ili siliyambitsa makongoletsedwe apadera.

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

Makalasi amagwiritsidwa ntchito ponseponse, kotero kuyika kwanu kumatha kusinthika kwambiri. Gwiritsani ntchito <ul>s monga pamwambapa, <ol>ngati dongosolo la zinthu zanu ndilofunika, kapena gudubuzani zanu ndi <nav>chinthu. Chifukwa chakugwiritsa .navntchito display: flex, maulalo a nav amachita chimodzimodzi monga momwe zinthu ziliri, koma popanda chowonjezera chowonjezera.

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

Masitayilo omwe alipo

Sinthani mawonekedwe a .navgawo la s ndi zosintha ndi zofunikira. Sakanizani ndi kufananiza ngati mukufunikira, kapena pangani zanu.

Kuyanjanitsa kopingasa

Sinthani kuyanika kopingasa kwa nav yanu ndi zida za flexbox . Mwachikhazikitso, ma navs amakhala olunjika kumanzere, koma mutha kuwasintha kukhala apakati kapena kumanja.

Yopangidwa ndi .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>

Zogwirizana ndi .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>

Oima

Sungani navigation yanu posintha njira yosinthira zinthu ndi .flex-columnzofunikira. Mukuyenera kuwayika pamawonekedwe ena koma osati ena? Gwiritsani ntchito matembenuzidwe omvera (mwachitsanzo, .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>

Monga nthawi zonse, kuyenda koyima kumatheka popanda <ul>s, nakonso.

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

Ma tabu

Imatengera nav yoyambira kuchokera pamwamba ndikuwonjezera .nav-tabskalasi kuti ipange mawonekedwe osankhidwa. Agwiritseni ntchito kupanga zigawo zowoneka ndi tabu yathu 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>

Mapiritsi

Tengani HTML yomweyo, koma gwiritsani ntchito .nav-pills:

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

Lembani ndi kulungamitsa

Limbikitsani .navzomwe zili mkati mwanu kuti muwonjezere kukula komwe kulipo limodzi mwa magulu awiri osintha. Kuti mukwaniritse malo onse omwe alipo ndi yanu .nav-item, gwiritsani ntchito .nav-fill. Zindikirani kuti malo onse opingasa ali ndi anthu, koma sizinthu zonse za nav zomwe zili ndi m'lifupi mwake.

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

Mukamagwiritsa ntchito <nav>--based navigation, mutha kusiya mosamala .nav-itemmomwe .nav-linkzimafunikira pamakongoletsedwe <a>azinthu.

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

Pazinthu zokhala ndi kukula kofanana, gwiritsani ntchito .nav-justified. Malo onse opingasa adzakhala ndi maulalo a nav, koma mosiyana ndi .nav-fillpamwambapa, chinthu chilichonse cha nav chidzakhala chofanana m'lifupi.

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

Mofanana ndi .nav-fillchitsanzo pogwiritsa ntchito <nav>navigation -based.

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

Kugwira ntchito ndi flex utility

Ngati mukufuna ma nav osiyanasiyana omvera, lingalirani kugwiritsa ntchito zida zingapo za flexbox . Ngakhale zili zachidule kwambiri, zida izi zimapereka makonda ambiri pamagawo omvera. Muchitsanzo chomwe chili pansipa, nav yathu idzayikidwa pamalo otsika kwambiri, kenaka sinthani ndi mawonekedwe opingasa omwe amadzaza m'lifupi mwake kuyambira podutsa pang'ono.

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

Za kupezeka

Ngati mukugwiritsa ntchito navs kuti mupereke malo olowera, onetsetsani kuti mwawonjezera pa role="navigation"chidebe chomveka bwino cha kholo la <ul>, kapena kulungani <nav>chinthu pozungulira ponseponse. Osawonjeza gawolo <ul>, chifukwa izi zingalepheretse kulengezedwa ngati mndandanda weniweni ndi matekinoloje othandizira.

Dziwani kuti ma navigation bar, ngakhale atalembedwa ngati tabu ndi .nav-tabskalasi, sayenera kuperekedwa , role="tablist"kapena role="tab"mawonekedwe role="tabpanel". Izi ndizoyenera pazolumikizana zosinthika, monga momwe zafotokozedwera mu ARIA Authoring Practices Guide pateni . Onani machitidwe a JavaScript pamawonekedwe osinthika a tab mu gawoli mwachitsanzo.

Kugwiritsa ntchito dropdowns

Onjezani mindandanda yotsitsa ndi HTML yowonjezera pang'ono ndi pulagi yotsitsa ya JavaScript .

Ma tabu okhala ndi zotsitsa

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

Mapiritsi okhala ndi zotsitsa

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

Makhalidwe a JavaScript

Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript-iphatikizepo payekhapayekha kapena kudzera pa bootstrap.jsfayilo yomwe yaphatikizidwa-kuti tiwonjezere ma tabu athu oyenda ndi mapiritsi kuti tipange mapanelo azomwe zili m'deralo.

Ngati mukupanga JavaScript yathu kuchokera kugwero, pamafunikautil.js .

Mawonekedwe a Dynamic tabbed, monga momwe tafotokozera mu tabu ya ARIA Authoring Practices Guide tabu , amafuna role="tablist", role="tab", role="tabpanel", ndi zina zowonjezera aria-kuti apereke mawonekedwe awo, magwiridwe antchito ndi momwe alili pano kwa ogwiritsa ntchito matekinoloje othandizira (monga owerenga skrini). Monga njira yabwino, timalimbikitsa kugwiritsa ntchito <button>zinthu zama tabu, chifukwa awa ndi maulamuliro omwe amayambitsa kusintha kwamphamvu, osati maulalo omwe amapita kutsamba latsopano kapena malo.

Zindikirani kuti pulogalamu yowonjezera ya JavaScript sigwirizana ndi ma tabo omwe ali ndi mindandanda yotsitsa, chifukwa izi zimayambitsa zovuta zamagwiritsidwe ntchito komanso kupezeka. Malinga ndi momwe mungagwiritsire ntchito, mfundo yoti choyambitsa tabu yomwe ikuwonetsedwa pano sikuwoneka nthawi yomweyo (monga ili mkati mwa menyu otsika) ikhoza kuyambitsa chisokonezo. Kuchokera kumalo ofikirako, pakali pano palibe njira yodziwikiratu yopangira mapangidwe amtundu uwu kukhala mawonekedwe a WAI ARIA, kutanthauza kuti sizingamveke mosavuta kwa ogwiritsa ntchito matekinoloje othandizira.

Zosungira malo za gulu la tabu. Izi zikugwirizana ndi tabu yakunyumba. Zimakutengera iwe mmwamba mailosi, mmwamba kwambiri, chifukwa iye ali nako kumwetulira kumodzi kwa mayiko. Pali mlendo pabedi langa, pali kugunda m'mutu mwanga. O, ayi. M'moyo wina ndikadakupanga kukhala. Chifukwa ine, ndine wokhoza chirichonse. Kukonzekera nkhondo yanga ya korona. Ankaba mowa wa makolo ako ndi kukwera padenga. Kamvekedwe, koyera kokwanira komanso kokonzeka, sinthani chifukwa cholemetsa. Chikondi chake chili ngati mankhwala. Ndikuganiza kuti ndinayiwala kuti ndinali ndi chisankho.

Zosungira malo za gulu la tabu. Izi zikugwirizana ndi tabu ya mbiri. Muli ndi zomanga zabwino kwambiri. Masitampu a pasipoti, iye ndi wapadziko lonse lapansi. Zabwino, zatsopano, zowopsa, tili nazo pa loko. Sindinakonzekere kuti tsiku lina ndidzakutayani. Iye amadya mtima wako. Kupsompsona kwanu ndikosangalatsa, kusuntha kulikonse ndi zamatsenga. Ndikutanthauza omwewo, ndikutanthauza ngati ndi ameneyo. Moni okondedwa tiyeni tiyende. Ingokhalani ndi usiku ngati 4 Julayi! Koma inu kulibwino muwonongeke.

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>

Kuti zikuthandizeni kukwaniritsa zosowa zanu, izi zimagwira ntchito ndi <ul>zolembera zokhazikika, monga tawonera pamwambapa, kapena ndi zolembera zanu zilizonse. Zindikirani kuti ngati mukugwiritsa ntchito <nav>, simuyenera kuwonjezerapo role="tablist", chifukwa izi zitha kupitilira gawo lachilengedwe la chinthucho ngati chizindikiro choyendera. M'malo mwake, sinthani ku chinthu china (muchitsanzo chomwe chili pansipa, chosavuta <div>) ndikukulunga <nav>mozungulira.

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.

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

Pulogalamu yowonjezera ya ma tabo imagwiranso ntchito ndi mapiritsi.

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

Ndipo ndi mapiritsi ofukula.

Zosungira malo za gulu la tabu. Izi zikugwirizana ndi tabu yakunyumba. Ndinakuwonani mtawuni mukuyimba Blues. Onetsetsani kuti mukuzungulira kukhetsa. Bwanji osandisiya? Wolemera ndi mutu umene wavala korona. Inde, timapangitsa angelo kulira, kugwetsa mvula padziko lapansi kuchokera kumwamba. Ndikufuna kuwona chiwonetserochi mu 3D, kanema. Kodi inu mumamverera konse, kumva pepala kuwonda kwambiri. Ndi inde kapena ayi, ayi mwina.

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>

Kugwiritsa ntchito mawonekedwe a data

Mutha kuyambitsa tabu kapena kuyenda kwamapiritsi osalemba JavaScript mwa kungotchulapo data-toggle="tab"kapena data-toggle="pill"pa chinthu. Gwiritsani ntchito mawonekedwe a data awa pa .nav-tabskapena .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>

Kudzera pa JavaScript

Yambitsani ma tabable kudzera pa JavaScript (tabu iliyonse iyenera kutsegulidwa payekhapayekha):

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

Mutha kuyambitsa ma tabo amodzi m'njira zingapo:

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

Kuzimiririka

Kuti ma tabo azizimire, onjezani .fadealiyense .tab-pane. Gawo loyamba la tabu liyeneranso .showkupangitsa kuti zomwe zili zoyamba ziwonekere.

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

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

$().tabu

Imayatsa chinthu cha tabu ndi chidebe cha zinthu. Tabu iyenera kukhala ndi data-targetkapena, ngati ikugwiritsa ntchito ulalo, hrefmalingaliro omwe akulozera chidebe mu 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')

Imasankha tabu yomwe yapatsidwa ndikuwonetsa gawo lomwe likugwirizana nalo. Tabu ina iliyonse yomwe idasankhidwa kale imakhala yosasankhidwa ndipo gawo lomwe limalumikizidwa limabisika. Imabwereranso kwa woyimbayo tsamba la tabu lisanasonyezedwe (ie zisanachitike shown.bs.tab).

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

.tab('taya')

Iwononga tabu ya chinthu.

Zochitika

Mukawonetsa tabu yatsopano, zochitika zimayaka motere:

hide.bs.tab(pa tabu yomwe ikugwira ntchito pano)
show.bs.tab(pa tabu yomwe ikuyenera kuwonetsedwa)
hidden.bs.tab(pa tabu yogwira kale, yofanana ndi ya hide.bs.tabchochitikacho)
shown.bs.tab(pa tabu yomwe yangowonetsedwa kumene, yofanana ndi ya show.bs.tabchochitikacho)

Ngati palibe tabu yomwe idagwira kale, ndiye kuti hide.bs.tabndi hidden.bs.tabzochitika sizidzachotsedwa.

Mtundu wa Chochitika	Kufotokozera
onetsani.bs.tab	Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito `event.target`ndikuwongolera `event.relatedTarget`tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
chiwonetsero.bs.tab	Chochitika ichi chikuyaka pa tabu chiwonetsero pambuyo poti tabu yawonetsedwa. Gwiritsani ntchito `event.target`ndikuwongolera `event.relatedTarget`tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
bisa.bs.tab	Chochitika ichi chimayaka pomwe tabu yatsopano iyenera kuwonetsedwa (ndipo chifukwa chake tabu yogwira kale iyenera kubisika). Gwiritsani ntchito `event.target`ndi `event.relatedTarget`kulunjika tabu yomwe ikugwira ntchito komanso tsamba lomwe lizigwira ntchito posachedwa, motsatana.
chobisika.bs.tab	Chochitikachi chimayaka pambuyo poti tabu yatsopano yawonetsedwa (ndipo chifukwa chake tabu yogwira kale yabisika). Gwiritsani `event.target`ntchito `event.relatedTarget`ndikulunjika tabu yomwe idagwira kale ndi tabu yatsopano, motsatana.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})