Navs

Skjöl og dæmi um hvernig á að nota meðfylgjandi leiðsöguhluta Bootstrap.

Nav

Leiðsögn í boði í Bootstrap deilir almennri merkingu og stílum, frá .navgrunnflokki til virks og óvirkrar stöðu. Skiptu um breytingaflokka til að skipta á milli hvers stíls.

Grunnhlutinn .naver byggður með flexbox og gefur sterkan grunn til að byggja allar gerðir af leiðsöguíhlutum. Það felur í sér nokkrar útfærslur á stíl (til að vinna með lista), einhverja hlekkjafyllingu fyrir stærri höggsvæði og undirstöðu fatlaða stíl.

Grunnþátturinn .navinniheldur ekki neitt .activeástand. Eftirfarandi dæmi innihalda bekkinn, aðallega til að sýna fram á að þessi tiltekni flokkur kallar ekki fram neina sérstaka stíl.

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

Flokkar eru notaðir í gegn, svo álagning þín getur verið mjög sveigjanleg. Notaðu <ul>s eins og hér að ofan, <ol>ef röðin á hlutunum þínum er mikilvæg, eða rúllaðu þínum eigin með <nav>frumefni. Vegna þess að .navnav display: flex-tenglar hegða sér eins og nav-hlutir myndu hegða sér, en án aukamerkingarinnar.

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

Stíll í boði

Breyttu stíl .navs íhluta með breytingum og tólum. Blandaðu saman eftir þörfum eða byggðu þitt eigið.

Lárétt jöfnun

Breyttu láréttri röðun nav þinnar með flexbox tólum . Sjálfgefið er að siglingar séu vinstrijafnaðir, en þú getur auðveldlega breytt þeim í miðju eða hægri stillt.

Miðað 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>

Hægrijafnað 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>

Lóðrétt

Staflaðu leiðsögninni þinni með því að breyta stefnu sveigjanlegra hluta með .flex-columntólinu. Þarftu að stafla þeim á sumum útsýnisgáttum en ekki öðrum? Notaðu móttækilegu útgáfurnar (td .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>

Eins og alltaf er lóðrétt sigling líka möguleg án <ul>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>

Flipar

Tekur grunnflettingu að ofan og bætir við .nav-tabsbekknum til að búa til flipaviðmót. Notaðu þau til að búa til svæði með flipa með JavaScript viðbótinni okkar .

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

Pilla

Taktu sama HTML, en notaðu .nav-pillsí staðinn:

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

Fylltu út og rökstuddu

Þvingaðu .navinnihald þitt til að lengja alla tiltæka breidd einn af tveimur breytingaflokkum. Til að fylla hlutfallslega allt tiltækt pláss með .nav-itemsímum þínum skaltu nota .nav-fill. Taktu eftir því að allt lárétt pláss er upptekið, en ekki eru allir nav atriði með sömu breidd.

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

Þegar þú notar <nav>leiðsögn sem byggir á, geturðu örugglega sleppt .nav-itemþví þar sem aðeins .nav-linker krafist fyrir stílþætti <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>

Fyrir jafnbreiðar þætti, notaðu .nav-justified. Allt lárétt pláss verður upptekið af nav-tenglum, en ólíkt .nav-fillofangreindu, mun hver siglingahlutur hafa sömu breidd.

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

Svipað og .nav-filldæmið með því að nota <nav>-undirstaða flakk.

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

Vinna með flex tólum

Ef þú þarft móttækileg nav afbrigði skaltu íhuga að nota röð af flexbox tólum . Þótt þau séu orðlaus bjóða þessi tól meiri aðlögun á móttækilegum brotastöðum. Í dæminu hér að neðan verður sjónum okkar staflað á lægsta brotpunkt, síðan aðlagast láréttu skipulagi sem fyllir tiltæka breidd frá og með litla brotpunktinum.

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

Varðandi aðgengi

Ef þú ert að nota stýrikerfi til að útvega leiðsögustiku, vertu viss um að bæta við a role="navigation"við rökréttasta yfirgeymi <ul>, eða vefja <nav>einingu um alla leiðsögnina. Ekki bæta hlutverkinu við <ul>sjálft sig, þar sem það myndi koma í veg fyrir að það væri tilkynnt sem raunverulegur listi af hjálpartækjum.

Athugaðu að leiðarstikur, jafnvel þótt þær séu sjónrænt stílaðar sem flipar með .nav-tabsbekknum, ætti ekki að gefa role="tablist", role="tab"eða role="tabpanel"eiginleika. Þetta eru aðeins viðeigandi fyrir kvik flipaviðmót, eins og lýst er í ARIA Authoring Practices Guide flipamynstri . Sjá JavaScript hegðun fyrir kvik flipaviðmót í þessum hluta til að fá dæmi.

Notar fellilista

Bættu við fellivalmyndum með smá auka HTML og fellilistanum JavaScript viðbótinni .

Flipar með fellilista

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

Pilla með fellilista

<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 hegðun

Notaðu JavaScript viðbótina fyrir flipann - láttu það fylgja með fyrir sig eða í gegnum samsettu bootstrap.jsskrána - til að stækka leiðsagnarflipana okkar og pillur til að búa til töflurúður með staðbundnu efni.

Ef þú ert að byggja JavaScript okkar frá uppruna, krefstutil.js það .

Kvik flipaviðmót, eins og lýst er í ARIA Authoring Practices Guide flipamynstri , krefjast role="tablist", role="tab", role="tabpanel", og viðbótareiginleika aria-til að miðla uppbyggingu þeirra, virkni og núverandi ástandi til notenda hjálpartækni (eins og skjálesara). Sem besta starfsvenjan mælum við með því að nota <button>þætti fyrir flipana, þar sem þetta eru stýringar sem kalla fram kraftmikla breytingu, frekar en tengla sem fara á nýja síðu eða staðsetningu.

Athugaðu að JavaScript viðbótin fyrir flipann styður ekki flipaviðmót sem innihalda fellivalmyndir, þar sem þær valda bæði notagildi og aðgengisvandamálum. Frá sjónarhóli notagildis getur sú staðreynd að kveikjuþáttur flipans sem nú er sýndur er ekki sýnilegur strax (þar sem hann er inni í lokuðu fellivalmyndinni) valdið ruglingi. Frá sjónarhóli aðgengis er engin skynsamleg leið í augnablikinu til að kortleggja þessa tegund af byggingu í staðlað WAI ARIA mynstur, sem þýðir að það er ekki auðvelt að gera það skiljanlegt fyrir notendur hjálpartækni.

Staðsetningarefni fyrir flipaspjaldið. Þessi tengist heimaflipanum. Tekur þig kílómetra hátt, svo hátt, því hún hefur þetta eina alþjóðlega bros. Það er ókunnugur maður í rúminu mínu, það er hamingja í höfðinu á mér. Ó nei. Í öðru lífi myndi ég láta þig vera. Vegna þess að ég, ég er fær um hvað sem er. Passa upp fyrir krúnubaráttuna mína. Notað til að stela áfengi foreldra þinna og klifra upp á þakið. Tónn, sólbrúnn og tilbúinn, snúðu honum upp vegna þess að hann verður þungur. Ást hennar er eins og eiturlyf. Ég býst við að ég hafi gleymt að ég átti val.

Staðsetningarefni fyrir flipaspjaldið. Þessi tengist prófílflipanum. Þú ert með fínasta arkitektúr. Vegabréfafrímerki, hún er heimsborgari. Fínt, ferskt, grimmt, við fengum það á lás. Ég ætlaði aldrei að einn daginn myndi ég missa þig. Hún étur út úr þér hjartað. Koss þinn er kossískur, sérhver hreyfing er galdur. Ég meina þær, ég meina eins og hún sé sú eina. Sælir ástvinir skulum fara í ferðalag. Eigðu bara nóttina eins og 4. júlí! En þú vilt frekar fara til spillis.

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>

Til að hjálpa til við að passa þarfir þínar, virkar þetta með <ul>-undirstaða merkingu, eins og sýnt er hér að ofan, eða með hvaða handahófskenndu "rúllaðu eigin" merkingu. Athugaðu að ef þú ert að nota <nav>ættirðu ekki að bæta role="tablist"beint við það, þar sem þetta myndi hnekkja innfæddu hlutverki frumefnisins sem leiðarmerki. Í staðinn skaltu skipta yfir í annan þátt (í dæminu hér að neðan, einfalt <div>) og vefja <nav>um hann.

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>

Tabs viðbótin virkar líka með pillum.

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

Og með lóðréttum pillum.

Staðsetningarefni fyrir flipaspjaldið. Þessi tengist heimaflipanum. Sá þig í miðbænum syngja Blues. Horfðu á þig hringja um niðurfallið. Af hverju leyfirðu mér ekki að staldra við? Þungt er höfuðið sem ber kórónu. Já, við fáum engla til að gráta, rigna yfir jörðina ofan frá. Langar að sjá þáttinn í þrívídd, kvikmynd. Finnst þér einhvern tímann vera svona pappírsþunnur. Það er já eða nei, nei kannski.

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>

Notkun gagnaeiginleika

Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa JavaScript með því einfaldlega að tilgreina data-toggle="tab"eða data-toggle="pill"á frumefni. Notaðu þessar gagnaeiginleikar á .nav-tabseða .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>

Með JavaScript

Virkjaðu flipa sem hægt er að nota með JavaScript (hvern flipa þarf að virkja fyrir sig):

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

Þú getur virkjað einstaka flipa á nokkra vegu:

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

Til að láta flipa hverfa inn skaltu bæta .fadevið hvern .tab-pane. Fyrsta fliparúðan verður einnig .showað gera upphafsefnið sýnilegt.

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

Aðferðir

Ósamstilltar aðferðir og umskipti

Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .

Sjá JavaScript skjölin okkar fyrir frekari upplýsingar .

$().flipi

Virkjar flipaþátt og innihaldsílát. Tab ætti að hafa annað hvort eigind data-targeteða, ef þú notar tengil, hrefeigind sem miðar á gámahnút í 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('sýna')

Velur tiltekinn flipa og sýnir tengda gluggann hans. Sérhver annar flipi sem áður var valinn verður óvaldaður og tengdur gluggi hans er falinn. Fer aftur til þess sem hringir áður en flipaglugginn hefur verið sýndur (þ.e. áður en shown.bs.tabatburðurinn á sér stað).

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

.tab('farga')

Eyðir flipa frumefnis.

Viðburðir

Þegar nýr flipi er sýndur kvikna atburðir í eftirfarandi röð:

hide.bs.tab(á núverandi virka flipa)
show.bs.tab(á flipanum sem á að sýna)
hidden.bs.tab(á fyrri virka flipanum, sá sami og fyrir hide.bs.tabviðburðinn)
shown.bs.tab(á flipanum sem nýlega var sýndur, sá sami og fyrir show.bs.tabviðburðinn)

Ef enginn flipi var þegar virkur, þá verða hide.bs.tabog hidden.bs.tabviðburðir ekki ræstir.

Tegund atburðar	Lýsing
sýna.bs.flipa	Þessi atburður ræsir á flipasýningu, en áður en nýi flipi hefur verið sýndur. Notaðu `event.target`og `event.relatedTarget`til að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð.
sýndur.bs.flipi	Þessi atburður ræsir á flipasýningu eftir að flipi hefur verið sýndur. Notaðu `event.target`og `event.relatedTarget`til að miða á virka flipann og fyrri virka flipann (ef tiltækur) í sömu röð.
fela.bs.flipa	Þessi atburður ræsir þegar nýjan flipa á að sýna (og þar með á að fela fyrri virka flipa). Notaðu `event.target`og `event.relatedTarget`til að miða á núverandi virka flipa og nýja flipa sem bráðum verður virkur, í sömu röð.
falinn.bs.flipi	Þessi atburður ræsir eftir að nýr flipi er sýndur (og þar með er fyrri virki flipinn falinn). Notaðu `event.target`og `event.relatedTarget`til að miða á fyrri virka flipann og nýja virka flipann, í sömu röð.

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