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.

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

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

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

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

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

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

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

<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 .navmea o lo'o iai e fa'alautele le lautele o lo'o avanoa se tasi o vasega fa'aopoopo 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.

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

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

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

<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 luga ole tali tali. 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.

<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 fa'amalosi, e pei ona fa'amatalaina i le WAI ARIA Authoring Practices . 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 ta'aloga.

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

<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

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

Sass

Fuafuaga

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

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.

Dynamic tabbed interfaces, e pei ona faʻamatalaina i le WAI ARIA Authoring Practices , e manaʻomia role="tablist", role="tab", role="tabpanel", ma isi aria-uiga faʻaopoopo ina ia mafai ai ona faʻaalia o latou fausaga, faʻatinoga ma le tulaga o loʻo i ai nei i tagata faʻaogaina tekinolosi fesoasoani (e pei o le faitau mata). I le avea ai o se faiga sili ona lelei, 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.

Manatua o fesoʻotaʻiga faʻapipiʻi faʻamalosi e le tatau ona aofia ai menus pa'ū, aua e mafua ai le faʻaogaina ma le faʻaogaina o faʻafitauli. 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.

O nisi nei o mea o lo'o tu'u iai le mea e feso'ota'i ai le itulau a le Fale. 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'aia ma le fa'avasegaina o mea. E mafai ona e fa'aogaina i tabs, pills, ma so'o se isi lava .navfa'atauga fa'amalosi.

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>

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.

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

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

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

Ma faatasi ai ma fualaau tuusao.

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>

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

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

E mafai ona e fa'agaoioia ta'iala ta'itasi i ni auala:

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

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

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'ia se auala e vala'au ai i se vaega o suiga .

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

constructor

Fa'aagaoioia se fa'ailoga elemene ma mea o lo'o i totonu. O le Tab e tatau ona i ai se data-bs-targetpoʻo, pe a faʻaaogaina se soʻotaga, se hrefuiga, faʻatatau i se pusa pusa i le 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 button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

fa'aali

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.tabmea na tupu).

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

  tab.show()

lafoa'i

Fa'aleaga le lisi o se elemene.

getInstance

Metotia static lea e mafai ai e oe ona maua le faʻataʻitaʻiga faʻasologa e fesoʻotaʻi ma se elemene DOM

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

getOrCreateInstance

Metotia static lea e mafai ai e oe ona maua le faʻataʻitaʻiga faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM, poʻo le fatuina o se mea fou i le tulaga e leʻi amataina.

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

Mea na tutupu

A fa'aalia se fa'ailoga 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
`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 fa'agaio'iga ta'aloga ma le fa'agaio'iga muamua (pe a maua) ta'itasi.
`shown.bs.tab`	O lenei mea e 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 fa'agaio'iga ta'aloga ma le fa'agaio'iga muamua (pe a maua) ta'itasi.
`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 o lea e natia ai le faʻasologa muamua). Fa'aoga `event.target`ma `event.relatedTarget`fa'atatau i le ta'ifa'agaaga muamua ma le fa'ailoga fou fou, fa'asologa.

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