in English

Navs

Documenta et exempla quomodo utendi partes navigationis includuntur Bootstrap.

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. 
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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.

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

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.

Si JavaScript a fonte aedificas, postulatutil.js .

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, functionem et statum currentem ad technologias adiuvandas (ut lectores tegumentum 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.

Nota quod tabula JavaScript plugin non sustinet interfaces tabbed in quibus 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.

Placeholder contentum pro tab panel. Hoc unum pertinet ad domum tab. Sumit te miliaria alta, tam alta, 'causa illa obtinuit ut una risu internationale'. Est in lecto peregrinus, est in capite tunsio. Oh, no. In altera vita morari volo. Ego sum aliquid posse. Conveniens pro meo coronario pugna. Furari liquorem parentum solebas et ad tectum ascendere. Tone, tan idoneus et paratus, converte eam causam suam gravem gettin. Amor illius medicamento similis est. Coniecto me oblitus sum delectum habere.

Placeholder contentum pro tab panel. Hoc unum refert ad tab. Optima architectura adepta es. Congue notat, cosmopolitana esse. Egregius, recens, ferox, seram nos obtinuit. Numquam cogitavit unum diem te perdere vellem. Illa cor tuum manducat foras. Osculum tuum est cosmicum, omne motum magia est. Istos dico, id est ut illa. Salvete carorum abeamus iter. Sicut nox possidebit sicut die 4 mensis Iulii! Sed vastare mavis.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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, 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>

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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.

Placeholder contentum pro tab panel. Hoc unum pertinet ad domum tab. Sumit te miliaria alta, tam alta, 'causa illa obtinuit ut una risu internationale'. Est in lecto peregrinus, est in capite tunsio. Oh, no. In altera vita morari volo. Ego sum aliquid posse. Conveniens pro meo coronario pugna. Furari liquorem parentum solebas et ad tectum ascendere. Tone, tan idoneus et paratus, converte eam causam suam gravem gettin. Amor illius medicamento similis est. Coniecto me oblitus sum delectum habere.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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.

Placeholder contentum pro tab panel. Hoc unum pertinet ad domum tab. Vidisti te in urbe Venetae canentem. Videte te cingi exhaurire. Cur non me vetas? Grave caput est quod coronam gerit. Ita angelos clamamus, de sursum super terram pluentes. Wanna spectaculum in 3D, pellicula. Tu semper sentis, sentis tam gracilem chartam. Praesent vel nulla sed nulla.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Data per attributa

Potes navigationem tab vel diripio movere sine scripto quodlibet JavaScript simpliciter specificans data-toggle="tab"aut data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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);

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Singula tab in pluribus modis movere potes:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 .

$().tab

Tab elementum activum ac contentum continens. Tab habere debet vel a data-targetvel, si nexum utens, hrefnodi attributum targeting nodi in 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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('ostendere')

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

$('#someTab').tab('show')

.tab('disponere')

Tab s elementum destruit.

Events

Cum ostendens novam tab, eventus ignis hoc ordine;

  1. hide.bs.tab(In current activae tab)
  2. show.bs.tab(Per tab-esse ostensum est)
  3. hidden.bs.tab(In tab priorem activam, idem est ut hide.bs.tabres)
  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.

Event Type 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. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})