Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
in English

Navs en ljeppers

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

Op dizze side

Basis nav

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

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

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

Om de aktive steat oer te bringen oan assistinte technologyen, brûk it aria-currentattribút - mei de pagewearde foar aktuele side, of truefoar it aktuele item yn in set.

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>

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

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>

Beskikbere stilen

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

Horizontale ôfstimming

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

Sintrearre mei .justify-content-center:

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>

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

Fertikaal

Stapel jo navigaasje troch de rjochting fan it flex-item te feroarjen mei it .flex-columnhulpprogramma. Moatte se op guon viewports stapelje, mar net op oaren? Brûk de responsive ferzjes (bgl. .flex-sm-column).

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>

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

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>

Ljepkes

Nimt de basisnavigaasje fan boppen en foeget de .nav-tabsklasse ta om in ljepperynterface te generearjen. Brûk se om tabbere regio's te meitsjen mei ús ljepblêd JavaScript-plugin .

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>

Pillen

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

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>

Folje en rjochtfeardigje

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

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>

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

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>

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

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>

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

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>

Wurkje mei flex nutsbedriuwen

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

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>

Oangeande berikberens

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

Tink derom dat navigaasjebalken, sels as fisueel styleare as ljeppers mei de .nav-tabsklasse, gjinrole="tablist" , role="tab"of role="tabpanel"attributen moatte wurde jûn . Dizze binne allinich geskikt foar dynamyske ljepblêden ynterfaces, lykas beskreaun yn it ljepblêdpatroan fan ARIA Authoring Practices Guide . Sjoch JavaScript gedrach foar dynamyske ljepper ynterfaces yn dizze seksje foar in foarbyld. It aria-currentattribút is net nedich op dynamyske ljepperynterfaces, om't ús JavaScript de selekteare steat behannelet troch ta te foegjen aria-selected="true"op 'e aktive ljepper.

Mei help fan dropdowns

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

Ljeppers mei dropdowns

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>

Pillen mei dropdowns

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

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende oanpak fan CSS-fariabelen, brûke navs no lokale CSS-fariabelen op .nav, .nav-tabs, en .nav-pillsfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

Op de .navbasisklasse:

  --#{$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};

Op de .nav-tabsmodifier klasse:

  --#{$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};

Op de .nav-pillsmodifier klasse:

  --#{$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};

Sass fariabelen

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

JavaScript gedrach

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

Dit is wat plakhâlder-ynhâld fan de byhearrende ynhâld fan it ljepblêd Thús . Troch op in oare ljepper te klikken sil de sichtberens fan dizze foar de folgjende wikselje. It ljepblêd JavaScript wikselt klassen om de sichtberens en styling fan ynhâld te kontrolearjen. Jo kinne it brûke mei ljeppers, pillen, en elke oare .nav-oandreaune navigaasje.

Dit is wat plakhâlder-ynhâld de byhearrende ynhâld fan it ljepblêd Profile . Troch op in oare ljepper te klikken sil de sichtberens fan dizze foar de folgjende wikselje. It ljepblêd JavaScript wikselt klassen om de sichtberens en styling fan ynhâld te kontrolearjen. Jo kinne it brûke mei ljeppers, pillen, en elke oare .nav-oandreaune navigaasje.

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>

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

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

De ljeppers plugin wurket ek mei pillen.

Dit is wat plakhâlder-ynhâld fan de byhearrende ynhâld fan it ljepblêd Thús . Troch op in oare ljepper te klikken sil de sichtberens fan dizze foar de folgjende wikselje. It ljepblêd JavaScript wikselt klassen om de sichtberens en styling fan ynhâld te kontrolearjen. Jo kinne it brûke mei ljeppers, pillen, en elke oare .nav-oandreaune navigaasje.

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

En mei fertikale pillen. Ideaal, foar fertikale ljeppers, moatte jo ek tafoegje aria-orientation="vertical"oan de kontener fan 'e ljepperlist.

Dit is wat plakhâlder-ynhâld fan de byhearrende ynhâld fan it ljepblêd Thús . Troch op in oare ljepper te klikken sil de sichtberens fan dizze foar de folgjende wikselje. It ljepblêd JavaScript wikselt klassen om de sichtberens en styling fan ynhâld te kontrolearjen. Jo kinne it brûke mei ljeppers, pillen, en elke oare .nav-oandreaune navigaasje.

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

Tagonklikheid

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

Yn oerienstimming mei it patroan fan ARIA Authoring Practices, krijt allinich de op it stuit aktive ljepper toetseboerdfokus. As it JavaScript-plugin is inisjalisearre, sil it ynsteld wurde tabindex="-1"op alle ynaktive ljepperkontrôles. Sadree't de op it stuit aktive ljepper fokus hat, aktivearje de rinnerke toetsen de foarige / folgjende ljepper, mei de plugin dy't de rovingtabindex dêrmei feroaret. Tink derom dat de JavaScript-plugin gjin ûnderskied makket tusken horizontale en fertikale ljepperlisten as it giet om ynteraksjes mei rinnerkekaaien: nettsjinsteande de oriïntaasje fan 'e ljepperlist gean sawol de rinnerke omheech as lofts nei de foarige ljepper, en rinnerke del en rjochts nei de folgjende ljepper.

Yn 't algemien, om toetseboerdnavigaasje te fasilitearjen, is it oan te rieden om de ljeppanielen sels ek fokusber te meitsjen, útsein as it earste elemint mei sinfolle ynhâld yn it ljepblêdpaniel al fokusber is. De JavaScript-plugin besiket dit aspekt net te behanneljen - wêr passend moatte jo jo ljepblêdpanielen eksplisyt fokusber meitsje troch tabindex="0"jo markearring ta te foegjen.
De ljepper JavaScript-plugin stipet gjin ljepblêd-ynterfaces dy't dropdown-menu's befetsje, om't dizze problemen mei brûkberens en tagonklikens feroarsaakje. Fanút in brûkberensperspektyf kin it feit dat it trigger-elemint fan it op it stuit werjûn ljepblêd net direkt sichtber is (sa't it yn it sletten útklapmenu is) betizing feroarsaakje. Fanút it eachpunt fan tagonklikens is d'r op it stuit gjin ferstannige manier om dit soarte konstruksje yn kaart te bringen nei in standert WAI ARIA-patroan, wat betsjuttet dat it net maklik begryplik makke wurde kin foar brûkers fan assistinte technologyen.

Gebrûk fan gegevensattributen

Jo kinne in ljepper of pilnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan oan te jaan data-bs-toggle="tab"of data-bs-toggle="pill"op in elemint. Brûk dizze gegevensattributen op .nav-tabsof .nav-pills.

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

Fia JavaScript

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

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

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

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

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 effekt

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

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" 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>

Metoaden

Asynchrone metoaden en transysjes

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

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

Aktivearret jo ynhâld as in ljepper elemint.

Jo kinne in ljeppereksimplaar oanmeitsje mei de konstruktor, bygelyks:

const bsTab = new bootstrap.Tab('#myTab')
Metoade Beskriuwing
dispose Fernielet in ljepper fan in elemint.
getInstance Statyske metoade wêrmei jo de ljeppereksimplaar kinne krije ferbûn mei in DOM-elemint, jo kinne it sa brûke: bootstrap.Tab.getInstance(element).
getOrCreateInstance Statyske metoade dy't in ljeppereksimplaar werombringt dy't assosjeare is mei in DOM-elemint of in nij oanmeitsje yn gefal it net inisjalisearre is. Jo kinne it sa brûke: bootstrap.Tab.getOrCreateInstance(element).
show Selekteart de opjûne ljepper en lit it byhearrende paniel sjen. Elke oare ljepper dy't earder selektearre is wurdt net selektearre en it byhearrende paniel is ferburgen. Keart werom nei de beller foardat it ljepblêd wirklik werjûn is (dus foardat it shown.bs.tabbarren bart).

Eveneminten

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

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

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

Event type Beskriuwing
hide.bs.tab Dit barren ûntspringt as in nije ljepper werjûn wurde moat (en dus moat de foarige aktive ljepper ferburgen wurde). Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper te rjochtsjen en de nije ljepper dy't gau aktyf is.
hidden.bs.tab Dit barren ûntspringt neidat in nije ljepper wurdt werjûn (en dus is de foarige aktive ljepper ferburgen). Brûk event.targeten event.relatedTargetom respektivelik de foarige aktive ljepper en de nije aktive ljepper te rjochtsjen.
show.bs.tab Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
shown.bs.tab Dit evenemint ûntspringt op ljepper sjen nei in ljepper is werjûn. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen. 
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
})