Nav û tab
Belgekirin û nimûneyên ji bo meriv çawa Bootstrap-ê hêmanên navîgasyonê bikar tîne.
Base nav
Navîgasyon ku di Bootstrap de peyda dibe, nîşankirin û şêwazên gelemperî, ji .nav
çîna bingehîn bigire heya dewletên çalak û neçalak. Dersên guhêrbar biguhezînin da ku di navbera her şêwazê de biguhezînin.
Parçeya bingehîn .nav
bi flexbox ve hatî çêkirin û bingehek bihêz ji bo avakirina hemî celeb pêkhateyên navîgasyonê peyda dike. Di nav xwe de hin guheztinên şêwazê (ji bo xebata bi navnîşan) vedihewîne, hin peldanka girêdanê ji bo deverên lêdan ên mezin, û şêwaza bingehîn a astengdar vedihewîne.
Pêkhateya bingehîn .nav
tu dewletî nagire nav xwe .active
. Mînakên jêrîn polê vedigirin, bi taybetî ji bo ku nîşan bidin ku ev çîna taybetî tu şêwazek taybetî dernakeve.
Ji bo gihandina rewşa çalak ji teknolojiyên arîkar re, aria-current
taybetmendiyê bikar bînin - page
nirxê ji bo rûpela heyî, an true
ji bo tiştê heyî di komekê de bikar bînin.
<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>
Ders li seranserê têne bikar anîn, ji ber vê yekê nîşankirina we dikare super maqûl be. <ul>
Mîna jorîn bikar bînin , <ol>
ger rêzika tiştên we girîng e, an jî xwe bi <nav>
hêmanek bixin. Ji ber ku .nav
karanîn display: flex
, girêdanên navî wekî tiştên navokê tevdigerin, lê bêyî nîşana zêde.
<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>
Şêweyên berdest
Bi guherbar û karûbaran şêwaza .nav
pêkhateya s biguherînin. Li gorî hewcedariyê tevlihev bikin û li hev bikin, an ya xwe ava bikin.
Alignment Horizontal
Bi karûbarên flexbox re hevrêziya horizontî ya navika xwe biguhezînin . Ji hêla xwerû ve, navok li çepê têne rêz kirin, lê hûn dikarin bi hêsanî wan biguhezînin navend an rastê.
Navendî bi .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>
Rast-rast bi .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>
Çikanî
Navîgasyona xwe bi guheztina rêgeziya babetê nerm bi kargêriyê ve .flex-column
biguhezînin. Ma hûn hewce ne ku wan li ser hin dîmenderan bixin lê ne yên din? Guhertoyên bersivdar bikar bînin (mînak, .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>
Mîna her gav, navîgasyon vertîkal bêyî <ul>
s jî gengaz e.
<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ê bingehîn ji jor digire û .nav-tabs
polê lê zêde dike da ku navbeynek tablo çêbike. Wan bikar bînin da ku bi pêveka meya JavaScript tabê re herêmên tabloyê biafirînin .
<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>
Pills
Heman HTML-ê bistînin, lê li şûna wê bikar .nav-pills
bînin:
<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>
Dagirtin û rewa kirin
Bi zorê naverokên xwe .nav
bidin ku firehiya berdest yek ji du çînên guhêrbar dirêj bike. Ji bo ku bi s-ya xwe bi rêjeyî hemî cîhê berdest tijî bikin .nav-item
, bikar bînin .nav-fill
. Bala xwe bidinê ku hemî cîhê horizontî dagirkirî ye, lê ne her babet navokê xwedî heman firehiyê ye.
<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>
Dema ku <nav>
navîgasyonek-based bikar tînin, hûn dikarin bi ewlehî ji holê rakin .nav-item
ji ber ku tenê .nav-link
ji bo <a>
hêmanên şêwazê hewce ye.
<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>
Ji bo hêmanên wekhev-fireh, bikar bînin .nav-justified
. Hemî cîhê horizontî dê ji hêla girêdanên navikê ve were dagîr kirin, lê berevajî ya .nav-fill
jorîn, her babet nav dê heman firehiyê be.
<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>
Wek .nav-fill
mînak bi karanîna <nav>
navîgasyonek -based.
<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>
Bi karûbarên flex re dixebitin
Heke hûn hewceyê guhertoyên nav-ê yên bersivdar in, bi karanîna rêzek karûbarên flexbox -ê bifikirin . Digel ku bêtir devkî, van karûbaran di nav xalên veqetandinê yên bersivdar de xwerûkirina mezintir pêşkêş dikin. Di mînaka li jêr de, navika me dê li ser xala veqetînê ya herî nizm were danîn, dûv re bi sêwirana horizontî ya ku ji xala veqetînê ya piçûk dest pê dike firehiya berdest tije dike.
<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>
Di derbarê gihîştinê de
Ger hûn navîgasyonê bikar tînin da ku barek navîgasyon peyda bikin, bê guman a role="navigation"
li konteynera dêûbavê ya herî mentiqî ya lê zêde bikin <ul>
, an jî <nav>
hêmanek li dora tevaya navîgasyonê bipêçin. Rolê li <ul>
xwe zêde nekin, ji ber ku ev ê rê li ber ku ew wekî navnîşek rastîn ji hêla teknolojiyên arîkar ve were ragihandin.
Bala xwe bidinê ku barên navîgasyonê, her çend bi dîtbarî wekî tabloyên bi .nav-tabs
polê re were şêwaz kirin, divê neyên dayîn role="tablist"
, role="tab"
an role="tabpanel"
taybetmendî. Vana tenê ji bo navbeynkên tabloyên dînamîkî guncan in, wekî ku di Pratîkên Nivîsandina WAI ARIA de têne diyar kirin . Di vê beşê de ji bo mînakek tevgerên JavaScript -ê ji bo navrûyên tabloyên dînamîkî bibînin . Taybetmendî aria-current
li ser navberên tabloyên dînamîkî ne hewce ye ji ber ku JavaScript me rewşa hilbijartî bi lêzêdekirina aria-selected="true"
tabloya çalak digire dest.
Bikaranîna peldankan
Pêşekên daketinê bi HTML-ya piçûktir û pêveka JavaScript -a daketî zêde bikin.
Tabên bi daxistinan
<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>
Pills bi dropdown
<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
Variables
$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;
tevgera JavaScript
Pêveka JavaScript-a tabê bikar bînin - wê bi serê xwe an bi bootstrap.js
pelê berhevkirî ve têxin nav xwe - da ku tab û hebên me yên navîgasyonê dirêj bikin da ku pelên tabloyên naveroka herêmî biafirînin.
Têkiliyên tabloyên dînamîkî, wekî ku di Pratîkên Nivîskariya WAI ARIA de têne diyar kirin , hewceyê role="tablist"
, role="tab"
, role="tabpanel"
, û aria-
taybetmendiyên din in da ku struktur, fonksiyon û rewşa xwe ya heyî ji bikarhênerên teknolojiyên arîkar re (wek xwendevanên ekranê) ragihînin. Wekî pratîkek çêtirîn, em pêşniyar dikin ku <button>
hêmanan ji bo tabloyan bikar bînin, ji ber ku ev kontrol in ku guherînek dînamîkî çêdikin, ji bilî girêdanên ku berbi rûpelek an cîhek nû ve diçin.
Bala xwe bidinê ku navberên tabloyên dînamîkî divê pêşekên dakêşanê nehewînin, ji ber ku ev dibe sedema pirsgirêkên bikêr û gihîştinê. Ji perspektîfek karanîna, rastiya ku hêmana tabloya ku niha tê xuyang kirin tavilê nayê xuyang kirin (ji ber ku ew di hundurê menuya dakêşana girtî de ye) dikare bibe sedema tevliheviyê. Ji xalek gihîştinê, heya niha rêyek maqûl tune ku meriv bi vî rengî avahîsaziyê bi şêwazek standard WAI ARIA ve nexşe bike, tê vê wateyê ku ew bi hêsanî ji bikarhênerên teknolojiyên arîkar re nayê fam kirin.
Ev hin naverokên cîhgiran naveroka têkildar a tabloya Malê ye. Bi tikandina tabloyek din dê xuyangiya vê yekê ji bo ya din biguhezîne. Tabloya JavaScript dersan diguherîne da ku dîtina naverokê û şêwazê kontrol bike. Hûn dikarin wê bi tab, heban, û her .nav
navîgasyonek din a bi hêz bikar bînin.
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>
Ji bo ku ji hewcedariyên we re bibe alîkar, ev bi <ul>
nîşankirina-bingehîn, wekî ku li jor hatî destnîşan kirin, an bi nîşanek "xweya xweya xwe" ya kêfî re dixebite. Bala xwe bidinê ku heke hûn bikar tînin <nav>
, divê hûn role="tablist"
rasterast lê zêde nekin, ji ber ku ev ê rola xweya elementê wekî nîşana navîgasyonê bişkîne. Di şûna wê de, veguhezînin hêmanek alternatîf (di mînaka jêrîn de, a hêsan <div>
) û li <nav>
dora wê bipêçin.
<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>
Pêveka tabê jî bi hebanan re dixebite.
Ev hin naverokên cîhgiran naveroka têkildar a tabloya Malê ye. Bi tikandina tabloyek din dê xuyangiya vê yekê ji bo ya din biguhezîne. Tabloya JavaScript dersan diguherîne da ku dîtina naverokê û şêwazê kontrol bike. Hûn dikarin wê bi tab, heban, û her .nav
navîgasyonek din a bi hêz bikar bînin.
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>
Û bi hebên vertical.
Ev hin naverokên cîhgiran naveroka têkildar a tabloya Malê ye. Bi tikandina tabloyek din dê xuyangiya vê yekê ji bo ya din biguhezîne. Tabloya JavaScript dersan diguherîne da ku dîtina naverokê û şêwazê kontrol bike. Hûn dikarin wê bi tab, heban, û her .nav
navîgasyonek din a bi hêz bikar bînin.
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>
Taybetmendiyên daneyê bikar tînin
Hûn dikarin navîgasyonek tabloyek an pileyek bêyî nivîsandina JavaScriptê bi tenê diyar kirin data-bs-toggle="tab"
an data-bs-toggle="pill"
li ser hêmanek çalak bikin. Van taybetmendiyên daneyê li ser .nav-tabs
an bikar bînin .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>
Bi JavaScript
Bi JavaScript-ê tabloyên tabloyê çalak bikin (pêdivî ye ku her tabloyek kesane were çalak kirin):
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()
})
})
Hûn dikarin tabloyên kesane bi çend awayan çalak bikin:
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
Bandora fade
Ji bo ku tabloyan bişewitînin, li her yekê zêde .fade
bikin .tab-pane
. Pêdivî ye ku tabloya yekem jî pêdivî .show
ye ku naveroka destpêkê xuya bike.
<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>
Methods
Rêbaz û veguherînên Asynchronous
Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.
constructor
Elementek tabê û konteynir naverokê çalak dike. Pêdivî ye ku tabloyek an data-bs-target
jî, heke girêdanek bikar bîne, href
taybetmendiyek hebe, ku di DOM-ê de girêkek konteynir bike armanc.
<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>
rêdan
Tabloya diyarkirî hildibijêre û panela wê ya têkildar nîşan dide. Her tabloyek din a ku berê hatibû hilbijartin, nehilbijartî dibe û pencereya wê ya têkildar tê veşartin. Berî ku tablo bi rastî were xuyang kirin (ango berî ku shown.bs.tab
bûyer çêbibe) vedigere bangewazî.
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
avêtin
Tabloya hêmanekê hilweşîne.
getInstance
Rêbaza statîkî ya ku dihêle hûn tabloya ku bi hêmanek DOM-ê ve girêdayî ye bistînin
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Rêbaza statîkî ya ku dihêle hûn mînaka tabê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an ger ku ew nehatibe destpêkirin yek nû biafirînin.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Events
Dema ku tabloyek nû nîşan dide, bûyer bi rêza jêrîn dişewitin:
hide.bs.tab
(li ser tabloya çalak a heyî)show.bs.tab
(li ser tabloya ku tê xuyang kirin)hidden.bs.tab
(li ser tabloya çalak a berê, heman wekîhide.bs.tab
bûyerê)shown.bs.tab
(li ser tabloya ku nû-çalak hatî xuyang kirin, heman wekîshow.bs.tab
bûyerê)
Ger tu tablo jixwe çalak nebûya, wê hingê hide.bs.tab
û hidden.bs.tab
bûyer nayên avêtin.
Cureyê bûyerê | Terîf |
---|---|
show.bs.tab |
Ev bûyer di pêşandana tabloyê de dişewite, lê berî ku tabloya nû were xuyang kirin. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.target û bikin hedef.event.relatedTarget |
shown.bs.tab |
Ev bûyer piştî ku tabloyek hate pêşandan li ser pêşandana tabê derdikeve. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.target û bikin hedef.event.relatedTarget |
hide.bs.tab |
Dema ku tabloyek nû were xuyang kirin ev bûyer dişewite (û bi vî rengî tabloya çalak a berê were veşartin). Bi rêzê ve tabloya aktîf a heyî û tabloya nû ya zû-çalak bibe event.target û armanc bikin.event.relatedTarget |
hidden.bs.tab |
Ev bûyer piştî ku tabloyek nû tê xuyang kirin dişewite (û bi vî rengî tabloya çalak a berê tê veşartin). Bi rêzê ve tabloya çalak a berê û tabloya nû ya çalak bikar bînin event.target û bikin hedef.event.relatedTarget |
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
})