Navs en ljeppers

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

Op dizze side

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

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

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.

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

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:

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

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

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

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

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

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

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 .

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

Pillen

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

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

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.

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

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

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

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.

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

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

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

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.

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

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 ljepperynterfaces, lykas beskreaun yn 'e WAI ARIA Authoring Practices . 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

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

Pillen mei dropdowns

<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

Fariabelen

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

Dynamyske ljepblêden ynterfaces, lykas beskreaun yn 'e WAI ARIA Authoring Practices , fereaskje role="tablist", role="tab", role="tabpanel", en ekstra aria-attributen om har struktuer, funksjonaliteit en aktuele steat 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.

Tink derom dat dynamyske ljepblêden ynterfaces gjin útklapmenu's moatte befetsje , om't dit problemen mei brûkberens en tagonklikens feroarsaket. 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.

Dit is wat plakhâlder-ynhâld de assosjearre 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.

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

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

De ljeppers plugin wurket ek mei pillen.

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

En mei fertikale pillen.

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>

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

Fia JavaScript

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

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

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

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

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 .

constructor

Aktivearret in ljepper elemint en ynhâld container. De ljepper moat in data-bs-targetof, as jo in keppeling brûke, in hrefattribút hawwe, rjochte op in kontenerknooppunt yn 'e 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>

sjen litte

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

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

  tab.show()

disponearje

Fernielet in ljepper fan in elemint.

getInstance

Statyske metoade wêrmei jo de ljeppereksimplaar kinne krije ferbûn mei in DOM-elemint

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

getOrCreateInstance

Statyske metoade wêrmei jo de ljeppereksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net inisjalisearre is

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

Eveneminten

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

hide.bs.tab(op it aktive ljepblêd)
show.bs.tab(op it te sjen ljepblêd)
hidden.bs.tab(op 'e foarige aktive ljepper, deselde as foar it hide.bs.tabevenemint)
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
`show.bs.tab`	Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk `event.target`en `event.relatedTarget`om 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.target`en `event.relatedTarget`om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
`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.target`en `event.relatedTarget`om 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.target`en `event.relatedTarget`om respektivelik de foarige aktive ljepper en de nije aktive ljepper te rjochtsjen.

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