Navs and tabs
Documenta et exempla quomodo utendi partes navigationis includuntur Bootstrap.
Basis nav
Navigatio praesto est in Bootstrap communem notam et stilum communem, a basi .nav
classium ad civitates activas et debiles. Swap determinatio classes ad commutandum inter se stilum.
Basis .nav
pars 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 .nav
nullum .active
statum includit. Classis exempla includunt, maxime ad demonstrandum hoc genus particulare stylum speciale non felis.
Status activus ad technologias adiuvandas deferat, aria-current
attributo utere — utens page
valore paginae hodiernae vel true
item 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" href="#" tabindex="-1" aria-disabled="true">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 .nav
usus 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Praesto styles
Mutare rationem .nav
componentium 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Vertical
Navigationem tuam pone mutando flex item directionem cum .flex-column
utilitate. 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Tabs
Nav superne fundamentalem accipit et addit .nav-tabs
classem 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Diripio
Accipe ipsum HTML, sed utere .nav-pills
loco:
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Imple et iustifica
Coge .nav
contenta tua extendere plenam latitudinem in promptu unum duorum generum determinatorum. Ut proportionaliter imple omnia spatia tua .nav-item
s, 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Cum navigatione subnixa utens <nav>
, tuto praeterire potes .nav-item
quod solum ad elementa .nav-link
ferendis 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Pro aequalibus elementis utere .nav-justified
. Omne spatium horizontalis a nexus nav occupabitur, sed .nav-fill
supra 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Simili .nav-fill
exemplo 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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-tabs
classe, dari non debere 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 in sectione interfaces dynamicas mores JavaScript pro exemplo. Attributum aria-current
non 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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.js
fasciculum 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. 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 .nav
navigationibus -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, 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-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. 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 .nav
navigationibus -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. 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 .nav
navigationibus -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-tabs
vel .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 a'))
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 a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Pade effectus
Ut tabescas in tabes, addas .fade
singulis .tab-pane
. Prima tab pane debet etiam .show
facere 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 .
constructor
Tab elementum activum ac contentum continens. Tab habere debet vel a data-bs-target
vel, si nexum utens, href
attributum, 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 a')
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 tab indicatus est (id ante shown.bs.tab
eventum 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
Ratio static, quae te permittit ut instantia tab instantia cum elemento DOM coniungitur, vel novum crea in casu initiali non erat.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
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 uthide.bs.tab
res)shown.bs.tab
(in recenter-activo modo-ostenso tab, idem ac proshow.bs.tab
eventu)
Si nulla tab iam activa erat, tunc hide.bs.tab
eventus hidden.bs.tab
non accendetur.
Genus res | Descriptio |
---|---|
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. |
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. |
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
})