Navs og flipar

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

Á þessari síðu

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

Til að miðla virku ástandi til hjálpartækni, notaðu aria-currenteigindina — notaðu pagegildið fyrir núverandi síðu eða truefyrir núverandi hlut í setti.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">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 er aðeins viðeigandi fyrir kraftmikið flipaviðmót, eins og lýst er í WAI ARIA höfundaraðferðum . Sjá JavaScript hegðun fyrir kvik flipaviðmót í þessum hluta til að fá dæmi. Eigindin aria-currenter ekki nauðsynleg á kvikum flipaviðmótum þar sem JavaScript okkar sér um valið ástand með því að bæta aria-selected="true"við virka flipanum.

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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pilla með fellilista

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sass

Breytur

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

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.

Kvik flipaviðmót, eins og lýst er í WAI ARIA höfundaraðferðum , 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ð kvik flipaviðmót ættu ekki að innihalda fellivalmyndir, þar sem þetta veldur 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.

Þetta er staðgengilsefni sem tengist efni heimaflipans. Með því að smella á annan flipa breytist sýnileiki þessa fyrir þann næsta. JavaScript flipinn skiptir um flokka til að stjórna sýnileika efnis og stíl. Þú getur notað það með flipa, pillum og öðrum .navleiðsögum.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <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>

Notkun gagnaeiginleika

Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa JavaScript með því einfaldlega að tilgreina data-bs-toggle="tab"eða data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Þú getur virkjað einstaka flipa á nokkra vegu:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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 .

constructor

Virkjar flipaþátt og innihaldsílát. Tab ætti að hafa annað hvort eigind data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

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ð).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

farga

Eyðir flipa frumefnis.

getTilvik

Static aðferð sem gerir þér kleift að fá flipatilvikið tengt DOM frumefni

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Statísk aðferð sem gerir þér kleift að fá flipatilvikið tengt DOM-einingu, eða búa til nýjan ef það var ekki frumstillt

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

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 viðburðar	Lýsing
`show.bs.tab`	Þ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öð.
`shown.bs.tab`	Þ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öð.
`hide.bs.tab`	Þ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öð.
`hidden.bs.tab`	Þ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öð.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})