in English

Navs

Dokimantasyon ak egzanp sou fason pou itilize eleman navigasyon Bootstrap yo.

Base nav

Navigasyon ki disponib nan Bootstrap pataje maketing jeneral ak estil, soti nan .navklas debaz la nan eta aktif ak andikape yo. Boukante klas modifye pou chanje ant chak style.

Eleman baz .navla bati ak flexbox epi li bay yon fondasyon solid pou bati tout kalite konpozan navigasyon. Li gen ladann kèk ranvwaye style (pou travay ak lis), kèk padding lyen pou pi gwo zòn frape, ak manier debaz andikape.

Eleman baz .navla pa genyen okenn .activeeta. Egzanp sa yo gen ladan klas la, sitou pou demontre ke klas patikilye sa a pa deklanche okenn manier espesyal. 
<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>

Klas yo itilize nan tout, kidonk maketing ou a ka super fleksib. Sèvi ak <ul>s tankou pi wo a, <ol>si lòd atik ou yo enpòtan, oswa woule pwòp ou a ak yon <nav>eleman. Paske .navitilizasyon display: flexyo, lyen nav yo konpòte menm jan ak atik nav yo, men san yo pa make siplemantè 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>

Styles ki disponib

Chanje style la nan .naveleman s ak modifikatè ak sèvis piblik. Melanje ak matche jan sa nesesè, oswa bati pwòp ou a.

Aliyman orizontal

Chanje aliyman orizontal nav ou a ak sèvis piblik flexbox . Pa default, nav yo aliye sou bò gòch, men ou ka fasilman chanje yo nan sant oswa a dwat.

Santre ak .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>

Adwat ki aliyen ak .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>

Vètikal

Pile navigasyon ou a lè w chanje direksyon atik fleksib ak .flex-columnsèvis piblik la. Bezwen pile yo sou kèk viewports men pa lòt moun? Sèvi ak vèsyon yo reponn (egzanp, .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>

Kòm toujou, navigasyon vètikal posib san yo pa <ul>s, tou.

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

Tabs

Pran navigasyon debaz la nan pi wo a epi li ajoute .nav-tabsklas la pou jenere yon koòdone ongle. Sèvi ak yo pou kreye rejyon tabtab ak plugin JavaScript tab nou an .

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

Grenn

Pran menm HTML sa a, men sèvi ak .nav-pillspito:

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

Ranpli epi jistifye

Fòse .navsa ou a pou pwolonje tout lajè ki disponib nan youn nan de klas modifye yo. Pou ranpli tout espas ki disponib nan yon fason pwopòsyonèl .nav-item, sèvi ak .nav-fill. Remake ke tout espas orizontal yo okipe, men se pa tout atik nav ki gen menm lajè.

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

Lè w ap itilize yon <nav>navigasyon ki baze sou, ou ka san danje omisyon .nav-itemkòm sèlman .nav-linksa nesesè pou <a>eleman manier.

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

Pou eleman egal-lajè, sèvi ak .nav-justified. Tout espas orizontal pral okipe pa lyen nav, men kontrèman ak sa ki .nav-fillanwo a, chak atik nav yo pral menm lajè a.

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

Menm jan ak .nav-fillegzanp lan lè l sèvi avèk yon <nav>navigasyon ki baze sou.

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

Travay ak sèvis piblik flex

Si ou bezwen varyasyon nav ki reponn, konsidere itilize yon seri sèvis piblik flexbox . Pandan ke plis detay, sèvis piblik sa yo ofri pi gwo personnalisation atravè pwen breakpoints reponn. Nan egzanp ki anba a, nav nou an pral anpile sou pwen rupture ki pi ba a, Lè sa a, adapte yo ak yon layout orizontal ki ranpli lajè ki disponib la kòmanse soti nan pwen rupture piti a.

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

Konsènan aksesiblite

Si w ap itilize nav pou bay yon ba navigasyon, asire w ou ajoute yon role="navigation"nan veso paran ki pi lojik nan <ul>, oswa vlope yon <nav>eleman alantou tout navigasyon an. Pa ajoute wòl nan <ul>tèt li, paske sa ta anpeche teknoloji asistans yo anonse l kòm yon lis aktyèl.

Remake byen ke ba navigasyon, menm si vizyèlman style kòm onglè ak .nav-tabsklas la, pa ta dwe bay role="tablist", role="tab"oswa role="tabpanel"atribi. Sa yo apwopriye sèlman pou koòdone onglet dinamik, jan sa dekri nan modèl onglè ARIA Authoring Practices Guide . Gade konpòtman JavaScript pou entèfas onglet dinamik nan seksyon sa a pou yon egzanp.

Sèvi ak dropdowns

Ajoute meni déroulants ak yon ti HTML anplis ak plugin JavaScript deroulans yo .

Onglet ak dropdowns

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

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

Konpòtman JavaScript

Sèvi ak tab JavaScript plugin-enkli li endividyèlman oswa atravè bootstrap.jsfichye konpile-pou pwolonje onglet navigasyon nou yo ak grenn nou yo pou kreye fenèt tabulab nan kontni lokal yo.

Si w ap konstwi JavaScript nou an soti nan sous, li mande pouutil.js .

Entèfas onglet dinamik, jan sa dekri nan modèl onglets Gid Pratik Otorize ARIA , mande pou role="tablist", role="tab", role="tabpanel", ak aria-atribi adisyonèl pou yo ka transmèt estrikti yo, fonksyonalite yo ak eta aktyèl yo bay itilizatè teknoloji asistans yo (tankou lektè ekran yo). Kòm yon pi bon pratik, nou rekòmande pou itilize <button>eleman pou onglet yo, paske sa yo se kontwòl ki deklanche yon chanjman dinamik, olye ke lyen ki navige nan yon nouvo paj oswa kote.

Remake byen ke plugin JavaScript tab la pa sipòte entèfas onglet ki gen meni dewoulman, paske sa yo lakòz tou de pwoblèm itilizasyon ak aksè. Soti nan yon pèspektiv itilizasyon, lefèt ke eleman deklanche tab la kounye a parèt pa imedyatman vizib (kòm li nan andedan meni an deroulant fèmen) ka lakòz konfizyon. Soti nan yon pwen de vi aksesibilite, kounye a pa gen okenn fason sansib nan kat sòt de konstriksyon sa a nan yon modèl estanda WAI ARIA, sa vle di ke li pa ka fasilman konprann itilizatè teknoloji asistans.

Kontni anplasman pou panèl tab la. Yon sèl sa a gen rapò ak tab la lakay ou. Pran ou mil wotè, tèlman wo, paske li gen yon sèl souri entènasyonal sa a. Gen yon etranje nan kabann mwen, gen yon bat nan tèt mwen. Oh, non. Nan yon lòt vi mwen ta fè ou rete. Paske mwen, mwen kapab anyen. Suiting moute pou batay kouwòn mwen an. Yo itilize yo vòlè likè paran ou yo ak monte sou do kay la. Ton, tan anfòm ak pare, vire l 'leve lakòz li vin lou. Lanmou li se tankou yon dwòg. Mwen devine ke mwen bliye mwen te gen yon chwa.

Kontni anplasman pou panèl tab la. Yon sèl sa a gen rapò ak tab la pwofil. Ou gen pi bon achitekti. Tenm paspò, li se kosmopolit. Amann, fre, feròs, nou jwenn li sou fèmen. Pa janm planifye ke yon jou mwen ta pral pèdi ou. Li manje kè ou soti. Bo ou se cosmic, chak mouvman se majik. Mwen vle di yo, mwen vle di tankou li se youn nan. Bonjou mezanmi ann fè yon vwayaj. Jis posede nwit la tankou 4 jiyè! Men, ou ta pito jwenn gaspiye.

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>

Pou ede w adapte bezwen w yo, sa ap travay ak <ul>maketing ki baze sou, jan yo montre pi wo a, oswa ak nenpòt maketing abitrè "woule pwòp ou a". Remake byen ke si w ap itilize <nav>, ou pa ta dwe ajoute role="tablist"dirèkteman nan li, paske sa a ta depase wòl natif natal eleman an kòm yon bòn tè navigasyon. Olye de sa, chanje nan yon eleman altènatif (nan egzanp ki anba a, yon senp <div>) epi vlope la <nav>alantou li.

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

Plugin a tabs travay tou ak grenn.

Kontni anplasman pou panèl tab la. Yon sèl sa a gen rapò ak tab la lakay ou. Pran ou mil wotè, tèlman wo, paske li gen yon sèl souri entènasyonal sa a. Gen yon etranje nan kabann mwen, gen yon bat nan tèt mwen. Oh, non. Nan yon lòt vi mwen ta fè ou rete. Paske mwen, mwen kapab anyen. Suiting moute pou batay kouwòn mwen an. Yo itilize yo vòlè likè paran ou yo ak monte sou do kay la. Ton, tan anfòm ak pare, vire l 'leve lakòz li vin lou. Lanmou li se tankou yon dwòg. Mwen devine ke mwen bliye mwen te gen yon chwa.

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>

Epi ak grenn vètikal.

Kontni anplasman pou panèl tab la. Yon sèl sa a gen rapò ak tab la lakay ou. Te wè ou anba lavil chante Blues yo. Gade ou fè wonn drenaj la. Poukisa ou pa kite m kanpe? Lou se tèt la ki mete kouwòn lan. Wi, nou fè zanj kriye, lapli desann sou tè a soti anwo. Ou vle wè montre nan 3D, yon fim. Èske w janm santi w, santi w konsa papye mens. Li se yon wi oswa non, non petèt.

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>

Sèvi ak atribi done yo

Ou ka aktive yon tab oswa navigasyon grenn san yo pa ekri okenn JavaScript pa senpleman espesifye data-toggle="tab"oswa data-toggle="pill"sou yon eleman. Sèvi ak atribi done sa yo sou .nav-tabsoswa .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>

Via JavaScript

Pèmèt onglè tabulab yo atravè JavaScript (yo bezwen chak tab aktive endividyèlman):

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

Ou ka aktive onglè endividyèl yo nan plizyè fason:

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

Efè fennen

Pou fè onglet fennen nan, ajoute .fadenan chak .tab-pane. Premye volet tab la dwe genyen tou .showpou fè kontni inisyal la vizib.

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

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

$().tab

Aktive yon eleman tab ak yon veso kontni. Tab ta dwe gen swa yon data-targetoswa, si w ap itilize yon lyen, yon hrefatribi ki vize yon ne veso nan DOM la.

<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('montre')

Chwazi tab la bay epi li montre fenèt ki asosye li yo. Nenpòt lòt tab ki te chwazi deja vin pa seleksyone epi fenèt ki asosye li yo kache. Retounen bay moun kap rele a anvan yo te montre volet tab la (sa vle di anvan shown.bs.tabevènman an rive).

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

.tab('jete')

Detwi tab yon eleman.

Evènman

Lè w ap montre yon nouvo tab, evènman yo pran dife nan lòd sa a:

  1. hide.bs.tab(sou onglet aktif aktyèl la)
  2. show.bs.tab(sou onglet ki dwe montre)
  3. hidden.bs.tab(sou onglet aktif anvan an, menm jan ak hide.bs.tabevènman an)
  4. shown.bs.tab(sou onglet ki fèk parèt aktif la, menm bagay la tou pou show.bs.tabevènman an)

Si pa gen okenn tab te deja aktif, Lè sa a, hide.bs.tabak hidden.bs.tabevènman yo pa pral revoke.

Kalite Evènman Deskripsyon
montre.bs.tab Evènman sa a dife sou tab montre, men anvan yo te montre nouvo tab la. Sèvi event.targetak ak event.relatedTargetpou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
montre.bs.tab Evènman sa a pran dife sou tab montre apre yo fin montre yon tab. Sèvi event.targetak ak event.relatedTargetpou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman.
kache.bs.tab Evènman sa a dife lè yon nouvo tab yo dwe montre (e konsa tab aktif anvan an dwe kache). Sèvi event.targetak ak event.relatedTargetpou vize onglet aktyèl la aktif ak nouvo tab la byento-a-aktif, respektivman.
hidden.bs.tab Evènman sa a dife apre yo fin montre yon nouvo tab (e konsa tab aktif anvan an kache). Sèvi event.targetak ak event.relatedTargetpou vize tab aktif anvan an ak nouvo tab aktif la, respektivman. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})