Navs ma tabs

Fa'amaumauga ma fa'ata'ita'iga mo le fa'aogaina o vaega ole fa'atautaiga a Bootstrap.

I luga o lenei itulau

Nav faavae

Fa'asagaga o lo'o maua i Bootstrap fa'asoa fa'ailoga lautele ma sitaili, mai le .navvasega fa'avae i setete malosi ma le le atoatoa. Fa'afesuia'i vasega sui e fesuia'i i le va o sitaili ta'itasi.

O le .navvaega autu e fausia i le flexbox ma maua ai se faavae malosi mo le fausiaina o ituaiga uma o vaega o le folauga. E aofia ai nisi sitaili fa'asili (mo le galue ma lisi), nisi fa'apipi'i feso'ota'iga mo vaega lapo'a lapo'a, ma sitaili fa'aletonu masani.

O le .navvaega faavae e le aofia ai soʻo se .activesetete. O fa'ata'ita'iga o lo'o mulimuli mai e aofia ai le vasega, aemaise lava e fa'aalia ai o lenei vasega fa'apitoa e le fa'aosoina so'o se sitaili fa'apitoa.

Ina ia faʻaalia le tulaga galue i tekinolosi fesoasoani, faʻaaoga le aria-currentuiga - faʻaaoga le pagetau mo le itulau o loʻo i ai nei, poʻo truele mea o loʻo i ai nei i se seti.

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>

O vasega e fa'aoga i le taimi atoa, ina ia mafai ona matua fetuutuunai lau fa'ailoga. Fa'aoga <ul>s pei o luga, <ol>pe a taua le fa'atonuga o au mea, pe ta'avale oe lava ma se <nav>elemene. Ona o le .navfa'aoga display: flex, o feso'ota'iga nav e amio tutusa ma mea nav, ae aunoa ma le fa'ailoga fa'aopoopo.

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>

Sitaili avanoa

Suia le sitaili o .navle s vaega i suiga ma mea aoga. Faʻafefiloi ma faʻafetaui pe a manaʻomia, pe fau sau oe lava.

Fa'asagaga fa'asaga

Suia le laina faalava o lau nav ma flexbox utilities . E le mafai, o navs e fa'aoga agavale, ae faigofie ona e suia i le ogatotonu po'o le taumatau.

Fa'atotonugalemu ma .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>

Fa'aoga taumatau ma .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>

Tusa'o

Fa'aputu lau fa'atautaiga e ala i le suia o le fa'atonuga o mea fa'apipi'i ma le .flex-columnaoga. Mana'omia le fa'aputuina i luga o nisi va'aiga ae le o isi? Fa'aaogā fa'aliliuga tali (fa'ata'ita'iga, .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>

E pei lava o taimi uma, e mafai ona fa'atauva'a tūsa'o e aunoa ma <ul>le s, fo'i.

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>

Tabs

Ave le nav faavae mai luga ma faʻaopoopo le .nav-tabsvasega e faʻatupuina se faʻaoga faʻapipiʻi. Fa'aoga latou e fai ai vaega tabbable ma la matou tab 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>

Pills

Ave lena lava HTML, ae faʻaaoga .nav-pillsnai lo:

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>

Faatumu ma tauamiotonuina

Fa'amalosi au .navmea e fa'alautele le lautele o avanoa se tasi o vasega fa'aleleia e lua. Ina ia fa'atumu uma avanoa avanoa i lau .nav-items, fa'aoga .nav-fill. Matauina o avanoa uma faalava o lo'o nofoia, ae le o mea uma nav e tutusa le lautele.

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>

A fa'aogaina se <nav>fa'ata'ita'iga fa'avae, e mafai ona e fa'ate'aina ma le saogalemu .nav-itempe a na'o .nav-linkmea e mana'omia mo le fa'avasegaina <a>o elemene.

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>

Mo elemene tutusa-lautele, faʻaaoga .nav-justified. O avanoa fa'ata'atia uma o le a nofoia e feso'ota'iga nav, ae le pei o .nav-fillluga, o mea uma nav o le a tutusa le lautele.

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>

E tutusa ma le .nav-fillfaʻataʻitaʻiga e faʻaaoga ai se <nav>faʻataʻitaʻiga faʻavae.

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>

Galulue fa'atasi ma mea fa'aoga felefele

Afai e te mana'omia ni suiga o le nav tali, mafaufau e fa'aaoga se faasologa o flexbox utilities . E ui ina sili atu le tautala, o nei mea aoga e ofoina atu le faʻavasegaina sili atu i le tali atu. I le faʻataʻitaʻiga o loʻo i lalo, o le a faʻapipiʻi la matou nav i luga o le pito pito i lalo, ona faʻafetaui lea i se faʻasologa faʻalava e faʻatumu ai le lautele avanoa e amata mai i le vaʻa laʻititi.

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>

E tusa ai ma le avanoa

Afai o lo'o e fa'aogaina navs e tu'uina atu ai se pa fa'atauta'iga, ia mautinoa e fa'aopoopo se role="navigation"i le koneteina matua sili ona talafeagai o le <ul>, po'o le afifiina o se <nav>elemene i le ta'avale atoa. Aua le fa'aopoopoina le matafaioi ia <ul>te ia lava, aua o le a taofia ai mai le fa'asalalauina o se lisi moni e ala i tekinolosi fesoasoani.

Manatua o faʻamau faʻatau, e tusa lava pe faʻailoga vaʻaia e pei o faʻamau i le .nav-tabsvasega, e le tatau ona tuʻuina atu role="tablist", role="tab"poʻo role="tabpanel"uiga. E na'o mea ia e talafeagai mo feso'ota'iga fa'apipi'i malolosi, e pei ona fa'amatalaina i le ARIA Authoring Practices Guide tabs pattern . Va'ai le amio a le JavaScript mo feso'ota'iga fa'apipi'i malolosi i lenei vaega mo se fa'ata'ita'iga. O le aria-currentuiga e le mana'omia i luga o feso'ota'iga fa'apipi'i malosi talu ai e fa'atautaia e le matou JavaScript le setete filifilia e ala i le fa'aopoopoina aria-selected="true"i luga o le fa'agaioiga fa'agaoioiga.

Fa'aaogā fa'alalolalo

Fa'aopoopo i lalo menus fa'atasi ai ma sina HTML fa'aopoopo ma le fa'amaufa'ailoga JavaScript plugin .

Fa'amau i lalo

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>

Pills ma pa'u i lalo

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

Fuafuaga

Fa'aopoopo i le v5.2.0

I le avea ai o se vaega o le fa'aleleia o suiga CSS a Bootstrap, o lo'o fa'aogaina nei e navs suiga CSS fa'apitonu'u i luga ole .nav, .nav-tabs, ma .nav-pillsmo le fa'aleleia atili o le taimi moni. O tau mo le CSS fesuiaiga e faʻatulagaina e ala i le Sass, o lea o loʻo lagolagoina pea le Sass customization.

I luga o le .navvasega faavae:

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

I luga o le .nav-tabsvasega modifier:

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

I luga o le .nav-pillsvasega modifier:

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

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

Amioga JavaScript

Fa'aoga le fa'aupuga JavaScript plugin-fa'aofia ai ta'ito'atasi pe ala i le bootstrap.jsfaila tu'ufa'atasia-e fa'alautele ai a tatou fa'ailoga fa'ata'ita'iga ma pills e fa'atupu ai fa'amau fa'apipi'i o mea fa'apitonu'u.

O nisi nei o mea o lo'o tu'u iai le mea e feso'ota'i ai le itulau a le Home . O le kilikiina o se isi laupepa o le a sui ai le vaʻaia o lenei tasi mo le isi. E fesuia'i e le tab JavaScript vasega e fa'atonutonu ai le va'aiga ma le fa'avasegaina o mea. E mafai ona e fa'aogaina i tabs, pills, ma so'o se isi lava .navfa'atonuga fa'amalosi.

O nisi nei o mea o lo'o iai le mea e tu'u ai le fa'asinomaga o mea e feso'otai i ai le Fa'ailoga Fa'amau . O le kilikiina o se isi laupepa o le a sui ai le vaʻaia o lenei tasi mo le isi. E fesuia'i e le tab JavaScript vasega e fa'atonutonu ai le va'aiga ma le fa'avasegaina o mea. E mafai ona e fa'aogaina i tabs, pills, ma so'o se isi lava .navfa'atonuga fa'amalosi.

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>

Ina ia fesoasoani e fetaui ma ou manaʻoga, e aoga lenei <ul>faʻailoga -faʻavae, e pei ona faʻaalia i luga, poʻo soʻo se faʻailoga "taʻavale lau oe" faʻailoga. Manatua afai o loʻo e faʻaaogaina <nav>, e le tatau ona e faʻaopoopo role="tablist"saʻo i ai, aua o le a faʻaumatia ai le matafaioi masani a le elemene o se faʻailoga faʻailoga. Ae, sui i se isi elemene (i le faʻataʻitaʻiga o loʻo i lalo, se faigofie <div>) ma afifi le <nav>faʻataʻamilomilo.

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.

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

O lo'o galue fo'i le fa'apipi'i fa'atasi ma fualaau.

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>

Ma faatasi ai ma fualaau tuusao. O le mea lelei, mo fa'amau tu'usa'o, e tatau fo'i ona e fa'aopoopo aria-orientation="vertical"i le koneteina o lisi lisi.

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>

Avanoa

Feso'ota'iga fa'apipi'i malosi, e pei ona fa'amatalaina i le ARIA Authoring Practices Guide tabs pattern , e mana'omia role="tablist", role="tab", role="tabpanel", ma isi aria-uiga fa'aopoopo ina ia mafai ai ona fa'ailoa atu lo latou fausaga, fa'atinoga, ma le tulaga o lo'o i ai nei i tagata fa'aoga tekinolosi fesoasoani (e pei o le faitau mata). I le avea ai o se faiga sili, matou te fautuaina le faʻaogaina <button>o elemene mo faʻamau, aua o pulega ia e faʻaosofia ai se suiga malosi, nai lo soʻotaga e faʻafeiloaʻi i se itulau fou poʻo se nofoaga.

E tusa ai ma le ARIA Authoring Practices pattern, na'o le lisi o lo'o galue i le taimi nei e maua ai le taulaiga keyboard. A amata le fa'apipi'i JavaScript, o le a tu'u tabindex="-1"i luga o fa'atonuga uma e le toaga. O le taimi lava e taula'i ai le ta'i fa'agaoioi i le taimi nei, e fa'agaoioi e le ki fa'asolo le lisi muamua/so'o, fa'atasi ai ma le fa'apipi'i e sui ai le ta'amilosagatabindex e tusa ai. Ae ui i lea, ia maitauina e le iloa e le JavaScript plugin i le va o lisi faʻalava ma faʻasaga i luga pe a oʻo mai i fesoʻotaʻiga autu: e tusa lava po o le a le faʻatonuga o le lisi o lisi, e alu uma le peʻa i luga ma le agavale i le laupepa muamua, ae alu i lalo ma le taumatau taumatau. le isi laupepa.

I se tulaga lautele, ina ia faafaigofie le fa'aogaina o le keyboard, e fautuaina ina ia mafai ona taula'i fa'apena fo'i fa'amaufa'ailoga, se'i vagana o le elemene muamua o lo'o i ai mea anoa i totonu o le laulau fa'amau ua uma ona taula'i. O le JavaScript plugin e le taumafai e taulimaina lenei vaega-pe a talafeagai ai, e tatau ona e faʻamalamalama manino lau laupepa faʻapipiʻi e ala i le faʻaopopo tabindex="0"i lau faʻailoga.

E le lagolagoina e le fa'apipi'i JavaScript ni feso'ota'iga fa'apipi'i o lo'o i ai fa'asolo i lalo menus, ona o nei mea e mafua ai fa'afitauli fa'aoga ma fa'aoga. Mai se va'aiga fa'aoga, o le mea moni e le o vave fa'aalia le fa'ailoga o lo'o fa'aalia i le taimi nei (ona o lo'o i totonu o le lisi tapuni tapuni) e mafai ona mafua ai le fenumiai. Mai le fa'aogaina o le va'aiga, e le'o iai i le taimi nei se auala talafeagai e fa'afanua ai lenei ituaiga faufale i se fa'ata'ita'iga masani WAI ARIA, o lona uiga e le faigofie ona fa'amalamalamaina e tagata fa'aoga tekinolosi fesoasoani.

Fa'aaogaina uiga fa'amaumauga

E mafai ona e fa'agaoioia se fa'ailoga po'o se pill navigation e aunoa ma le tusiaina o so'o se JavaScript i le na'o le fa'ama'oti data-bs-toggle="tab"po'o data-bs-toggle="pill"luga o se elemene. Fa'aoga nei uiga fa'amaumauga i luga .nav-tabspo'o .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>

E ala i le JavaScript

Fa'aaga tabbable tabs e ala i le JavaScript (ta'itasi ta'itasi e mana'omia ona fa'agaoioia ta'ito'atasi):

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

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

E mafai ona e fa'agaoioia ta'iala ta'itasi i le tele o auala:

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

Aafiaga mou

Ina ia fa'agesegese fa'amau i totonu, fa'aopoopo .fadei .tab-pane. E tatau fo'i .showi le fa'ailoga muamua ona fa'aalia le mea muamua.

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

Metotia

Metotia ma suiga e le tutusa

O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amanaʻiaina se auala e valaʻau ai i se vaega o suiga .

Va'ai la matou pepa JavaScript mo nisi fa'amatalaga .

Fa'aagaoioia lau anotusi e fai ma elemene o le tab.

E mafai ona e fatuina se faʻataʻitaʻiga faʻatasi ma le faufale, mo se faʻataʻitaʻiga:

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

Metotia	Fa'amatalaga
`dispose`	Fa'aleaga le lisi o se elemene.
`getInstance`	Metotia static lea e mafai ai e oe ona maua le faʻataʻitaʻiga o le tab e fesoʻotaʻi ma se elemene DOM, e mafai ona e faʻaogaina e pei o lenei: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Metotia static e toe faʻafoʻi ai se faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM poʻo le fatuina o se mea fou pe a leʻi amataina. E mafai ona e fa'aogaina fa'apenei: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Filifili le fa'ailoga ua tu'uina atu ma fa'aali atu lona fa'ailoga fa'atasi. So'o se isi fa'ailoga sa filifilia muamua e le'i filifilia ma o lona fa'ailoga e natia. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le fa'ailoga (fa'atusa a'o le'i tupu le `shown.bs.tab`mea na tupu).

Mea na tutupu

Pe a fa'aalia se lisi fou, e mu mea na tutupu i le fa'asologa lenei:

hide.bs.tab(i luga o le lisi o lo'o galue nei)
show.bs.tab(i luga o le faʻailoga o le a faʻaalia)
hidden.bs.tab(i luga o le lisi galue muamua, tutusa ma le hide.bs.tabmea na tupu)
shown.bs.tab(i luga o le faʻailoga fou faatoa faʻaalia, tutusa ma le show.bs.tabmea na tupu)

Afai e le'i fa'agaoioi le tab, o le a le tapeina le hide.bs.tabma mea tutupu.hidden.bs.tab

Ituaiga mea na tupu	Fa'amatalaga
`hide.bs.tab`	E mu lenei mea pe a fa'aalia se fa'ailoga fou (ma fa'apea e natia ai le fa'agaioiga muamua). Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le lisi o lo'o i ai nei ma le lisi fou e le o toe mamao-to-be-active.
`hidden.bs.tab`	O lenei mea na tupu e mu pe a uma ona faʻaalia se laupepa fou (ma faʻapea o loʻo natia le laupepa muamua). Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le ta'ifa'agaaga muamua ma le fa'ailoga fou fou, fa'asologa.
`show.bs.tab`	O lenei mea na tupu e mu i luga o faʻaaliga faʻaaliga, ae leʻi faʻaalia le faʻailoga fou. Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.
`shown.bs.tab`	O lenei mea na tupu e mu i luga o le faʻaaliga faʻapipiʻi pe a uma ona faʻaalia se tab. Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le ta'i ga'oi ma le fa'agaioiga muamua (pe a maua) ta'itasi.

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