Skip to main content Skip ad navigationem soUicitudo
in English

Navs and tabs

Documenta et exempla quomodo utendi partes navigationis includuntur Bootstrap.

In hac pagina

Basis nav

Navigatio praesto est in Bootstrap communem notam et stilum communem, a basi .navclassium ad civitates activas et debiles. Swap determinatio classes ad commutandum inter se stilum.

Basis .navpars cum flexbox aedificatur et fundamentum validum praebent ad omnes rationes navigationis componendas. Includit stylum quemdam vincit (ad operandum cum electronicis), quaedam ligamen ad fasciculum pro amplioribus locis hit, et stylos fundamentales debiles.

Pars basis .navnullum .activestatum includit. Classis exempla includunt, maxime ad demonstrandum hoc genus particulare stylum speciale non felis.

Status activus ad technologias adiuvandas deferat, aria-currentattributo utere — utens pagevalore paginae hodiernae vel trueitem in statuto currenti.

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

Classes per totum adhibentur, ut signum tuum super flexibile esse possit. Utere <ul>s sicut supra, <ol>si ordo rerum tuarum interest, vel <nav>elementum tuum volve. Quia .navusus display: flex, nexus nav idem se gerere volunt ac nav res, sed sine notae extra.

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

Praesto styles

Mutare rationem .navcomponentium cum mutatis et utilitatibus. Misce et aequare prout opus est, vel aedificare tuum.

Noctis Horizontalis

Mutare alignment horizontalem nav cum flexbox utilitatibus . Defalta, navigiae permixtae sunt, sed facile eas ad centrum vel ad dextram aligned transmutare potes.

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

Dextra-aligned with .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>

Vertical

Navigationem tuam pone mutando flex item directionem cum .flex-columnutilitate. Eget eos ACERVUS in quibusdam viewports sed non aliis? Versionibus responsivis utere (exempli gratia .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>

Ut semper, navigatio verticalis sine <ul>s quoque fieri potest.

<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

Nav superne fundamentalem accipit et addit .nav-tabsclassem ad interfacem tabbed generandam. Use them to create tabbable regions with our 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>

Diripio

Accipe ipsum HTML, sed utere .nav-pillsloco:

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

Imple et iustifica

Coge .navcontenta tua extendere plenam latitudinem in promptu unum duorum generum determinatorum. Ut proportionaliter imple omnia spatia tua .nav-items, utere .nav-fill. Animadverte quod omne spatium horizontale occupatum est, sed non omne nav item latitudinem eandem habet.

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

Cum navigatione subnixa utens <nav>, tuto praeterire potes .nav-itemquod solum ad elementa .nav-linkferendis requiritur .<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">Disabled</a>
</nav>

Pro aequalibus elementis utere .nav-justified. Omne spatium horizontalis a nexus nav occupabitur, sed .nav-fillsupra dissimilis, omnis item navis latitudo eadem erit.

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

Simili .nav-fillexemplo usus <nav>navigationis substructio.

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

Opus inflectere utilitates

Si responsivas variationes nav opus est, considera utens seriem flexboxs utilitatum . Dum verbosius, hae utilitates maiorem customizationem dant per fractiones responsivas. In exemplo infra, nostra nav in puncto infimo iacebit, tum ad horizontem horizontalem accommodabit quae latitudinem praesto a parvo puncto incipientis implet.

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

De accessibility

Si navigiis ad vecturam navigationis uteris, scito te ad role="navigation"maxime logicum parentis vasi addere <ul>, vel <nav>elementum circa totam navigationem involvere. Munus ipsum non addas <ul>, quia hoc impediret quominus technologiae adiuvativae tamquam index actualis nuntiaretur.

Nota vectes navigationis, etiamsi visibiliter pro tabs cum .nav-tabsclasse nominantur, non esse danda role="tablist", role="tab"vel role="tabpanel"attributa. Hae tantum aptae sunt ad interfaces dynamicas tabbed, de quibus in WAI ARIA Auctoring Exercitia . Vide in hac sectione interfaces dynamicas notas JavaScript pro exemplo. Attributum aria-currentnon est necessarium in interfaces dynamicas tabbed cum JavaScript noster tractat statum electum addendo aria-selected="true"in tabe activa.

per dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin .

Tabs cum dropdowns

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Diripio cum 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">Disabled</a>
  </li>
</ul>

Sass

Variabilium

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

Utere tab JavaScript plugin-include eam singillatim vel per bootstrap.jsfasciculum compilatum — proferre tabs et pilulas nostras navigationis ad creandos panes tabu- lares contentorum localium.

Dynamica interfaces tabbed, de quibus in WAI ARIA Praefectis auctoribus, attributa require role="tablist", role="tab", role="tabpanel"et additamenta ut eorum structuram, functionem et statum hodiernum deferant technologiarum assistivorumaria- utentes (ut lectores ductiles). Pro praxi, <button>elementa pro tabs utentes commendamus, sicut hae potestates sunt quae mutationem dynamicam trigger, potius quam nexus qui ad novam paginam vel locum navigant.

Nota quod interfaces dynamicas non debet continere guttae menus, cum hoc causat quaestiones tam usabilitatis quam accessibilitatis. Ex prospectu usabili, quod nunc elementum felis tab's ostendi non statim visibile est (sicut in menu dropdown clausus est) confusionem movere potest. Ex parte accessibilitatis, nunc sensibilis modus non est ad describendam hanc modi constructionem ad exemplar WAI ARIA vexillum, quod significat non facile intellegi posse technologiae adiuvandae utentes.

Hoc est aliquis placeholder contentum domo tab's adiunctis contentis. Alia tab strepitando visibilitatem hanc pro tunc toggle faciet. Tab JavaScript swaps classes ad moderandum visibilitatem et styling contentus. Ea uti potes cum tabs, pilis, et quibusvis aliis .navnavigationibus -powered.

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>

Ad necessitates tuas aptas, opera haec cum <ul>charactere fundato, ut supra ostensum est, aut cum quavis arbitrario "tuum" signum volvunt. Nota quod si usus <nav>es, directe ei non addas role="tablist", quia hoc elementum proprium munus obtinet ut terminus navigationis. Sed potius ad alterum elementum (exempli gratia infra, simplex ) transi et circum illud <div>involve .<nav>

<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 etiam cum pilulis operatur.

Hoc est aliquis placeholder contentum domo tab's adiunctis contentis. Alia tab strepitando visibilitatem hanc pro tunc toggle faciet. Tab JavaScript swaps classes ad moderandum visibilitatem et styling contentus. Ea uti potes cum tabs, pilis, et quibusvis aliis .navnavigationibus -powered.

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

Ac dui lobortis.

Hoc est aliquis placeholder contentum domo tab's adiunctis contentis. Alia tab strepitando visibilitatem hanc pro tunc toggle faciet. Tab JavaScript swaps classes ad moderandum visibilitatem et styling contentus. Ea uti potes cum tabs, pilis, et quibusvis aliis .navnavigationibus -powered.

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

Data per attributa

Potes navigationem tab vel diripio movere sine scripto quodlibet JavaScript simpliciter specificans data-bs-toggle="tab"aut data-bs-toggle="pill"elementum. Utere his data attributis .nav-tabsvel .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

Admitte tabbable tabs per JavaScript (singulis tab indiget ut singillatim reducitur);

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

Singula tab in pluribus modis movere potes:

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

Pade effectus

Ut tabescas in tabes, addas .fadesingulis .tab-pane. Prima tab pane debet etiam .showfacere ut initialis visibiles.

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

Methodi

Modi asynchronous et transitus

Omnes API modi asynchroni sunt et transitus committitur . Redeunt ad RECENS mox ut transitus incipiat sed antequam finiatur . Methodus praeterea in transitus transeuntis ignorabitur .

See our JavaScript documentation for more information .

constructor

Tab elementum activum ac contentum continens. Tab habere debet vel a data-bs-targetvel, si nexum utens, hrefattributum, nisi nodi continens 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>

ostende

Tabulam datam eligit et tabulam coniunctam ostendit. Quaelibet alia tab, quae antea delectus est, fit unelectus et eius adiuncti pane absconditus est. RECENS prius redit in pane actu ostensum est (id ante shown.bs.tabeventum occurrit).

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

  tab.show()

dispono

Tab s elementum destruit.

getInstance

Statica methodus quae te permittit ut tab instantia coniungitur cum elemento DOM

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

getOrCreateInstance

Statica methodus quae te permittit ut instantia tab in elementi dom coniungitur, vel novum crea in casu initialized non erat.

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

Events

Cum ostendens novam tab, acta igne hoc ordine;

  1. hide.bs.tab(In current activae tab)
  2. show.bs.tab(Per tab-esse ostensum est)
  3. hidden.bs.tab(ex priorem activam tab, the same one as for the hide.bs.tabevent)
  4. shown.bs.tab(in recenter-activo modo-ostenso tab, idem ac pro show.bs.tabeventu)

Si nulla tab iam activa erat, tunc hide.bs.tabeventus hidden.bs.tabnon accendetur.

Genus res Descriptio
show.bs.tab Hic eventus ignes in tab ostendit, sed antequam nova tab ostensa est. Utere event.targetet event.relatedTargetoppugnare tab activum et priorem tab (si available) respective.
shown.bs.tab Hic eventus ignes in tab ostendit postquam tab ostensus est. Utere event.targetet event.relatedTargetoppugnare tab activum et priorem tab (si available) respective.
hide.bs.tab Eventus ille ignes cum nova tab demonstranda est (et sic prior tab activa occultanda est). Utere event.targetet event.relatedTargetoppugnare tab hodiernam activam et novam tab mox activam respective.
hidden.bs.tab Hic eventus post incendia nova tab ostensa est (et sic prior tab occulta activa). Utere event.targetet event.relatedTargetoppugnare tab priorem activam et novam tab activam, respective. 
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
})