Navs

Dokumintaasje en foarbylden foar it brûken fan Bootstrap's opnommen navigaasjekomponinten.

Basis nav

Navigaasje beskikber yn Bootstrap dielt algemiene markearring en stilen, fan 'e basisklasse .navoant de aktive en útskeakele steaten. Wissel modifierklassen om te wikseljen tusken elke styl.

De basiskomponint .navis boud mei flexbox en biedt in sterke basis foar it bouwen fan alle soarten navigaasjekomponinten. It omfettet wat styloverriders (foar wurkjen mei listen), wat keppelingspadding foar gruttere hitgebieten, en basis-útskeakele styling.

De basiskomponint .navomfettet gjin .activesteat. De folgjende foarbylden omfetsje de klasse, foaral om te demonstrearjen dat dizze bepaalde klasse gjin spesjale styling trigger.

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

Klassen wurde rûnom brûkt, sadat jo markup super fleksibel kin wêze. Brûk <ul>s lykas hjirboppe, <ol>as de folchoarder fan jo items wichtich is, of rôlje jo eigen mei in <nav>elemint. Om't de .navgebrûken display: flex, gedrage de nav-keppelings itselde as nav-items soene, mar sûnder de ekstra markup.

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

Beskikbere stilen

Feroarje de styl fan .navs komponint mei modifiers en nutsbedriuwen. Mix en match as nedich, of bou jo eigen.

Horizontale ôfstimming

Feroarje de horizontale ôfstimming fan jo nav mei flexbox-hulpprogramma's . Standert binne navs lofts rjochte, mar jo kinne se maklik feroarje nei sintrum of rjochts rjochte.

Sintrearre mei .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>

Rjochts ôfstimd mei .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>

Fertikaal

Stapel jo navigaasje troch de rjochting fan it flex-item te feroarjen mei it .flex-columnhulpprogramma. Moatte se op guon viewports stapelje, mar net op oaren? Brûk de responsive ferzjes (bgl. .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>

Lykas altyd, fertikale navigaasje is mooglik sûnder <ul>s, te.

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

Ljepkes

Nimt de basisnavigaasje fan boppen en foeget de .nav-tabsklasse ta om in ljepperynterface te generearjen. Brûk se om tabbere regio's te meitsjen mei ús ljepblêd 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>

Pillen

Nim deselde HTML, mar brûk .nav-pillsynstee:

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

Folje en rjochtfeardigje

Tsjinje .navde ynhâld fan jo om de folsleine beskikbere breedte ien fan twa modifikaasjeklassen te ferlingjen. Om proporsjoneel alle beskikbere romte te foljen mei jo .nav-items, brûk .nav-fill. Merken dat alle horizontale romte wurdt beset, mar net alle nav item hat deselde breedte.

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

By it brûken fan in <nav>-basearre navigaasje kinne jo feilich weglitte .nav-item, om't allinich .nav-linknedich is foar <a>styleleminten.

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

Foar gelikense breedte eleminten, brûk .nav-justified. Alle horizontale romte wurdt beset troch nav keppelings, mar yn tsjinstelling ta it .nav-fillboppesteande, sil elk nav item wêze deselde breedte.

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

Fergelykber mei it .nav-fillfoarbyld mei in <nav>-basearre navigaasje.

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

Wurkje mei flex nutsbedriuwen

As jo nedich responsive nav fariaasjes, beskôgje in gebrûk in rige fan flexbox nutsbedriuwen . Hoewol mear verbose, biede dizze nutsbedriuwen gruttere oanpassing oer responsive brekpunten. Yn it foarbyld hjirûnder, ús nav wurdt steapele op de leechste breakpoint, dan oanpasse oan in horizontale yndieling dy't follet de beskikbere breedte begjinnend fan de lytse 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>

Oangeande berikberens

As jo navs brûke om in navigaasjebalke te leverjen, wês dan wis dat jo in tafoegje role="navigation"oan 'e meast logyske âlderkontener fan' e <ul>, of in <nav>elemint om 'e hiele navigaasje wikkelje. Foegje de rol net ta oan it <ul>sels, om't dit soe foarkomme dat it wurdt oankundige as in feitlike list troch assistinte technologyen.

Tink derom dat navigaasjebalken, sels as fisueel styleare as ljeppers mei de .nav-tabsklasse, gjinrole="tablist" , role="tab"of role="tabpanel"attributen moatte wurde jûn . Dizze binne allinich geskikt foar dynamyske ljepblêden ynterfaces, lykas beskreaun yn it ljepblêdpatroan fan ARIA Authoring Practices Guide . Sjoch JavaScript gedrach foar dynamyske ljepper ynterfaces yn dizze seksje foar in foarbyld.

Mei help fan dropdowns

Foegje dropdown-menu's ta mei in bytsje ekstra HTML en de dropdowns JavaScript-plugin .

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

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

JavaScript gedrach

Brûk it ljepblêd JavaScript-plugin-ynklusyf it yndividueel of fia it kompilearre bootstrap.jsbestân-om ús navigaasjeljeppers en pillen út te wreidzjen om ljepblêden fan lokale ynhâld te meitsjen.

As jo ús JavaScript bouwe fanút boarne, fereasketutil.js it .

Dynamyske ynterfaces mei ljeppers, lykas beskreaun yn it ljepblêdpatroan fan ARIA Authoring Practices Guide , fereaskje role="tablist", role="tab", role="tabpanel", en ekstra aria-attributen om har struktuer, funksjonaliteit en hjoeddeistige steat oer te bringen oan brûkers fan assistinte technologyen (lykas skermlêzers). As bêste praktyk riede wy oan om <button>eleminten te brûken foar de ljeppers, om't dit kontrôles binne dy't in dynamyske feroaring oansette, ynstee fan keppelings dy't nei in nije side of lokaasje navigearje.

Tink derom dat it ljepblêd JavaScript-plugin gjin ljepblêd-ynterfaces stipet dy't útklapmenu's befetsje, om't dizze problemen mei brûkberens en tagonklikens feroarsaakje. Fanút in brûkberensperspektyf kin it feit dat it trigger-elemint fan it op it stuit werjûn ljepblêd net direkt sichtber is (sa't it yn it sletten útklapmenu is) betizing feroarsaakje. Fanút it eachpunt fan tagonklikens is d'r op it stuit gjin ferstannige manier om dit soarte konstruksje yn kaart te bringen nei in standert WAI ARIA-patroan, wat betsjuttet dat it net maklik begryplik makke wurde kin foar brûkers fan assistinte technologyen.

Plakhâlder ynhâld foar it ljepblêd paniel. Dizze is relatearre oan it ljepblêd thús. Nimt dy kilometers heech, sa heech, want se hat dy iene ynternasjonale glimke. Der sit in frjemdling yn myn bêd, der kloppet my yn 'e holle. Och, nee. Yn in oar libben soe ik meitsje dy bliuwe. Want ik, ik bin ta alles by steat. Oanpast foar myn kroanslach. Wurdt brûkt om de drank fan dyn âlden te stellen en nei it dak te klimmen. Toan, tan fit en klear, draai it omheech want it wurdt swier. Har leafde is as in drugs. Ik tink dat ik fergeat dat ik in kar hie.

Plakhâlder ynhâld foar it ljepblêd paniel. Dizze is relatearre oan it ljepblêd profyl. Jo hawwe de moaiste arsjitektuer. Paspoartstempels, se is kosmopolyt. Fijn, fris, fûl, wy krigen it op slot. Nea pland dat ik dy ien dei ferlieze soe. Se yt dyn hert út. Jo tút is kosmysk, elke beweging is magy. Ik bedoel de iene, ik bedoel as se de iene is. Groeten leafsten lit ús in reis nimme. Besit gewoan de nacht lykas de 4e july! Mar jo wolle leaver fergriemd wurde.

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>

Om te helpen oan jo behoeften te passen, wurket dit mei <ul>-basearre markup, lykas hjirboppe werjûn, of mei elke willekeurige "rol jo eigen" markup. Tink derom dat as jo brûke <nav>, jo moatte der net role="tablist"direkt oan taheakje, om't dit de native rol fan it elemint as navigaasje-landmark oerskriuwe soe. Skeakelje ynstee oer nei in alternatyf elemint (yn it foarbyld hjirûnder, in ienfâldige <div>) en wikkel de <nav>omhinne.

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>

De ljeppers plugin wurket ek mei pillen.

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

En mei fertikale pillen.

Plakhâlder ynhâld foar it ljepblêd paniel. Dizze is relatearre oan it ljepblêd thús. Seach dy binnenstêd sjongen de Blues. Sjoch hoe't jo de drain sirkelje. Wêrom litsto my net byhâlde? Swier is de holle dy't de kroan draacht. Ja, wy meitsje ingels gûle, reine del op ierde fan boppen. Wolle jo de foarstelling yn 3D sjen, in film. Fielst dy wolris, fielst sa papiertin. It is in ja of nee, nee miskien.

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>

Gebrûk fan gegevensattributen

Jo kinne in ljepper of pilnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan oan te jaan data-toggle="tab"of data-toggle="pill"op in elemint. Brûk dizze gegevensattributen op .nav-tabsof .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>

Fia JavaScript

Ljepblêden ynskeakelje fia JavaScript (elke ljepper moat yndividueel aktivearre wurde):

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

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

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

Om ljeppers yn te ferdwinen, foegje .fadejo ta oan elk .tab-pane. It earste ljepblêd moat ek .showde earste ynhâld sichtber meitsje moatte.

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

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

$().tab

Aktivearret in ljepper elemint en ynhâld container. De ljepper moat in data-targetof, as jo in keppeling brûke, in hrefattribút hawwe dat rjochte is op in kontenerknooppunt yn 'e 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')

Selekteart de opjûne ljepper en lit it byhearrende paniel sjen. Elke oare ljepper dy't earder selektearre is wurdt net selektearre en it byhearrende paniel is ferburgen. Keart werom nei de beller foardat it ljepblêd wirklik werjûn is (dus foardat it shown.bs.tabbarren bart).

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

.tab('dispose')

Fernielet in ljepper fan in elemint.

Eveneminten

By it werjaan fan in nije ljepper, de barrens fjoer yn 'e folgjende folchoarder:

hide.bs.tab(op it aktive ljepblêd)
show.bs.tab(op it te sjen ljepblêd)
hidden.bs.tab(op 'e foarige aktive ljepper, deselde as foar it hide.bs.tabevenemint)
shown.bs.tab(op it krekt-aktive ljepblêd, deselde as foar it show.bs.tabevenemint)

As der gjin ljepper wie al aktyf, dan sil de hide.bs.taben hidden.bs.tabeveneminten net ûntslein wurde.

Event Type	Beskriuwing
show.bs.tab	Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
shown.bs.tab	Dit evenemint ûntspringt op ljepper sjen nei in ljepper is werjûn. Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
hide.bs.tab	Dit barren ûntspringt as in nije ljepper werjûn wurde moat (en dus moat de foarige aktive ljepper ferburgen wurde). Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper te rjochtsjen en de nije ljepper dy't gau aktyf is.
hidden.bs.tab	Dit barren ûntspringt neidat in nije ljepper wurdt werjûn (en dus is de foarige aktive ljepper ferburgen). Brûk `event.target`en `event.relatedTarget`om respektivelik de foarige aktive ljepper en de nije aktive ljepper te rjochtsjen.

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