Spring til hovedindhold Spring til dokumentnavigation
Check
in English

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.

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>

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.

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>

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:

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>

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

Lodret

Stable din navigation ved at ændre retningen på 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).

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>

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

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>

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 .

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>

Piller

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

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>

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.

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>

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

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.

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>

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

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>

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.

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>

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 fanegrænseflader, som beskrevet i ARIA Authoring Practices Guide-fanemønsteret . 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

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>

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

Variabler

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger navs nu lokale CSS-variabler på .nav, .nav-tabs, og .nav-pillstil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

På .navbasisklassen:

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

På .nav-tabsmodifikatorklassen:

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

På .nav-pillsmodifikatorklassen:

  --#{$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 variable

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

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.

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>

For at hjælpe med at passe til dine behov fungerer dette med <ul>-baseret opmærkning, som vist ovenfor, eller med enhver 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 ville tilsidesætte elementets oprindelige rolle som navigationsvartegn. Skift i stedet til et alternativt element (i eksemplet nedenfor, et simpelt <div>) og vik det <nav>rundt.

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

Tabs-plugin'et virker også med piller.

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.

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>

Og med lodrette piller. Ideelt set bør du for lodrette faner også føje aria-orientation="vertical"til fanelistecontaineren.

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.

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>

Tilgængelighed

Dynamiske fanegrænseflader, som beskrevet i ARIA Authoring Practices Guide-fanemønsteret , 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.

I overensstemmelse med ARIA Authoring Practices-mønsteret er det kun den aktuelt aktive fane, der modtager tastaturfokus. Når JavaScript-pluginnet er initialiseret, vil det indstilles tabindex="-1"på alle inaktive fanekontroller. Når den aktuelt aktive fane har fokus, aktiverer markørtasterne den forrige/næste fane, hvor plugin'et ændrer rovingtabindex i overensstemmelse hermed. Bemærk dog, at JavaScript-pluginnet ikke skelner mellem vandrette og lodrette fanelister, når det kommer til markørtastinteraktioner: uanset fanelistens orientering går både op- og venstremarkøren til den forrige fane, og markøren ned og højre går til næste faneblad.

For at lette tastaturnavigation anbefales det generelt at gøre selve fanepanelerne fokusbare, medmindre det første element, der indeholder meningsfuldt indhold inde i fanepanelet, allerede kan fokuseres. JavaScript-plugin'et forsøger ikke at håndtere dette aspekt - hvor det er relevant, skal du udtrykkeligt gøre dine fanepaneler fokusbare ved at tilføje tabindex="0"dine markeringer.
Fanebladet JavaScript-plugin understøtter ikke fanebladsgrænseflader, der indeholder dropdown-menuer, da disse 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.

Brug af dataattributter

Du kan aktivere en fane- eller pillenavigation uden at skrive 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" 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>

Via JavaScript

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

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

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

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

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

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

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 .

Aktiverer dit indhold som et faneelement.

Du kan oprette en faneforekomst med konstruktøren, for eksempel:

const bsTab = new bootstrap.Tab('#myTab')
Metode Beskrivelse
dispose Ødelægger et elements fane.
getInstance Statisk metode, som giver dig mulighed for at få fane-forekomsten tilknyttet et DOM-element, du kan bruge det sådan her: bootstrap.Tab.getInstance(element).
getOrCreateInstance Statisk metode, som returnerer en tabulatorforekomst, der er knyttet til et DOM-element, eller opretter et nyt, hvis det ikke blev initialiseret. Du kan bruge det sådan her: bootstrap.Tab.getOrCreateInstance(element).
show 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).

Begivenheder

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

  1. hide.bs.tab(på den aktuelle aktive fane)
  2. show.bs.tab(på fanen der skal vises)
  3. hidden.bs.tab(på den forrige aktive fane, den samme som for hide.bs.tabbegivenheden)
  4. 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
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.targetog event.relatedTargettil 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.targetog event.relatedTargettil at målrette henholdsvis den forrige aktive fane og den nye aktive fane.
show.bs.tab Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug event.targetog event.relatedTargettil 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.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig). 
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
})