Navid ja vahelehed

Dokumentatsioon ja näited Bootstrapi kaasasolevate navigeerimiskomponentide kasutamise kohta.

Sellel lehel

Baasnavigaator

Bootstrapis saadaval olev navigeerimine jagab üldist märgistust ja stiile, alates .navpõhiklassist kuni aktiivse ja keelatud olekuni. Iga stiili vahel vahetamiseks vahetage modifikaatoriklasse.

Aluskomponent .navon ehitatud flexboxiga ja loob tugeva aluse igat tüüpi navigatsioonikomponentide ehitamiseks. See sisaldab mõningaid stiili alistamisi (loenditega töötamiseks), mõnda linkide polsterdamist suuremate tabamusalade jaoks ja põhilist keelatud stiili.

Põhikomponent .navei sisalda ühtegi .activeolekut. Järgmised näited hõlmavad klassi, peamiselt selleks, et näidata, et see konkreetne klass ei käivita mingit erilist stiili.

Aktiivse oleku edastamiseks abitehnoloogiatele kasutage aria-currentatribuuti, kasutades pagepraeguse lehe või truekomplekti praeguse üksuse väärtust.

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

Klassid kasutatakse kogu ulatuses, nii et teie märgistus võib olla väga paindlik. Kasutage <ul>ülaltoodud skeemi, <ol>kui teie üksuste järjekord on oluline, või veeretage oma <nav>elemendiga. Kuna .navkasutusalad display: flex, käituvad navigeerimislingid samamoodi nagu navigeerimisüksused, kuid ilma täiendava märgistuseta.

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

Saadaolevad stiilid

Muutke s-komponendi stiili .navmodifikaatorite ja utiliitidega. Segage ja sobitage vastavalt vajadusele või ehitage ise.

Horisontaalne joondamine

Muutke oma navi horisontaalset joondust flexboxi utiliitidega . Vaikimisi on navigeerimismärgid vasakule joondatud, kuid saate neid hõlpsalt muuta keskele või paremale joondatud.

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

Paremale joondatud .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>

Vertikaalne

Pane oma navigeerimine virna, muutes .flex-columnutiliidiga painduva üksuse suunda. Kas on vaja need virnastada mõnele vaateavale, kuid mitte teistele? Kasutage reageerivaid versioone (nt .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>

Nagu alati, on vertikaalne navigeerimine võimalik <ul>ka ilma s-ita.

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

Vahekaardid

Võtab ülalt põhinavigatsiooni ja lisab .nav-tabsklassi, et luua vahekaartidega liides. Kasutage neid vahekaartide piirkondade loomiseks meie vahekaardi JavaScripti pistikprogrammiga .

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

Tabletid

Võtke sama HTML, kuid kasutage .nav-pillsselle asemel:

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

Täida ja põhjenda

Sundige oma .navsisu laiendama kogu saadaolevat laiust ühte kahest modifikaatoriklassist. Kogu vaba ruumi proportsionaalseks täitmiseks oma .nav-items-iga kasutage .nav-fill. Pange tähele, et kogu horisontaalne ruum on hõivatud, kuid mitte iga navigeerimisüksuse laius ei ole sama.

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

Kui kasutate <nav>navigeerimispõhist navigeerimist, võite selle julgelt välja jätta .nav-item, kuna see .nav-linkon vajalik ainult stiilielementide jaoks <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>

Võrdse laiusega elementide jaoks kasutage .nav-justified. Kogu horisontaalse ruumi hõivavad navigeerimislingid, kuid erinevalt .nav-fillülaltoodust on iga navigeerimisüksus sama lai.

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

Sarnaselt .nav-fillnäitele, mis kasutab <nav>-põhist navigeerimist.

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

Töötamine paindlike utiliitidega

Kui vajate tundlikke navigeerimisvariatsioone, kaaluge mitme flexboxi utiliitide kasutamist . Kuigi need utiliidid on paljusõnalisemad, pakuvad need tundlike katkestuspunktide vahel suuremat kohandamist. Allolevas näites virnatakse meie navigeerimisseade madalaimale murdepunktile, seejärel kohandatakse see horisontaalpaigutusega, mis täidab saadaoleva laiuse alates väikesest murdepunktist.

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

Ligipääsetavuse osas

Kui kasutate navigeerimisriba loomiseks navigeerimisseadmeid, lisage kindlasti role="navigation"kõige loogilisemasse emakonteinerisse <ul>või mähkige <nav>element kogu navigeerimisriba ümber. Ärge lisage rolli <ul>iseendale, kuna see takistab abitehnoloogiate poolt selle tegeliku loendina kuulutamist.

Pange tähele, et navigeerimisribadele, isegi kui need on visuaalselt koos klassiga vahekaartidena , .nav-tabsei tohiks anda atribuute . Need sobivad ainult dünaamiliste vahekaartidega liideste jaoks, nagu on kirjeldatud WAI ARIA autoristamistavades . Vaadake selle jaotise näidet JavaScripti käitumise kohta dünaamiliste vahekaartidega liideste jaoks. Atribuut pole dünaamiliste vahekaartidega liideste puhul vajalik, kuna meie JavaScript käsitleb valitud olekut aktiivsele vahelehele lisades .role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Rippmenüüde kasutamine

Lisage rippmenüüd väikese täiendava HTML-i ja JavaScripti pistikprogrammiga .

Rippmenüüdega vahelehed

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

Rippmenüüdega pillid

<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

Muutujad

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

JavaScripti käitumine

Kasutage vahekaardi JavaScripti pistikprogrammi – lisage see eraldi või koostatud bootstrap.jsfaili kaudu –, et laiendada meie navigeerimisvahekaarte ja pille, et luua kohaliku sisu vahekaartidega paanid.

Dünaamilised vahekaartidega liidesed, nagu on kirjeldatud WAI ARIA autoristamistavades , nõuavad role="tablist", role="tab", role="tabpanel"ja täiendavaid aria-atribuute, et edastada nende struktuur, funktsionaalsus ja praegune olek abitehnoloogiate (nt ekraanilugejate) kasutajatele. Parima tavana soovitame kasutada <button>vahekaartide jaoks elemente, kuna need on juhtelemendid, mis käivitavad dünaamilise muudatuse, mitte lingid, mis suunavad uuele lehele või asukohale.

Pange tähele, et dünaamilised vahekaartidega liidesed ei tohiks sisaldada rippmenüüd, kuna see põhjustab nii kasutatavuse kui ka juurdepääsetavuse probleeme. Kasutatavuse vaatenurgast võib segadust tekitada asjaolu, et praegu kuvatava vahekaardi päästikuelement ei ole kohe nähtav (kuna see asub suletud rippmenüüs). Juurdepääsetavuse seisukohalt ei ole praegu mõistlik viis seda tüüpi konstruktsiooni kaardistada standardse WAI ARIA mustriga, mis tähendab, et seda ei saa abitehnoloogiate kasutajatele hõlpsasti arusaadavaks teha.

See on kohatäite sisu, mis on vahekaardi Avaleht seotud sisuga. Teisel vahekaardil klõpsamine lülitab selle nähtavuse järgmisele vahekaardile. Vahekaart JavaScript vahetab klasse, et juhtida sisu nähtavust ja stiili. Saate seda kasutada vahekaartide, pillide ja muude .navnavigeerimisseadmetega.

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>

Teie vajadustele vastamiseks töötab see <ul>ülaltoodud märgistusega või mis tahes suvalise "enda veeremise" märgistusega. Pange tähele, et kui kasutate <nav>, ei tohiks te sellele role="tablist"otse lisada, kuna see alistaks elemendi loomuliku rolli navigeerimise maamärgina. Selle asemel lülitage alternatiivsele elemendile (allolevas näites lihtne <div>) ja keerake see <nav>ümber.

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

Vahelehtede pistikprogramm töötab ka pillidega.

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

Ja vertikaalsete pillidega.

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>

Andmeatribuutide kasutamine

Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, lihtsalt elemendi täpsustades data-bs-toggle="tab"või peal. data-bs-toggle="pill"Kasutage neid andmeatribuute .nav-tabsvõi .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>

JavaScripti kaudu

Lubage vahekaartide vahekaardid JavaScripti kaudu (iga vahekaart tuleb eraldi aktiveerida):

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()
  })
})

Üksikuid vahekaarte saate aktiveerida mitmel viisil.

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 efekt

Vahelehtede tuhmumiseks lisage .fadeigale .tab-pane. Esimene vahelehepaan peab ka .showesialgse sisu nähtavaks tegema.

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

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

constructor

Aktiveerib vahekaardi elemendi ja sisu konteineri. Vahekaardil peaks olema kas atribuut data-bs-targetvõi lingi kasutamisel hrefatribuut, mis sihib DOM-i konteineri sõlme.

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

show

Valib antud vahekaardi ja kuvab sellega seotud paani. Kõik muud varem valitud vahelehed muutuvad valimata ja nendega seotud paan peidetakse. Naaseb helistaja juurde enne vahekaardipaani tegelikku näitamist (st enne shown.bs.tabsündmuse toimumist).

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

  tab.show()

dispose

Hävitab elemendi vahekaardi.

getInstance

Staatiline meetod, mis võimaldab teil saada vahekaardi eksemplari, mis on seotud DOM-i elemendiga

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

getOrCreateInstance

Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seostatud vahekaardi eksemplari või luua uue juhul, kui seda ei lähtestatud

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

Events

Uue vahelehe kuvamisel käivituvad sündmused järgmises järjekorras.

hide.bs.tab(praegusel aktiivsel vahekaardil)
show.bs.tab(näitataval vahekaardil)
hidden.bs.tab(eelmisel aktiivsel vahekaardil sama, mis hide.bs.tabsündmuse puhul)
shown.bs.tab(äsja aktiivsel just kuvatud vahekaardil sama, mis show.bs.tabsündmuse puhul)

Kui ükski vahekaart ei olnud juba aktiivne, siis sündmusi hide.bs.tabja hidden.bs.tabei käivitata.

Sündmuse tüüp	Kirjeldus
`show.bs.tab`	See sündmus käivitub vahekaardi kuvamisel, kuid enne uue vahekaardi kuvamist. Kasutage `event.target`ja `event.relatedTarget`, et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval).
`shown.bs.tab`	See sündmus käivitub vahekaardi kuvamisel pärast vahekaardi kuvamist. Kasutage `event.target`ja `event.relatedTarget`, et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval).
`hide.bs.tab`	See sündmus käivitub, kui kuvatakse uus vahekaart (ja seega eelmine aktiivne vahekaart peidetakse). Kasutage `event.target`ja `event.relatedTarget`, et sihtida vastavalt praegust aktiivset vahekaarti ja uut peagi aktiivset vahekaarti.
`hidden.bs.tab`	See sündmus käivitub pärast uue vahekaardi kuvamist (ja seega on eelmine aktiivne vahekaart peidetud). Kasutage `event.target`ja `event.relatedTarget`, et sihtida vastavalt eelmist aktiivset vahekaarti ja uut aktiivset vahekaarti.

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