Navs nga

Dokumentasion ken dagiti pagarigan para iti no kasano nga usaren dagiti nairaman a paset ti nabigasion ti Bootstrap.

Base nga nav

Ti nabigasion a magun-od iti Bootstrap ket mangibinglay ti sapasap a panagmarka ken dagiti estilo, manipud iti batayan .nava klase aginggana kadagiti aktibo ken baldado nga estado. Agsinnukat kadagiti klase ti mangbalbaliw tapno agsubli iti nagbaetan ti tunggal maysa nga estilo.

Ti batayan .nava paset ket naibangon babaen ti flexbox ken mangipaay ti napigsa a pundasion para iti panagbangon kadagiti amin a kita ti paset ti nabigasion. Daytoy ket mangiraman ti sumagmamano a panagbaliw ti estilo (para iti panagtrabaho kadagiti listaan), sumagmamano a silpo a padding para kadagiti dakdakkel a nadungpar a lugar, ken dagiti batayan a baldado nga estilo.

Ti batayan .nava paset ket saan a mangiraman ti ania man .activenga estado. Dagiti sumaganad a pagarigan ket mairaman ti klase, a nangruna tapno maipakita a daytoy a partikular a klase ket saan a mangtignay ti ania man nga espesial nga estilo.

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

Mausar dagiti klase iti intero, isu a mabalin a super flexible ti markup-mo. Usaren <ul>ti s a kas iti ngato, <ol>no napateg ti urnos dagiti banagmo, wenno i-roll ti bukodmo nga addaan iti <nav>elemento. Gapu ta dagiti .navpanagusar display: flex, dagiti silpo ti nav ket agtigtignayda a kas dagiti banag ti nav ket aramidenda, ngem awan ti ekstra a marka.

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

Dagiti magun-odan nga estilo

Baliwan ti estilo ti .navs component babaen dagiti modifier ken utilities. Paglalaoken ken pagtunos no kasapulan, wenno mangbangon iti bukodmo.

Paisaad a panagtunos

Baliwan ti horizontal a panagtunos ti nav mo kadagiti flexbox utilities . Babaen ti default, dagiti nav ket naitunos iti kannigid, ngem nalakam a baliwan dagitoy iti tengnga wenno kannawan a naitunos.

Naisentro iti .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>

Kannawan-a-naitunos iti .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>

Patakder

I-stack ti nabigasionmo babaen ti panangbalbaliw iti direksion ti flex item babaen ti .flex-columnutility. Kasapulan kadi nga i-stack dagitoy iti sumagmamano a viewport ngem saan a dadduma? Usaren dagiti sumungbat a bersion (kas pagarigan, .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>

Kas iti kanayon, ti bertikal a panaglayag ket mabalin nga awan <ul>ti s, met.

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

Dagiti Tab

Alaen ti batayan a nav manipud iti ngato ken manginayon ti .nav-tabsklase tapno mangpataud ti tabbed interface. Usaren dagitoy a mangpartuat kadagiti tabbable a rehion babaen ti tab a JavaScript plugin tayo .

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

Pildoras nga

Alaem dayta met laeng nga HTML, ngem usarem .nav-pillsketdi:

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

Punnuem ken ikalintegan

Piliten dagiti .navlinaon ti 'mo tapno mangpalawa ti naan-anay a magun-od a kalawa maysa kadagiti dua a klase ti mangbalbaliw. Tapno proporsional a mapno amin a magun-odan nga espasio babaen ti .nav-items-mo, usarem ti .nav-fill. Madlaw nga amin a horizontal space ket okupado, ngem saan a tunggal nav item ket addaan iti agpapada a kalawa.

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

No agus-usar ti <nav>-based a nabigasion, mabalinmo a sitatalged a liklikan .nav-itema kas laeng ti kasapulan para kadagiti elemento .nav-linkti estilo .<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>

Para kadagiti agpapada ti kalawana nga elemento, usaren ti .nav-justified. Amin a horisontal nga espasio ket okupado babaen dagiti silpo ti nav, ngem saan a kas dagiti .nav-fillnadakamat, tunggal maysa a banag ti nav ket agpapadato ti kalawa.

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

Kasla ti .nav-fillpagarigan nga agus-usar ti <nav>-based a nabigasion.

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

Panagtrabaho kadagiti flex utilities

No kasapulam dagiti makasungbat a panagduduma ti nav, ibilangmo ti panagusar ti serye dagiti flexbox a utilidad . Bayat nga ad-adu a berboso, dagitoy a utilidad ket mangitukon ti dakdakkel a panagpasayaat iti ballasiw dagiti sumungbat a breakpoint. Iti pagarigan iti baba, ti navtayo ket maitumpokto iti kababaan a breakpoint, kalpasanna makibagay iti maysa a horisontal a layout a mangpunno ti magun-od a kalawa a mangrugi manipud iti bassit a breakpoint.

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

Maipapan iti accessibility

No agus-usar ka ti navs tapno mangipaay ti bara ti nabigasion, siguraduem nga inayon ti role="navigation"a iti lohikal unay a nagannak a pagkargaan ti <ul>, wenno baluten ti maysa <nav>nga elemento iti aglawlaw ti sibubukel a nabigasion. Dimo inayon ti akem iti <ul>mismo, ta daytoy ti manglapped iti pannakaipakaammo dayta kas aktual a listaan babaen kadagiti makatulong a teknolohia.

Imutektekanyo a dagiti bara ti nabigasion, urayno makita nga estilo a kas dagiti tab nga addaan iti .nav-tabsklase, ket saan koma a maited role="tablist", role="tab"wenno role="tabpanel"dagiti kababalin. Dagitoy ket maitutop laeng para kadagiti dinamiko a tabbed nga interface, a kas nailadawan iti padron dagiti tab ti Giya ti Panagsurat ti Panagsurat ti ARIA . Kitaen ti kababalin ti JavaScript para kadagiti dinamiko a tabbed nga interface iti daytoy a benneg para iti pagarigan.

Panangusar kadagiti dropdown

Manginayon kadagiti dropdown a menu nga addaan iti bassit nga ekstra nga HTML ken dagiti dropdown a JavaScript plugin .

Dagiti tab nga addaan kadagiti dropdown

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

Pildoras nga addaan 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>

Kababalin ti JavaScript

Usaren ti tab a JavaScript plugin—iraman daytoy a saggaysa wenno babaen ti naurnong bootstrap.jsa file—tapno mapalawa dagiti tab ken pildorastayo iti nabigasion tapno makaaramid kadagiti tabbable a pane ti lokal a linaon.

No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js .

Dagiti dinamiko a tabbed nga interface, a kas nailadawan iti ARIA Authoring Practices Guide tabs pattern , ket agkasapulan ti role="tablist", role="tab", role="tabpanel", ken dagiti kanayonan aria-a kababalin tapno maidanon ti estrukturada, panagusar ken agdama a kasasaadda kadagiti agar-aramat kadagiti makatulong a teknolohia (kas dagiti agbasbasa ti iskrin). Kas ti kasayaatan nga aramid, irekomendarmi ti panagusar kadagiti <button>elemento para kadagiti tab, gapu ta dagitoy ket dagiti kontrol a mangtignay ti dinamiko a panagbalbaliw, imbes a dagiti silpo a mangiturong iti baro a panid wenno lokasion.

Imutektekanyo a ti tab a plugin ti JavaScript ket saan a mangsuporta kadagiti tabbed nga interface a naglaon kadagiti dropdown a menu, a kas dagitoy ket mangpataud kadagiti agpada nga isyu ti pannakausar ken pannakagun-od. Manipud iti perspektibo ti pannakausar, ti kinapudno a ti agdama a naiparang a tab ti trigger element ket saan a dagus a makita (kas daytoy ket adda iti uneg ti naserraan a dropdown a menu) ket mabalin a mangpataud ti pannakariro. Manipud iti punto ti panagkita ti aksesibilidad, awan ti agdama a nainsiriban a wagas a mangmapa iti daytoy a kita ti konstrukto iti maysa a pagalagadan a padron ti WAI ARIA, a ti kayatna a sawen ket saan a nalaka a maaramid a maawatan kadagiti agar-aramat kadagiti makatulong a teknolohia.

Linaon ti placeholder para iti tab panel. Daytoy ket mainaig iti home tab. Takes you miles high, so high, 'ta addaan isuna iti dayta maysa nga internasional nga isem. Adda ganggannaet iti pagiddaak, adda panagduyok iti ulok. Ay, saan. Iti sabali a biag pagtalinaedenka koma. ‘Ta siak, kabaelak ti aniaman. Maibagay iti korona a labanko. Dati a mangtakaw iti arak dagiti dadakkelmo ket sumang-at iti atep. Tono, tan fit ken nakasagana, turn it up cause its gettin' heavy. Kasla droga ti ayatna. Pattapattaek a nalipatankon nga adda pagpiliak.

Linaon ti placeholder para iti tab panel. Daytoy ket mainaig iti tab ti profile. Nagun-odmo ti kasayaatan nga arkitektura. Selyo ti pasaporte, kosmopolitan isuna. Napintas, presko, narungsot, naalami dayta iti kandado. Diak pulos plano nga addanto aldaw a mapukawka. Kanenna ti pusom a rummuar. Kosmiko ti agekmo, tunggal tignay ket mahika. Kayatko a sawen dagiti, kayatko a sawen a kasla isu ti maysa. Kablaaw ay-ayaten tayo agdaliasat tayo. Basta kukua ti rabii a kas iti maika-4 ti Hulio! Ngem kaykayatmo ti masayang.

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>

Tapno makatulong a maibagay kadagiti kasapulam, daytoy ket agtrabaho iti <ul>-based markup, kas naipakita iti ngato, wenno iti ania man nga arbitrario a “roll your own” markup. Imutektekanyo a no agus-usar ka ti <nav>, saanmo koma a role="tablist"direkta a manginayon iti daytoy, a kas daytoy ket mangbalbaliw ti katutubo nga akem ti elemento a kas maysa a pagilasinan ti nabigasion. Imbes ketdi, agsublika iti alternatibo nga elemento (iti pagarigan iti baba, maysa a simple <div>) ken baluten ti <nav>aglawlawna.

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

Agtrabaho met ti tabs plugin kadagiti pildoras.

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.

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

Ket addaan kadagiti bertikal a pildoras.

Linaon ti placeholder para iti tab panel. Daytoy ket mainaig iti home tab. Nakitaka iti sentro ti siudad a mangkanta iti Blues. Buyaem ti panangsirkulom iti drain. Apay a dikay palubosan nga agsardengak? Nadagsen ti ulo a mangisuot iti korona. Wen, pagsangitantayo dagiti anghel, nga agtudo ditoy daga manipud ngato. Wanna kitaen ti pabuya iti 3D, maysa a pelikula. Mariknam kadi, mariknam a kasta ti kinaingpismo a papel. Maysa dayta a wen wenno saan, saan a nalabit.

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>

Panangusar kadagiti attribute ti datos

Mabalinmo nga aktiboen ti tab wenno pildoras a nabigasion a dika agsurat iti aniaman a JavaScript babaen ti basta panangidatag data-toggle="tab"wenno data-toggle="pill"iti maysa nga elemento. Usaren dagitoy a kababalin ti datos iti .nav-tabswenno .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>

Babaen ti JavaScript

Pagbalinen dagiti tabbable a tab babaen ti JavaScript (tunggal tab ket kasapulan a mapaaktibo a saggaysa):

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

Mabalinmo nga aktiboen dagiti indibidual a tab iti sumagmamano a wagas:

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

Tapno agkupas dagiti tab, inayon .fadeiti tunggal .tab-pane. Ti umuna a tab pane ket masapul pay .showa mangaramid ti umuna a linaon a makita.

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

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

$().tab nga

Paaktiboenna ti elemento ti tab ken container ti linaon. Ti tab ket rumbeng nga addaan iti maysa data-targetwenno, no agus-usar ti silpo, ti maysa a hrefkababalin a mangpuntiria ti maysa a nodo ti pagkargaan iti 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 ('ipakita') .

Pilien ti naited a tab ken ipakitana ti nainaig a pane daytoy. Aniaman a sabali a tab a dati a napili ket agbalin a saan a napili ken ti nainaig a pane daytoy ket mailemmeng. Agsubli iti tumawag sakbay nga aktual a naipakita ti tab pane (kayatna a sawen sakbay a shown.bs.tabmapasamak ti pasamak).

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

.tab ('ibelleng') .

Dadaelenna ti tab ti maysa nga elemento.

Dagiti Pasamak

No mangipakita ti baro a tab, dagiti pasamak ket agputok iti sumaganad nga urnos:

hide.bs.tab(iti agdama nga aktibo a tab)
show.bs.tab(iti tab a maipakita)
hidden.bs.tab(iti napalabas nga aktibo a tab, isu met laeng ti para iti hide.bs.tabpasamak)
shown.bs.tab(iti baro nga aktibo a kabarbaro a naipakita a tab, isu met laeng ti para iti show.bs.tabpasamak)

No awan ti tab a dati nga aktibo, kalpasanna ti hide.bs.tabken hidden.bs.tabdagiti pasamak ket saan a mapaputok.

Kita ti Pasamak	Panangiladawan
ipakita.bs.tab	Daytoy a pasamak ket agpuor iti tab show, ngem sakbay a naipakita ti baro a tab. Usaren ti `event.target`ken `event.relatedTarget`tapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno.
naipakita.bs.tab	Daytoy a pasamak ket agpuor iti tab show kalpasan a naipakita ti maysa a tab. Usaren ti `event.target`ken `event.relatedTarget`tapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno.
ilemmeng.bs.tab	Daytoy a pasamak ket agputok no ti baro a tab ket maipakita (ken iti kasta ti napalabas nga aktibo a tab ket mailemmeng). Usaren ti `event.target`ken `event.relatedTarget`tapno puntiriaen ti agdama nga aktibo a tab ken ti baro nga asidegen nga aktibo a tab, agpada.
nailemmeng.bs.tab	Daytoy a pasamak ket agputok kalpasan ti baro a tab a maipakita (ken iti kasta ti napalabas nga aktibo a tab ket mailemmeng). Usaren ti `event.target`ken `event.relatedTarget`tapno puntiriaen ti napalabas nga aktibo a tab ken ti baro nga aktibo a tab, a nagsasaruno.

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