Navs agus tabaichean
Sgrìobhainnean agus eisimpleirean airson mar a chleachdas tu co-phàirtean seòlaidh Bootstrap.
Bun nav
Bidh seòladh a tha ri fhaighinn ann am Bootstrap a’ roinn comharran coitcheann agus stoidhlichean, bhon bhun- .nav
chlas gu na stàitean gnìomhach agus ciorramach. Dèan iomlaid air clasaichean mion-atharrachaidh gus gluasad eadar gach stoidhle.
Tha am pàirt bunaiteach .nav
air a thogail le flexbox agus a’ toirt bunait làidir airson a h-uile seòrsa de cho-phàirtean seòlaidh a thogail. Tha e a’ toirt a-steach cuid de rudan a tha a’ dol thairis air stoidhle (airson obrachadh le liostaichean), cuid de phlugadh ceangail airson raointean a tha air am bualadh nas motha, agus stoidhle bunaiteach ciorramach.
.nav
Chan eil am pàirt bunaiteach a’ toirt a-steach .active
staid sam bith. Tha na h-eisimpleirean a leanas a’ toirt a-steach a’ chlas, gu h-àraidh airson sealltainn nach eil an clas sònraichte seo a’ brosnachadh stoidhle sònraichte sam bith.
Gus an staid ghnìomhach a thoirt gu teicneòlasan cuideachail, cleachd am aria-current
feart - a’ cleachdadh an page
luach airson duilleag gnàthach, no true
airson an rud gnàthach ann an seata.
<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>
Bithear a’ cleachdadh chlasaichean air feadh, agus mar sin faodaidh do chomharradh a bhith air leth sùbailte. Cleachd <ul>
na rudan gu h-àrd, <ol>
ma tha òrdugh nan nithean agad cudromach, no rolaich do chuid fhèin le <nav>
eileamaid. Leis gu bheil na .nav
cleachdaidhean display: flex
, bidh na ceanglaichean nav gan giùlan fhèin mar a bhiodh nithean nav, ach às aonais a’ chomharra a bharrachd.
<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>
Stoidhlichean rim faighinn
Atharraich stoidhle .nav
co-phàirt s le mion-atharraichean agus goireasan. Meudaich agus maids mar a dh ’fheumar, no tog do chuid fhèin.
Co-thaobhadh còmhnard
Atharraich co-thaobhadh còmhnard do nav le goireasan flexbox . Gu gnàthach, tha navs air an co-thaobhadh ris an taobh chlì, ach is urrainn dhut gu furasta an atharrachadh gu meadhan no co-thaobhadh deas.
Air a chuimseachadh le .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>
Co-thaobhadh ceart le .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>
Inghearach
Stack do sheòladh le bhith ag atharrachadh stiùireadh an nì flex leis a’ .flex-column
ghoireas. Am feum thu an cruachadh air cuid de phuirt-seallaidh ach chan eil feadhainn eile? Cleachd na dreachan freagairteach (me, .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>
Mar as àbhaist, tha seòladh dìreach comasach às aonais <ul>
s, cuideachd.
<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>
Tabaichean
A’ gabhail an nòs bunaiteach bho shuas agus a’ cur ris a’ .nav-tabs
chlas gus eadar-aghaidh tabaichte a chruthachadh. Cleachd iad gus roinnean tabable a chruthachadh leis a ’ plugan tab JavaScript againn .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Pills
Gabh an aon HTML sin, ach cleachd .nav-pills
an àite sin:
<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>
Lìon agus fìreanachadh
Thoir .nav
air na tha anns an t-susbaint agad an leud iomlan a leudachadh aon de dhà chlas mion-atharrachaidh. Gus a h-uile àite a tha ri fhaighinn a lìonadh leis na .nav-item
s agad, cleachd .nav-fill
. Mothaich gu bheil a h-uile àite còmhnard air a chleachdadh, ach chan eil an aon leud aig a h-uile nì seòlaidh.
<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>
Nuair a bhios tu a’ cleachdadh <nav>
seòladh stèidhichte, faodaidh tu fàgail a-mach gu sàbhailte .nav-item
mar a tha riatanach airson eileamaidean .nav-link
stoidhle .<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>
Airson eileamaidean de leud co-ionann, cleachd .nav-justified
. Bidh a h-uile àite còmhnard air a ghabhail a-steach le ceanglaichean nav, ach eu-coltach ris na tha gu h- .nav-fill
àrd, bidh gach nì seòlaidh den aon leud.
<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>
Coltach ris an .nav-fill
eisimpleir a 'cleachdadh <nav>
seòladh stèidhichte.
<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>
Ag obair le flex utilities
Ma tha feum agad air atharrachaidhean freagairteach nav, smaoinich air a bhith a’ cleachdadh sreath de ghoireasan flexbox . Fhad ‘s a tha iad nas gnìomhaiche, tha na goireasan sin a’ tabhann barrachd gnàthachaidh thairis air puingean brisidh freagairteach. Anns an eisimpleir gu h-ìosal, bidh an inneal-seòlaidh againn air a chruachadh air a’ phuing-bhriseadh as ìsle, agus an uairsin atharraichidh e gu cruth còmhnard a lìonas an leud a tha ri fhaighinn a’ tòiseachadh bhon àite brisidh bheag.
<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>
A thaobh ruigsinneachd
Ma tha thu a’ cleachdadh navs gus bàr seòlaidh a sholarachadh, bi cinnteach gun cuir thu ris role="navigation"
a’ ghobhar phàrant as loidsigeach den <ul>
, no paisg <nav>
eileamaid timcheall an t-seòlaidh gu lèir. Na cuir an dreuchd ris <ul>
fhèin, oir chuireadh seo stad air bho bhith air ainmeachadh mar fhìor liosta le teicneòlasan taice.
Thoir an aire nach bu chòir , no buadhan a thoirt do bhàraichean seòlaidh, eadhon ged a tha iad air an ainmeachadh mar tabaichean leis a’ .nav-tabs
chlas . Chan eil iad sin iomchaidh ach airson eadar-aghaidh tabbed fiùghantach, mar a chaidh a mhìneachadh ann am pàtran tabaichean Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA . Faic giùlan JavaScript airson eadar-aghaidh tabbed fiùghantach san roinn seo airson eisimpleir. Chan eil am feart riatanach air eadar-aghaidh tabbed fiùghantach leis gu bheil an JavaScript againn a’ làimhseachadh na stàite taghte le bhith a’ cur ris an taba gnìomhach.role="tablist"
role="tab"
role="tabpanel"
aria-current
aria-selected="true"
A 'cleachdadh dropdowns
Cuir clàran-bìdh sìos le beagan HTML a bharrachd agus am plugan tuiteam-sìos JavaScript .
Tabaichean le 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>
Pills le 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>
CSS
Caochlaidhean
Air a chur ris ann an v5.2.0Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap, tha navs a-nis a’ cleachdadh caochladairean CSS ionadail air .nav
, .nav-tabs
, agus .nav-pills
airson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.
Air a ' .nav
chlas bunaiteach:
--#{$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};
Anns a ' .nav-tabs
chlas mion-atharrachaidh:
--#{$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};
Anns a ' .nav-pills
chlas mion-atharrachaidh:
--#{$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};
caochladairean Sass
$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;
Giùlan JavaScript
Cleachd am plugan tab JavaScript - cuir a-steach e leotha fhèin no tron bootstrap.js
fhaidhle cruinnichte - gus na tabaichean seòlaidh agus na pills againn a leudachadh gus panalan tabable de shusbaint ionadail a chruthachadh.
Seo cuid de shusbaint neach-àite an t-susbaint a tha co -cheangailte ris an taba Dachaigh . Ma bhriogas tu air taba eile togaidh tu faicsinneachd an tè seo airson an ath fhear. Bidh an tab JavaScript ag atharrachadh chlasaichean gus smachd a chumail air faicsinneachd susbaint agus stoidhle. Faodaidh tu a chleachdadh le tabaichean, pills, agus .nav
seòladh le cumhachd sam bith eile.
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.
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>
Gus cuideachadh le bhith a’ freagairt air na feumalachdan agad, bidh seo ag obair le <ul>
comharradh stèidhichte, mar a chithear gu h-àrd, no le comharradh neo-riaghailteach “rol do chuid fhèin”. Thoir an aire ma tha thu a’ cleachdadh <nav>
, cha bu chòir dhut cur ris role="tablist"
gu dìreach, oir bhiodh seo a’ dol thairis air àite dùthchasach an eileamaid mar chomharra-tìre seòlaidh. An àite sin, gluais gu eileamaid eile (san eisimpleir gu h-ìosal, sìmplidh <div>
) agus cuir <nav>
timcheall air.
<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>
Bidh am plugan tabaichean cuideachd ag obair le pills.
Seo cuid de shusbaint neach-àite an t-susbaint a tha co -cheangailte ris an taba Dachaigh . Ma bhriogas tu air taba eile togaidh tu faicsinneachd an tè seo airson an ath fhear. Bidh an tab JavaScript ag atharrachadh chlasaichean gus smachd a chumail air faicsinneachd susbaint agus stoidhle. Faodaidh tu a chleachdadh le tabaichean, pills, agus .nav
seòladh le cumhachd sam bith eile.
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.
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>
Agus le pills dìreach. Mas fheàrr, airson tabaichean dìreach, bu chòir dhut cuideachd a chur ris aria-orientation="vertical"
a’ ghobhar liosta tab.
Seo cuid de shusbaint neach-àite an t-susbaint a tha co -cheangailte ris an taba Dachaigh . Ma bhriogas tu air taba eile togaidh tu faicsinneachd an tè seo airson an ath fhear. Bidh an tab JavaScript ag atharrachadh chlasaichean gus smachd a chumail air faicsinneachd susbaint agus stoidhle. Faodaidh tu a chleachdadh le tabaichean, pills, agus .nav
seòladh le cumhachd sam bith eile.
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.
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>
Ruigsinneachd
Feumaidh eadar-aghaidh tabbed fiùghantach, mar a tha air a mhìneachadh ann am pàtran tabaichean Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA , role="tablist"
, role="tab"
, role="tabpanel"
, agus aria-
buadhan a bharrachd gus an structar, an comas-gnìomh agus an staid làithreach a thoirt do luchd-cleachdaidh theicneòlasan taice (leithid leughadairean sgrion). Mar chleachdadh as fheàrr, tha sinn a’ moladh <button>
eileamaidean a chleachdadh airson nan tabaichean, oir is e smachdan a tha seo a bhrosnaicheas atharrachadh fiùghantach, seach ceanglaichean a bhios a’ seòladh gu duilleag no àite ùr.
A rèir pàtran Cleachdaidhean Ùghdarrachaidh ARIA, chan fhaigh ach an taba gnìomhach an-dràsta fòcas meur-chlàr. Nuair a thèid am plugan JavaScript a thòiseachadh, suidhichidh e tabindex="-1"
air a h-uile smachd taba neo-ghnìomhach. Aon uair ‘s gu bheil fòcas air an taba a tha gnìomhach an-dràsta, cuiridh na h-iuchraichean cùrsair an taba roimhe / an ath rud an gnìomh, leis a’ plugan ag atharrachadh an gluasad a rèirtabindex
sin. Ach, thoir an aire nach eil am plugan JavaScript a’ dèanamh eadar-dhealachadh eadar liostaichean tabaichean còmhnard is inghearach nuair a thig e gu prìomh eadar-obrachaidhean cursair: ge bith dè an taobh a tha an liosta taba, bidh an cursair gu h-àrd is air an taobh chlì a’ dol chun taba roimhe, agus sìos is sìos an cursair deas a’ dol gu an ath tab.
tabindex="0"
do chomharradh a-steach.
A’ cleachdadh feartan dàta
Faodaidh tu seòladh taba no pill a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-bs-toggle="tab"
no data-bs-toggle="pill"
air eileamaid. Cleachd na buadhan dàta seo air .nav-tabs
no .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>
Air sgàth javascript
Dèan comas air tabaichean tabable tro JavaScript (feumaidh gach taba a chuir an gnìomh leotha fhèin):
const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
const tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', event => {
event.preventDefault()
tabTrigger.show()
})
})
Faodaidh tu tabaichean fa leth a chuir an gnìomh ann an grunn dhòighean:
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
A 'bhuaidh a dh' fhalbh
Gus toirt air tabaichean a dhol a-steach, cuir .fade
ris gach .tab-pane
. Feumaidh a’ chiad phana taba cuideachd .show
an susbaint tùsail a dhèanamh follaiseach.
<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>
Dòighean-obrach
Modhan asyncronach agus eadar-ghluasadan
Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .
Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .
Cuir an susbaint agad an gnìomh mar eileamaid tab.
Faodaidh tu eisimpleir tab a chruthachadh leis an neach-togail, mar eisimpleir:
const bsTab = new bootstrap.Tab('#myTab')
Dòigh-obrach | Tuairisgeul |
---|---|
dispose |
A 'sgrios tab eileamaid. |
getInstance |
Dòigh statach a leigeas leat an eisimpleir tab fhaighinn co-cheangailte ri eileamaid DOM, faodaidh tu a chleachdadh mar seo: bootstrap.Tab.getInstance(element) . |
getOrCreateInstance |
Modh statach a thilleas eisimpleir taba co-cheangailte ri eileamaid DOM no cruthaich fear ùr gun fhios nach deach a thòiseachadh. Faodaidh tu a chleachdadh mar seo: bootstrap.Tab.getOrCreateInstance(element) . |
show |
Tagh an taba a chaidh a thoirt seachad agus seallaidh e am pana co-cheangailte ris. Bidh taba sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha am pana co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (ie mus tachair an shown.bs.tab tachartas). |
Tachartasan
Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:
hide.bs.tab
(air an taba gnìomhach làithreach)show.bs.tab
(air an taba a tha ri fhaicinn)hidden.bs.tab
(air an taba gnìomhach roimhe, an aon fhear ris anhide.bs.tab
tachartas)shown.bs.tab
(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris anshow.bs.tab
tachartas)
Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tab
agus na tachartasan a chuir às.hidden.bs.tab
Seòrsa tachartas | Tuairisgeul |
---|---|
hide.bs.tab |
Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth. |
hidden.bs.tab |
Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth. |
show.bs.tab |
Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth. |
shown.bs.tab |
Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd event.target agus event.relatedTarget gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth. |
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
})