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.

html

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

Paremale joondatud .justify-content-end:

html

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

Tabletid

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

html

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

html

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

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

html

<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">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 ARIA Authoring Practices Guide vahekaartide mustris . 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

html

<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">Disabled</a>
  </li>
</ul>

Rippmenüüdega pillid

html

<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">Disabled</a>
  </li>
</ul>

CSS

Muutujad

Lisatud versioonisse v5.2.0

Osana Bootstrapi arenevast CSS-muutujate lähenemisviisist kasutavad navigaatorid nüüd kohalikke CSS-i muutujaid saidil .nav, .nav-tabsja .nav-pillstäiustatud reaalajas kohandamiseks. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

Põhiklassis .nav:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Modifikaatoriklassis .nav-tabs:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Modifikaatoriklassis .nav-pills:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sassi muutujad

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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.

This is some placeholder content the Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Vahelehtede pistikprogramm töötab ka pillidega.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Ja vertikaalsete pillidega. Ideaalis peaksite vertikaalsete vahekaartide puhul lisama aria-orientation="vertical"ka vahelehtede loendi konteinerisse.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Juurdepääsetavus

Dünaamilised vahelehtedega liidesed, nagu on kirjeldatud ARIA loomise tavade juhendi vahekaartide mustris , 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.

Kooskõlas ARIA autoristamistavade mustriga saab klaviatuuri fookuse ainult hetkel aktiivne vahekaart. Kui JavaScripti pistikprogramm on lähtestatud, määratakse tabindex="-1"see kõikidele passiivsete vahekaartide juhtelementidele. Kui hetkel aktiivne vahekaart on fookuses, aktiveerivad kursoriklahvid eelmise/järgmise vahekaardi, kusjuures pistikprogramm muudab vastavalt tiirlemisttabindex . Kuid pange tähele, et JavaScripti pistikprogramm ei tee kursoriklahvide interaktsioonide puhul vahet horisontaalsetel ja vertikaalsetel vahekaartide loenditel: olenemata vahekaartide loendi orientatsioonist liiguvad nii üles- kui ka vasakkursor eelmisele vahelehele ning alla- ja paremkursor järgmine vahekaart.

Üldiselt on klaviatuuriga navigeerimise hõlbustamiseks soovitatav muuta ka vahekaartide paneelid ise fokuseeritavaks, välja arvatud juhul, kui esimene element, mis sisaldab vahekaartide paneelil sisulist sisu, on juba teravustatav. JavaScripti pistikprogramm ei püüa seda aspekti käsitleda – kui see on asjakohane, peate oma vahelehtede paneelid selgesõnaliselt fokuseeritavaks muutma, lisades tabindex="0"oma märgistuse.

Vahekaardi JavaScripti pistikprogramm ei toeta vahekaartidega liideseid, mis sisaldavad rippmenüüd, kuna need põhjustavad 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.

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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

JavaScripti kaudu

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

Üksikuid vahekaarte saate aktiveerida mitmel viisil.

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 .

Aktiveerib teie sisu vahekaardi elemendina.

Konstruktoriga saate luua vahekaardi eksemplari, näiteks:

const bsTab = new bootstrap.Tab('#myTab')

meetod	Kirjeldus
`dispose`	Hävitab elemendi vahekaardi.
`getInstance`	Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seostatud vahekaardi eksemplari, saate seda kasutada järgmiselt: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Staatiline meetod, mis tagastab DOM-i elemendiga seotud vahekaardi eksemplari või loob uue, kui seda ei lähtestatud. Saate seda kasutada järgmiselt: `bootstrap.Tab.getOrCreateInstance(element)`.
`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.tab`sündmuse toimumist).

Sündmused

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

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