Navs og faner

Dokumentation og eksempler på, hvordan du bruger Bootstraps medfølgende navigationskomponenter.

På denne side

Base nav

Navigation tilgængelig i Bootstrap deler generel markering og stilarter, fra basisklassen .navtil de aktive og deaktiverede tilstande. Skift modifikatorklasser for at skifte mellem hver stil.

Basiskomponenten .naver bygget med flexbox og giver et stærkt fundament til at bygge alle typer navigationskomponenter. Det inkluderer nogle stiltilsidesættelser (til at arbejde med lister), noget linkpolstring til større hitområder og grundlæggende deaktiveret styling.

Basiskomponenten .navinkluderer ikke nogen .activetilstand. Følgende eksempler inkluderer klassen, primært for at demonstrere, at denne særlige klasse ikke udløser nogen speciel styling.

For at formidle den aktive tilstand til hjælpeteknologier skal du bruge aria-currentattributten — ved at bruge pageværdien for den aktuelle side eller truefor det aktuelle element i et sæt.

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

Klasser bruges hele vejen igennem, så din opmærkning kan være super fleksibel. Brug <ul>s som ovenfor, <ol>hvis rækkefølgen af dine varer er vigtig, eller rul dine egne med et <nav>element. Fordi de .navbruger display: flex, opfører nav-linkene det samme, som nav-elementer ville, men uden den 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>

Tilgængelige stilarter

Skift stilen på .navs-komponenten med modifikatorer og hjælpeprogrammer. Mix og match efter behov, eller byg din egen.

Horisontal justering

Skift den vandrette justering af din nav med flexbox-værktøjer . Som standard er navs venstrejusteret, men du kan nemt ændre dem til center- eller højrejusteret.

Centreret med .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Højrejusteret med .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>

Lodret

Stable din navigation ved at ændre retningen for flex-elementet med .flex-columnværktøjet. Skal du stable dem på nogle visningsporte, men ikke andre? Brug de responsive versioner (f.eks. .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>

Som altid er lodret navigation også mulig uden <ul>s.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Faner

Tager den grundlæggende nav ovenfra og tilføjer .nav-tabsklassen for at generere en fanebaseret grænseflade. Brug dem til at oprette tabuleringsområder med vores fane 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>

Piller

Tag den samme HTML, men brug .nav-pillsi stedet:

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

Udfyld og begrund

Tving dit .navindhold til at udvide den fulde tilgængelige bredde en af to modifikationsklasser. For proportionelt at fylde al tilgængelig plads med dine .nav-items, brug .nav-fill. Bemærk, at al vandret plads er optaget, men ikke alle nav-elementer har samme bredde.

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

Når du bruger en <nav>-baseret navigation, kan du roligt udelade .nav-item, da det kun .nav-linker nødvendigt for stylingelementer <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>

For lige brede elementer, brug .nav-justified. Al vandret plads vil blive optaget af nav-links, men i modsætning til .nav-fillovenstående vil hvert nav-element have samme bredde.

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

Svarende til .nav-filleksemplet med en <nav>-baseret navigation.

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

Arbejder med flexværktøjer

Hvis du har brug for responsive nav-variationer, kan du overveje at bruge en række flexbox-værktøjer . Selvom de er mere omfattende, tilbyder disse værktøjer større tilpasning på tværs af responsive brudpunkter. I eksemplet nedenfor vil vores nav blive stablet på det laveste brudpunkt, og derefter tilpasse sig til et vandret layout, der udfylder den tilgængelige bredde fra det lille brudpunkt.

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

Angående tilgængelighed

Hvis du bruger navs til at levere en navigationslinje, skal du sørge for at tilføje en role="navigation"til den mest logiske overordnede container for <ul>, eller omslutte et <nav>element omkring hele navigationen. Tilføj ikke rollen til sig <ul>selv, da dette ville forhindre den i at blive annonceret som en faktisk liste af hjælpeteknologier.

Bemærk, at navigationsbjælker, selvom de er visuelt stilet som faner med .nav-tabsklassen, ikke skal gives role="tablist", role="tab"eller role="tabpanel"attributter. Disse er kun egnede til dynamiske faneblade, som beskrevet i WAI ARIA Authoring Practices . Se JavaScript-adfærd for dynamiske fanegrænseflader i dette afsnit for et eksempel. Attributten aria-currenter ikke nødvendig på dynamiske fanegrænseflader, da vores JavaScript håndterer den valgte tilstand ved at tilføje aria-selected="true"på den aktive fane.

Brug af dropdowns

Tilføj dropdown menuer med lidt ekstra HTML og dropdowns JavaScript plugin .

Faner med rullemenuer

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

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

Variabler

$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 adfærd

Brug fanen JavaScript-plugin - inkluder det individuelt eller gennem den kompilerede bootstrap.jsfil - til at udvide vores navigationsfaner og piller til at skabe faneblade med lokalt indhold.

Dynamiske grænseflader med faner, som beskrevet i WAI ARIA Authoring Practices , kræver role="tablist", role="tab", role="tabpanel", og yderligere aria-attributter for at formidle deres struktur, funktionalitet og aktuelle tilstand til brugere af hjælpeteknologier (såsom skærmlæsere). Som en bedste praksis anbefaler vi at bruge <button>elementer til fanerne, da disse er kontroller, der udløser en dynamisk ændring, snarere end links, der navigerer til en ny side eller placering.

Bemærk, at dynamiske faneflader ikke bør indeholde dropdown-menuer, da dette forårsager både brugervenlighed og tilgængelighedsproblemer. Fra et brugervenligt perspektiv kan det faktum, at den aktuelt viste fanes triggerelement ikke er umiddelbart synligt (da det er inde i den lukkede rullemenu), forårsage forvirring. Fra et tilgængelighedssynspunkt er der i øjeblikket ingen fornuftig måde at kortlægge denne form for konstruktion til et standard WAI ARIA-mønster, hvilket betyder, at det ikke let kan gøres forståeligt for brugere af hjælpeteknologier.

Dette er noget pladsholderindhold på fanen Hjems tilknyttede indhold. Hvis du klikker på en anden fane, skifter synligheden af denne til den næste. Fanen JavaScript bytter klasser for at kontrollere indholdets synlighed og stil. Du kan bruge den sammen med faner, piller og enhver anden .navnavigation.

Dette er noget pladsholderindhold på profilfanens tilknyttede indhold. Hvis du klikker på en anden fane, skifter synligheden af denne til den næste. Fanen JavaScript bytter klasser for at kontrollere indholdets synlighed og stil. Du kan bruge den sammen med faner, piller og enhver anden .navnavigation.

Dette er noget pladsholderindhold på fanen Kontakts tilknyttede indhold. Hvis du klikker på en anden fane, skifter synligheden af denne til den næste. Fanen JavaScript bytter klasser for at kontrollere indholdets synlighed og stil. Du kan bruge det sammen med faner, piller og enhver anden .navnavigation.

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

For at hjælpe med at passe til dine behov fungerer dette med <ul>-baseret opmærkning, som vist ovenfor, eller med en hvilken som helst vilkårlig "rulle din egen" opmærkning. Bemærk, at hvis du bruger <nav>, bør du ikke tilføje role="tablist"direkte til det, da dette vil tilsidesætte elementets oprindelige rolle som navigationsvartegn. Skift i stedet til et alternativt element (i eksemplet nedenfor, et simpelt <div>) og vikl <nav>om det.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Tabs-plugin'et virker også med piller.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Og med lodrette piller.

Dette er noget pladsholderindhold, det tilknyttede indhold på fanen Beskeder. Hvis du klikker på en anden fane, skifter synligheden af denne til den næste. Fanen JavaScript bytter klasser for at kontrollere indholdets synlighed og stil. Du kan bruge det sammen med faner, piller og enhver anden .navnavigation.

Dette er noget pladsholderindhold, det tilknyttede indhold på fanen Indstillinger. Hvis du klikker på en anden fane, skifter synligheden af denne til den næste. Fanen JavaScript bytter klasser for at kontrollere indholdets synlighed og stil. Du kan bruge det sammen med faner, piller og enhver anden .navnavigation.

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

Brug af dataattributter

Du kan aktivere en fane- eller pillenavigation uden at skrive noget JavaScript ved blot at angive data-bs-toggle="tab"eller data-bs-toggle="pill"på et element. Brug disse dataattributter på .nav-tabseller .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>

Via JavaScript

Aktiver faner, der kan tabuleres via JavaScript (hver fane skal aktiveres individuelt):

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

Du kan aktivere individuelle faner på flere måder:

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

For at få faner til at falme ind, skal du tilføje .fadetil hver .tab-pane. Den første fanerude skal også .showgøre det oprindelige indhold synligt.

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

Metoder

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information .

constructor

Aktiverer et faneelement og indholdsbeholder. Tab skal have enten en data-bs-targeteller, hvis du bruger et link, en hrefattribut, der er målrettet mod en containernode i 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>

at vise

Vælger den givne fane og viser dens tilhørende rude. Enhver anden fane, der tidligere er valgt, bliver fravalgt, og dens tilknyttede rude er skjult. Vender tilbage til den, der ringer, før faneruden faktisk er blevet vist (dvs. før shown.bs.tabhændelsen indtræffer).

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

  tab.show()

bortskaffe

Ødelægger et elements fane.

getInstance

Statisk metode, som giver dig mulighed for at få fane-forekomsten tilknyttet et DOM-element

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

getOrCreateInstance

Statisk metode, som giver dig mulighed for at få faneforekomsten tilknyttet et DOM-element eller oprette en ny, hvis den ikke blev initialiseret

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

Begivenheder

Når du viser en ny fane, udløses begivenhederne i følgende rækkefølge:

hide.bs.tab(på den aktuelle aktive fane)
show.bs.tab(på fanen der skal vises)
hidden.bs.tab(på den forrige aktive fane, den samme som for hide.bs.tabbegivenheden)
shown.bs.tab(på det nyligt aktive faneblad, det samme som for show.bs.tabbegivenheden)

Hvis ingen fane allerede var aktiv, vil begivenhederne hide.bs.tabog hidden.bs.tabikke blive udløst.

Begivenhedstype	Beskrivelse
`show.bs.tab`	Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug `event.target`og `event.relatedTarget`til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
`shown.bs.tab`	Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug `event.target`og `event.relatedTarget`til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
`hide.bs.tab`	Denne hændelse udløses, når en ny fane skal vises (og dermed skal den tidligere aktive fane skjules). Brug `event.target`og `event.relatedTarget`til at målrette henholdsvis den aktuelle aktive fane og den nye snart-aktive fane.
`hidden.bs.tab`	Denne hændelse udløses, efter at en ny fane er vist (og dermed er den tidligere aktive fane skjult). Brug `event.target`og `event.relatedTarget`til at målrette henholdsvis den forrige aktive fane og den nye aktive fane.

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