in English

Navs

Nā palapala a me nā laʻana no ka hoʻohana ʻana i nā ʻāpana hoʻokele i hoʻokomo ʻia o Bootstrap.

Base nav

Loaʻa ka hoʻokele ma Bootstrap i ka hōʻailona maʻamau a me nā ʻano, mai ka papa kumu .nava i nā mokuʻāina ikaika a me nā mea kīnā. E hoʻololi i nā papa hoʻololi e hoʻololi i waena o kēlā me kēia ʻano.

Kūkulu .navʻia ka ʻāpana kumu me ka flexbox a hāʻawi i kahi kumu ikaika no ke kūkulu ʻana i nā ʻano mea hoʻokele āpau. Loaʻa iā ia kekahi mau kāʻili ʻana (no ka hana ʻana me nā papa inoa), kekahi mau loulou loulou no nā wahi pā nui aʻe, a me ke kāʻei kino kīnā.

.navʻAʻole komo ka ʻāpana kumu i kekahi .activemokuʻāina. Aia nā laʻana ma lalo nei i ka papa, ʻo ka mea nui e hōʻike ana ʻaʻole i hoʻomaka kēia papa kūikawā i kekahi styling kūikawā. 
<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>

Hoʻohana ʻia nā papa a puni, no laila hiki ke maʻalahi kāu markup. E hoʻohana <ul>i nā mea e like me luna, <ol>inā he mea nui ka hoʻonohonoho ʻana o kāu mau mea, a i ʻole e ʻōwili iā ʻoe iho me kahi <nav>mea. Ma muli o ka .navhoʻohana ʻana display: flex, e hana like nā loulou nav me nā mea nav, akā me ka ʻole o ka hōʻailona ʻokoʻa.

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

Loaʻa nā ʻano

Hoʻololi i ke ʻano o .navka ʻāpana me nā mea hoʻololi a me nā pono hana. Hoʻohui a hoʻohālikelike e like me ka mea e pono ai, a i ʻole e kūkulu i kāu ponoʻī.

Hoʻopololei hoʻopololei

E hoʻololi i ka hoʻopololei ʻāpae o kāu nav me nā pono hana flexbox . ʻO ka mea paʻamau, hoʻopaʻa ʻia nā navs ma ka hema, akā hiki iā ʻoe ke hoʻololi iā lākou i waena a i ʻole pololei.

Kūwaena me .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>

Kūlike ʻākau me .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>

Kū pololei

E hoʻopaʻa i kāu hoʻokele ma ka hoʻololi ʻana i ke kuhikuhi kikoʻī me ka .flex-columnpono. Pono e hoʻopaʻa iā lākou ma kekahi mau viewports akā ʻaʻole nā ​​​​mea ʻē aʻe? E hoʻohana i nā mana pane (e laʻa, .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>

E like me nā manawa a pau, hiki ke hoʻokele kuʻekuʻe me ka ʻole <ul>o 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>

Nā papa

Lawe i ka nav maʻamau mai luna mai a hoʻohui i ka .nav-tabspapa e hana i kahi kikowaena tabbed. E hoʻohana iā lākou e hana i nā ʻāpana tabable me kā mākou papa 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>

Pills

E lawe i kēlā HTML like, akā e hoʻohana .nav-pillsma kahi:

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

Hoopiha a hoapono

E hoʻoikaika i kāu .navmau mea e hoʻonui i ka laula piha i loaʻa i kekahi o nā papa hoʻololi ʻelua. No ka hoʻopiha piha ʻana i nā wahi āpau i loaʻa me kāu .nav-items, e hoʻohana i ka .nav-fill. E hoʻomaopopo i ka noho ʻana o nā wahi ākea āpau, akā ʻaʻole like ka laulā o kēlā me kēia mea nav.

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

I ka hoʻohana ʻana i kahi <nav>hoʻokele -based, hiki iā ʻoe ke haʻalele me ka palekana e .nav-itemlike me ka mea .nav-linke koi ʻia no nā mea styling <a>.

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

No nā mea like-ākea, hoʻohana .nav-justified. E noho ʻia nā wahi ākea āpau e nā loulou nav, akā ʻaʻole like me ka mea i .nav-fillluna, e like ka laulā o kēlā me kēia mea nav.

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

E like me ka .nav-filllaʻana e hoʻohana ana i kahi <nav>hoʻokele -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>

Ke hana nei me nā pono hana maʻalahi

Inā makemake ʻoe i nā ʻano hoʻololi nav pane, e noʻonoʻo e hoʻohana i kahi pūʻulu o nā pono hana flexbox . ʻOiai ʻoi aku ka verbose, hāʻawi kēia mau mea pono i ka hana maʻamau ma waena o nā breakpoints pane. Ma ka laʻana ma lalo nei, e hoʻopaʻa ʻia kā mākou nav ma ka haʻahaʻa haʻahaʻa loa, a laila e hoʻololi i kahi hoʻonohonoho hoʻolālā e hoʻopiha i ka laula i loaʻa e hoʻomaka ana mai ka haʻihaʻi liʻiliʻi.

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

E pili ana i ka hiki

Inā ʻoe e hoʻohana nei i nā navs no ka hoʻolako ʻana i kahi pae hoʻokele, e hōʻoia e hoʻohui i kahi role="navigation"i ka pahu makua kūpono loa o ka <ul>, a i ʻole e hoʻopili i kahi <nav>mea a puni ka hoʻokele holoʻokoʻa. Mai hoʻohui i ke kuleana iā <ul>ia iho, no ka mea e pale ʻia ia mai ka hoʻolaha ʻia ʻana he papa inoa maoli e nā ʻenehana kōkua.

E hoʻomanaʻo, ʻaʻole pono e hāʻawi ʻia nā pahu hoʻokele, ʻoiai inā ʻike ʻia e like me nā tab me ka .nav-tabspapa, a i ʻole nā ​​hiʻohiʻona . He mea kūpono wale nō kēia no nā ʻaoʻao i hoʻopaʻa ʻia, e like me ia i wehewehe ʻia ma ke ʻano papa kuhikuhi ARIA Authoring Practices Guide . E ʻike i ke ʻano JavaScript no nā ʻaoʻao i hoʻopaʻa ʻia ma kēia ʻāpana no kahi laʻana.role="tablist"role="tab"role="tabpanel"

Ke hoʻohana nei i nā hāʻule iho

Hoʻohui i nā menus dropdown me kahi HTML hou aʻe a me ka plugin JavaScript dropdowns .

Nā papa me nā hāʻule iho

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

ʻO nā pila me nā hāʻule iho

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

ʻO ka hana JavaScript

E hoʻohana i ka plugin JavaScript tab—e hoʻokomo iā ia i kēlā me kēia a i ʻole ma o ka bootstrap.jsfaila i hōʻuluʻulu ʻia—e hoʻonui i kā mākou mau ʻaoʻao hoʻokele a me nā pila no ka hana ʻana i nā pane tabable o ka ʻike kūloko.

Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js ia .

ʻO nā ʻaoʻao hoʻopaʻa paʻa dynamic, e like me ia i ho'ākāka ʻia ma ka ARIA Authoring Practices Guide tabs pattern , pono role="tablist", role="tab", role="tabpanel", a me nā ʻano ʻē aʻe aria-i mea e hōʻike ai i ko lākou ʻano, hana a me ke kūlana o kēia manawa i nā mea hoʻohana i nā ʻenehana kōkua (e like me nā mea heluhelu pale). Ma ke ʻano he hoʻomaʻamaʻa maikaʻi loa, paipai mākou e hoʻohana i <button>nā mea no nā tabs, no ka mea he mau mana kēia e hoʻomaka ai i kahi loli ikaika, ma mua o nā loulou e hoʻokele i kahi ʻaoʻao hou a i ʻole wahi.

E hoʻomanaʻo ʻaʻole kākoʻo ka plugin JavaScript tab i nā loulou i loaʻa i nā menus dropdown, no ka mea, ke kumu kēia i nā pilikia hoʻohana a me ka hiki. Mai kahi hiʻohiʻona hoʻohana, ʻaʻole ʻike koke ʻia ka mea hoʻomaka o ka tab i hōʻike ʻia i kēia manawa (no ka mea aia i loko o ka papa kuhikuhi i pani ʻia) hiki ke huikau. Mai ka manaʻo hiki ke hiki, ʻaʻohe ala kūpono i kēia manawa e palapala i kēia ʻano hana i kahi maʻamau WAI ARIA maʻamau, ʻo ia hoʻi ʻaʻole hiki ke hoʻomaopopo maʻalahi i nā mea hoʻohana i nā ʻenehana kōkua.

Maʻiʻo placeholder no ka pā pā. Pili kēia i ka papa home. He mau mile ke kiʻekiʻe, kiʻekiʻe loa, no ka mea, loaʻa iā ia kēlā minoʻaka honua. Aia kekahi malihini ma ko'u wahi moe, he ku'i ma ko'u poo. ʻAe, ʻaʻole. I kekahi ola ʻē aʻe e hoʻopaʻa wau iā ʻoe e noho. No ka mea, hiki iaʻu ke hana i kekahi mea. Ke kūpono nei i kaʻu kaua lei aliʻi. ʻaihue i ka waiʻona o kou mau mākua a piʻi i luna. ʻO ka leo, ʻeleʻele a mākaukau, e hoʻohuli i luna i mea e kaumaha ai kona kaumaha. He lāʻau lāʻau kona aloha. Manaʻo wau ua poina iaʻu he koho.

Maʻiʻo placeholder no ka pā pā. Pili kēia i ka ʻaoʻao ʻaoʻao. Loaʻa iā ʻoe ka hale hoʻolālā maikaʻi loa. Nā peʻa palapala passport, he cosmopolitan. Maikaʻi, hou, huhū, loaʻa iā mākou ma ka laka. ʻAʻole au i hoʻolālā i kekahi lā e nalowale ana au iā ʻoe. ʻAi ʻo ia i kou puʻuwai. He kosmic kou honi, he kilokilo kēlā me kēia neʻe. ʻO koʻu manaʻo ʻo ia, ʻo ia hoʻi. Aloha e nā hoa aloha e hele kākou. Nona wale i ka pō e like me ka lā 4 o Iulai! Akā, ʻoi aku ka maikaʻi o ka lilo ʻana.

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>

No ke kōkua ʻana i kāu mau pono, hana kēia me ka <ul>markup -based, e like me ka mea i hōʻike ʻia ma luna, a i ʻole me kekahi markup "roll your own". E hoʻomanaʻo, inā ʻoe e hoʻohana nei i ka <nav>, ʻaʻole pono ʻoe e hoʻohui role="tablist"pololei iā ia, no ka mea, e hoʻopau kēia i ke kuleana maoli o ka mea ma ke ʻano he ʻāina hoʻokele. Akā, e hoʻololi i kahi mea ʻē aʻe (ma ka laʻana ma lalo nei, kahi maʻalahi <div>) a ʻōwili a <nav>puni ia.

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

Hoʻohana pū ka plugin tabs me nā pila.

Maʻiʻo placeholder no ka pā pā. Pili kēia i ka papa home. He mau mile ke kiʻekiʻe, kiʻekiʻe loa, no ka mea, loaʻa iā ia kēlā minoʻaka honua. Aia kekahi malihini ma ko'u wahi moe, he ku'i ma ko'u poo. ʻAe, ʻaʻole. I kekahi ola ʻē aʻe e hoʻopaʻa wau iā ʻoe e noho. No ka mea, hiki iaʻu ke hana i kekahi mea. Ke kūpono nei i kaʻu kaua lei aliʻi. ʻaihue i ka waiʻona o kou mau mākua a piʻi i luna. ʻO ka leo, ʻeleʻele a mākaukau, e hoʻohuli i luna i mea e kaumaha ai kona kaumaha. He lāʻau lāʻau kona aloha. Manaʻo wau ua poina iaʻu he koho.

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>

A me nā lāʻau kūpaʻa.

Maʻiʻo placeholder no ka pā pā. Pili kēia i ka papa home. Ua ʻike ʻoe iā ʻoe e hīmeni ana i ka Blues. E nānā iā ʻoe e pōʻai i ke kahawai. No ke aha ʻoe ʻaʻole ʻae mai iaʻu e kipa aku? He kaumaha ke poʻo e kau i ka lei aliʻi. ʻAe, ke uwē nei mākou i nā ʻānela, e hoʻoua mai i ka honua mai luna mai. Makemake ʻoe e ʻike i ka hōʻike ma 3D, he kiʻiʻoniʻoni. Manaʻo paha ʻoe, manaʻo he pepa lahilahi. He ʻae a ʻaʻole paha, ʻaʻole paha.

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>

Ke hoʻohana nei i nā ʻano ʻikepili

Hiki iā ʻoe ke hoʻoikaika i ka ʻaoʻao a i ʻole ka hoʻokele pila me ka kākau ʻole ʻana i kekahi JavaScript ma ke kuhikuhi wale ʻana a i data-toggle="tab"ʻole data-toggle="pill"ma kahi mea. E hoʻohana i kēia mau ʻano ʻikepili ma a i .nav-tabsʻole .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>

Ma o JavaScript

E hoʻā i nā ʻaoʻao papa ma o JavaScript (pono e hoʻāla ʻia kēlā me kēia ʻaoʻao):

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

Hiki iā ʻoe ke hoʻāla i nā pā pākahi ma nā ʻano he nui:

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

Ka hopena mae

No ka hoʻopau ʻana i nā tabs, hoʻohui .fadei kēlā me kēia .tab-pane. Pono ka pane ʻaoʻao mua e ʻike .showi ka ʻike mua.

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

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

$().tab

Ho'ā i ka ʻeleʻele tab a me ka ipu maʻiʻo. Pono ka Tab i kahi a i data-targetʻole, inā e hoʻohana ana i kahi loulou, kahi hrefhiʻohiʻona e huli ana i kahi pahu pahu ma ka 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('hōʻike')

Koho i ka pā i hāʻawi ʻia a hōʻike i kāna pane pili. ʻAʻole i koho ʻia kekahi ʻaoʻao ʻē aʻe i koho mua ʻia a hūnā ʻia kāna pane pili. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka pane tab (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.tabhanana).

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

.tab('hoʻopau')

Hoʻopau i ka pā o kahi mea.

Nā hanana

I ka hōʻike ʻana i kahi ʻaoʻao hou, e ʻā nā hanana ma ke ʻano penei:

  1. hide.bs.tab(ma ka papa hana o kēia manawa)
  2. show.bs.tab(ma ka ʻaoʻao e hōʻike ʻia)
  3. hidden.bs.tab(ma ka papa hana mua, e like me ka hide.bs.tabhanana)
  4. shown.bs.tab(ma ka ʻaoʻao hou i hōʻike ʻia, e like me ka show.bs.tabhanana)

Inā ʻaʻohe papa i hana mua ʻia, ʻaʻole e puhi ʻia nā hanana hide.bs.taba me nā hanana.hidden.bs.tab

ʻAno Hanana wehewehe
hōʻike.bs.tab Hoʻomaka kēia hanana ma ka hōʻike pā, akā ma mua o ka hōʻike ʻia ʻana o ka pā hou. E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
hōʻike ʻia.bs.tab Hoʻomaka kēia hanana ma ka hōʻike pā ma hope o ka hōʻike ʻia ʻana o kahi pā. E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
huna.bs.tab Ke ahi kēia hanana i ka wā e hōʻike ʻia ai kahi pā hou (a no laila e hūnā ʻia ka pā hana mua). E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka ʻaoʻao ʻeleu o kēia manawa a me ka ʻaoʻao koke-e-ʻeleu hou.
huna.bs.tab Ke ahi kēia hanana ma hope o ka hōʻike ʻia ʻana o kahi pā hou (a no laila ua hūnā ʻia ka pā hana mua). E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka papa hana mua a me ka pā hana hou. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})