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.

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>

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.

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>

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:

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>

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

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

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>

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

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

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

Diripio

Accipe ipsum HTML, sed utere .nav-pillsloco:

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>

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.

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>

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

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

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>

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

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>

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.

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>

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, etiam si visibiliter dicuntur tabs cum .nav-tabsclasse, dari non debere role="tablist", role="tab"vel role="tabpanel"attributa. Hae tantum aptae sunt ad interfaces dynamicas tabbed, de quibus in ARIA Authoring Practices Guide tabs exemplaris . Vide in hac sectione in sectione interfaces dynamicas mores 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

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>

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

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutionis CSS variabilium accedunt, navs nunc localibus CSS variabilibus in .nav, .nav-tabs, ac .nav-pillsreali-temporis css. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

In .navbasi ordinis;

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

De genere .nav-tabsdeterminato:

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

De genere .nav-pillsdeterminato:

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

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

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

Hoc est aliquis placeholder contentum tabularum tabularum adiunctorum contentorum. Alter tab strepitando visibilitatem hanc pro altera 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 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>

Ad necessitates tuas aptas, opera haec cum <ul>charactere fundato, ut supra ostensum est, vel cum quavis arbitrario "tuum" volvunt notam. Nota quod si usus <nav>es, directe ei non debes addere role="tablist", sicut hoc elementi munus proprium quasi terminus navigandi vincet. Sed potius ad alterum elementum (exempli gratia infra, simplex ) transi et circum illud <div>involve .<nav>

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>

Tabs plugin etiam cum pilulis operatur.

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>

Ac dui lobortis. aria-orientation="vertical"Specimen, pro tabs verticalibus, etiam ad indicem continens debes addere .

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>

Accessibility

Interfaces dynamicas tabbed, de quibus in ARIA Auctoring Exercitia Rector tabs exemplaris , require role="tablist", role="tab", role="tabpanel"et additamenta aria-attributa ut eorum structuram, functionalitatem et statum currentem technologiarum adiuvantium (ut lectores ducto) deferat. 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.

In linea cum ARIA exemplaris Exercitationum Authoring, modo tab claviaturae activae accipit umbilicum claviaturae. Cum JavaScript plugin initialized est, tabindex="-1"in omnibus tab moderantibus iners ponet. Cum nunc activa tab umbilicus habet, claves cursorium tab proximam/proximam/activant, cum plugin obiter vagantestabindex mutato . Sed nota quod JavaScript plugin inter tabulas horizontales et verticales non distinguit cum ad cursorem clavium interationes: cuiuscumque cursoris tab orientatio, et sursum et sinistrum eunt ad tab priorem, et deorsum et cursorem dextrum eunt ad altera tab.

In genere, ut navigationem claviaturam faciliorem reddat, suadetur ut tabulas ipsas umbilices efficiat, nisi primum elementum in quo significativum contentum intra tabulam tabulicam contineat, iam focusable est. The JavaScript plugin not try to handle this aspect-where appropriate, you' need expressly make your tab panels focusable by adding tabindex="0"in your markup.

Tab plugin JavaScript non sustinet interfaces tabbed quae menus dropdown continent, sicut hae causae et usability et accessibilitas proventus. 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.

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

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

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

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

Singula tab in pluribus modis movere potes:

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

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

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 .

Contentum operatur sicut tab elementum.

Exempli gratia cum fabricante tab creare potes, exempli gratia:

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

Methodus	Descriptio
`dispose`	Tab s elementum destruit.
`getInstance`	Ratio static, quae te permittit ut tab instantia coniuncta cum elementum dom, eo uti potes: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Methodus stabilis, quae instantia tab in elementi DOM adiunctum reddit vel novam creans in casu initiali non erat. Hoc uti potes: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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 tab indicatus est (id ante `shown.bs.tab`eventum occurrit).

Events

Cum ostendens novam tab, eventus ignis hoc ordine;

hide.bs.tab(In current activae tab)
show.bs.tab(Per tab-esse ostensum est)
hidden.bs.tab(In tab priorem activam, idem est ut hide.bs.tabres)
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
`hide.bs.tab`	Eventus ille ignes cum nova tab demonstranda est (et sic prior tab activa occultanda est). Utere `event.target`et `event.relatedTarget`oppugnare 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.target`et `event.relatedTarget`oppugnare tab priorem activam et novam tab activam, respective.
`show.bs.tab`	Hic eventus ignes in tab ostendit, sed antequam nova tab ostensa est. Utere `event.target`et `event.relatedTarget`oppugnare tab activum et priorem tab (si available) respective.
`shown.bs.tab`	Hic eventus ignes in tab ostendit postquam tab ostensus est. Utere `event.target`et `event.relatedTarget`oppugnare tab activum et priorem tab (si available) respective.

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