يول ۋە بەتكۈچ
Bootstrap نىڭ يول باشلاش زاپچاسلىرىنى قانداق ئىشلىتىش توغرىسىدىكى ھۆججەتلەر ۋە مىساللار.
Base nav
Bootstrap دىكى يول باشلاش ئاساسى .nav
سىنىپتىن ئاكتىپ ۋە مېيىپ ھالەتلەرگىچە بولغان ئومۇمىي بەلگە ۋە ئۇسلۇبلارنى ئورتاقلىشىدۇ. ھەر بىر ئۇسلۇبنى ئالماشتۇرۇش ئۈچۈن ئۆزگەرتىش سىنىپى ئالماشتۇرۇڭ.
ئاساسى .nav
زاپچاس ئەۋرىشىم ساندۇق بىلەن ياسالغان بولۇپ ، ھەر خىل يول باشلاش زاپچاسلىرىنى ياساشقا كۈچلۈك ئاساس بىلەن تەمىنلەيدۇ. ئۇ بىر قىسىم ئۇسلۇب قاپلاش (تىزىملىك بىلەن ئىشلەش ئۈچۈن) ، چوڭراق زەربە بېرىلگەن رايونلارغا ئۇلىنىش ئۇلاش ۋە ئاساسىي مېيىپ ئۇسلۇبنى ئۆز ئىچىگە ئالىدۇ.
ئاساسى .nav
زاپچاس ھېچقانداق دۆلەتنى ئۆز ئىچىگە ئالمايدۇ .active
. تۆۋەندىكى مىساللار دەرسنى ئۆز ئىچىگە ئالىدۇ ، ئاساسلىقى بۇ ئالاھىدە سىنىپنىڭ ھېچقانداق ئالاھىدە ئۇسلۇبنى قوزغاتمايدىغانلىقىنى كۆرسىتىپ بېرىدۇ.
ئاكتىپ ھالەتنى ياردەمچى تېخنىكىلارغا يەتكۈزۈش ئۈچۈن ، aria-current
خاسلىقنى ئىشلىتىڭ - page
نۆۋەتتىكى بەتنىڭ قىممىتىنى ياكى true
بىر يۈرۈش نۆۋەتتىكى تۈرنى ئىشلىتىڭ.
<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>
دەرسلەر ھەممە يەردە ئىشلىتىلىدۇ ، شۇڭا ماركىڭىز دەرىجىدىن تاشقىرى جانلىق بولىدۇ. <ul>
يۇقىرىدىكىگە ئوخشاش s نى ئىشلىتىڭ ، <ol>
ئەگەر تۈرلىرىڭىزنىڭ تەرتىپى مۇھىم بولسا ياكى <nav>
ئېلېمېنت بىلەن ئۆزىڭىزنى دومىلىتىڭ. چۈنكى .nav
ئىشلىتىش display: flex
، nav ئۇلانمىلىرى nav تۈرلىرىگە ئوخشاش ھەرىكەت قىلىدۇ ، ئەمما ئارتۇقچە بەلگە قويمايدۇ.
<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>
ئىشلەتكىلى بولىدىغان ئۇسلۇبلار
.nav
ئۆزگەرتكۈچ ۋە ئىقتىدارلار بىلەن s زاپچاسلىرىنىڭ ئۇسلۇبىنى ئۆزگەرتىڭ. ئېھتىياجغا ئاساسەن ئارىلاشتۇرۇڭ ياكى ماسلاشتۇرۇڭ ياكى ئۆزىڭىز قۇرۇپ چىقىڭ.
توغرىسىغا توغرىلاش
ئەۋرىشىم ئەسلىھەلىرى بىلەن دېڭىزنىڭ توغرىسىغا توغرىلىنىشىنى ئۆزگەرتىڭ . سۈكۈت بويىچە ، دېڭىز ئارمىيىسى سولغا توغرىلىنىدۇ ، ئەمما ئۇلارنى ئاسانلا مەركىزىگە ياكى ئوڭغا توغرىلىيالايسىز.
مەركەز قىلىنغان .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>
ئوڭغا ماسلاشتۇرۇلغان .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>
ۋېرتىكال
ئىشلىتىشچانلىقى بىلەن ئەۋرىشىم تۈر يۆنىلىشىنى ئۆزگەرتىش ئارقىلىق يول باشلىشىڭىزنى تىزىڭ .flex-column
. ئۇلارنى بەزى مەنزىرىلىك جايلارغا تىزىش كېرەك ، ئەمما بەزىلىرىگە ئەمەس؟ ئىنكاسچان نەشرىنى ئىشلىتىڭ (مەسىلەن ، .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>
<ul>
ھەر ۋاقىتتىكىگە ئوخشاش ، تىك يول باشلاشمۇ s بولمىسا مۇمكىن .
<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>
بەتكۈچ
ئاساسىي nav نى يۇقىرىدىن ئېلىپ ، .nav-tabs
سىنىپ قوشۇپ ، بەتكۈچ كۆرۈنمە يۈزى ھاسىل قىلىدۇ. ئۇلارنى ئىشلىتىپ بىزنىڭ بەتكۈچ JavaScript قىستۇرمىسى بىلەن جەدۋەللىك رايون قۇرالايسىز .
<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
ئوخشاش HTML نى ئېلىڭ ، ئەمما .nav-pills
ئۇنىڭ ئورنىغا ئىشلىتىڭ:
<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>
تولدۇرۇڭ ۋە ئاقلاڭ
مەزمۇنلىرىڭىزنى .nav
ئىككى ئۆزگەرگۈچى سىنىپنىڭ تولۇق كەڭلىكىنى كېڭەيتىشكە زورلاڭ. بارلىق بوشلۇقنى .nav-item
s بىلەن ماس ھالدا تولدۇرۇش ئۈچۈن ئىشلىتىڭ .nav-fill
. بارلىق گورىزونتال بوشلۇقنىڭ ئىگىلىۋېلىنغانلىقىغا دىققەت قىلىڭ ، ئەمما ھەر بىر دېڭىز تۈرىنىڭ كەڭلىكى ئوخشاش بولمايدۇ.
<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>
ئاساسلانغان يول باشلاشنى ئىشلەتكەندە ، پەقەت ئۇسلۇب ئېلېمېنتلىرىغا ئېھتىياجلىق بولغاچقا <nav>
، بىخەتەر ھالدا تاشلىۋېتەلەيسىز ..nav-item
.nav-link
<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>
تەڭ كەڭلىكتىكى ئېلېمېنتلارغا ئىشلىتىڭ .nav-justified
. بارلىق گورىزونتال بوشلۇقنى دېڭىز ئۇلىنىشى ئىگىلەيدۇ ، ئەمما .nav-fill
يۇقىرىقىلارغا ئوخشىمايدىغىنى ، ھەر بىر دېڭىز ئارمىيىسىنىڭ ئوخشاش كەڭلىكى بولىدۇ.
<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>
ئاساسلانغان يول باشلاش .nav-fill
ئارقىلىق مىسالغا ئوخشاش .<nav>
<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>
ئەۋرىشىم ئەسلىھەلىرى بىلەن ئىشلەش
ئەگەر ئىنكاسچان دېڭىز ئۆزگىرىشلىرىگە ئېھتىياجلىق بولسىڭىز ، بىر يۈرۈش ئەۋرىشىم قوراللارنى ئىشلىتىشنى ئويلاڭ . تېخىمۇ كۆپ سۆزلۈك بولسىمۇ ، بۇ مۇلازىمەتلەر ئىنكاس قايتۇرۇش نۇقتىسىدا تېخىمۇ چوڭ خاسلاشتۇرۇش بىلەن تەمىنلەيدۇ. تۆۋەندىكى مىسالدا ، بىزنىڭ دېڭىز ئارمىيىمىز ئەڭ تۆۋەن بۆسۈش ئېغىزىغا تىزىدۇ ، ئاندىن كىچىك بۆسۈشتىن باشلاپ بار بولغان كەڭلىكنى تولدۇرىدىغان گورىزونتال ئورۇنلاشتۇرۇشقا ماسلىشىدۇ.
<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>
قولايلىقلىقى توغرىسىدا
ناۋادا يولباشچى ستونى بىلەن تەمىنلىمەكچى بولسىڭىز ، چوقۇم role="navigation"
ئەڭ لوگىكىلىق ئانا قاچىسىغا بىرنى قوشۇڭ <ul>
ياكى <nav>
پۈتكۈل يولباشچىغا بىر ئېلېمېنتنى ئوراپ بېرىڭ. رولنى ئۆزىگە قوشماڭ <ul>
، چۈنكى بۇ ئۇنىڭ ياردەمچى تېخنىكا ئارقىلىق ئەمەلىي تىزىملىك سۈپىتىدە ئېلان قىلىنىشىنىڭ ئالدىنى ئالىدۇ.
.nav-tabs
شۇنىڭغا دىققەت قىلىڭكى ، يولباشچى تاياقچە كۆرۈنۈشتە سىنىپ بىلەن بەتكۈچ شەكلىدە كۆرۈنسىمۇ ، بېرىلمەسلىكى كېرەك . بۇلار پەقەت WAI ARIA ئاپتور ئەمەلىيىتىدە تەسۋىرلەنگەندەك ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزىگە ماس كېلىدۇ . بۇ بۆلەكتىكى ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزى ئۈچۈن JavaScript ھەرىكىتىنى كۆرۈڭ . JavaScript ئاكتىپ بەتكۈچكە قوشۇش ئارقىلىق تاللانغان ھالەتنى بىر تەرەپ قىلىدىغان بولغاچقا ، ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزىدە بۇ خاسلىق لازىم ئەمەس .role="tablist"
role="tab"
role="tabpanel"
aria-current
aria-selected="true"
تامچە ئىشلىتىش
ئازراق قوشۇمچە HTML ۋە ئېسىلما JavaScript قىستۇرمىسى بىلەن تىزىملىك تىزىملىكىنى قوشۇڭ .
تارتما تىزىملىكلەر
<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>
تۆۋەنگە چۈشكەن دورىلار
<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>
Sass
ئۆزگەرگۈچى مىقدار
$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 ھەرىكىتى
بەتكۈچ JavaScript قىستۇرمىسىنى ئىشلىتىڭ ، ئۇنى ئايرىم ياكى تۈزۈلگەن bootstrap.js
ھۆججەت ئارقىلىق ئۆز ئىچىگە ئالىدۇ.
WAI ARIA ئاپتورلۇق ئەمەلىيىتىدە تەسۋىرلەنگەن ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزى ، role="tablist"
قۇرۇلما role="tab"
، ئىقتىدار ۋە ھازىرقى ھالىتىنى ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە (ئېكران ئوقۇرمەنلىرى دېگەندەك) يەتكۈزۈش ئۈچۈن تەلەپ قىلىدۇ role="tabpanel"
ۋە قوشۇمچە خاسلىقلارنى تەلەپ قىلىدۇ. aria-
ئەڭ ياخشى ئەمەلىيەت <button>
سۈپىتىدە ، بەتكۈچكە ئېلېمېنت ئىشلىتىشنى تەۋسىيە قىلىمىز ، چۈنكى بۇلار يېڭى بەت ياكى ئورۇنغا يۆتكىلىدىغان ئۇلىنىش بولماستىن ، بەلكى ھەرىكەتچان ئۆزگىرىش پەيدا قىلىدىغان كونتروللار.
شۇنىڭغا دىققەت قىلىڭكى ، ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزىدە تامچە تىزىملىك بولماسلىقى كېرەك ، چۈنكى بۇ ھەم ئىشلىتىشچانلىقى ۋە ئىشلىتىشچانلىقى مەسىلىسىنى كەلتۈرۈپ چىقىرىدۇ. ئىشلىتىش نۇقتىسىدىن قارىغاندا ، نۆۋەتتە كۆرسىتىلگەن بەتكۈچنىڭ قوزغىتىش ئېلېمېنتى دەرھال كۆرۈنمەيدۇ (ئۇ يېپىق تىزىملىك تىزىملىكىدە) قالايمىقانچىلىق كەلتۈرۈپ چىقىرىدۇ. زىيارەت قىلىش نۇقتىسىدىن ئېلىپ ئېيتقاندا ، ھازىر بۇ خىل قۇرۇلۇشنى ئۆلچەملىك WAI ARIA ئەندىزىسىگە سىزىشنىڭ ئاقىلانە ئۇسۇلى يوق ، يەنى ياردەم تېخنىكىسىنى ئىشلەتكۈچىلەرگە ئاسان چۈشىنىشكە بولمايدۇ.
بۇ باش بەتكۈچنىڭ مۇناسىۋەتلىك مەزمۇنلىرى. باشقا بىر بەتكۈچنى چەكسىڭىز ، ئۇنىڭ كېيىنكىسىنىڭ كۆرۈنۈشچانلىقىنى ئۆزگەرتىدۇ. بەتكۈچ JavaScript دەرس ئالماشتۇرۇپ مەزمۇننىڭ كۆرۈنۈشچانلىقى ۋە ئۇسلۇبىنى كونترول قىلىدۇ. ئۇنى بەتكۈچ ، دورا ۋە باشقا .nav
كۈچلۈك يول باشلاش ئارقىلىق ئىشلىتەلەيسىز.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the 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>
ئېھتىياجىڭىزغا ماسلىشىش ئۈچۈن ، بۇ <ul>
يۇقىرىدا كۆرسىتىلگەندەك ئاساسلانغان بەلگە ياكى خالىغانچە «ئۆزىڭىزنى دومىلىتىڭ» بەلگىسى بىلەن ئىشلەيدۇ. شۇنىڭغا دىققەت قىلىڭكى ، ئەگەر ئىشلىتىۋاتقان <nav>
بولسىڭىز ، ئۇنىڭغا بىۋاسىتە قوشماسلىقىڭىز كېرەك role="tablist"
، چۈنكى بۇ ئېلېمېنتنىڭ يول باشلاش بەلگىسى رولىنى ئوينايدۇ. ئۇنىڭ ئورنىغا باشقا بىر ئېلېمېنتقا ئالماشتۇرۇڭ (تۆۋەندىكى مىسالدا ، ئاددىي <div>
) ھەمدە ئۇنى ئوراپ <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>
بەتكۈچ قىستۇرمىسى دورىلار بىلەنمۇ ئىشلەيدۇ.
بۇ باش بەتكۈچنىڭ مۇناسىۋەتلىك مەزمۇنلىرى. باشقا بىر بەتكۈچنى چەكسىڭىز ، ئۇنىڭ كېيىنكىسىنىڭ كۆرۈنۈشچانلىقىنى ئۆزگەرتىدۇ. بەتكۈچ JavaScript دەرس ئالماشتۇرۇپ مەزمۇننىڭ كۆرۈنۈشچانلىقى ۋە ئۇسلۇبىنى كونترول قىلىدۇ. ئۇنى بەتكۈچ ، دورا ۋە باشقا .nav
كۈچلۈك يول باشلاش ئارقىلىق ئىشلىتەلەيسىز.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the 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>
ھەمدە تىك دورىلار بىلەن.
بۇ باش بەتكۈچنىڭ مۇناسىۋەتلىك مەزمۇنلىرى. باشقا بىر بەتكۈچنى چەكسىڭىز ، ئۇنىڭ كېيىنكىسىنىڭ كۆرۈنۈشچانلىقىنى ئۆزگەرتىدۇ. بەتكۈچ JavaScript دەرس ئالماشتۇرۇپ مەزمۇننىڭ كۆرۈنۈشچانلىقى ۋە ئۇسلۇبىنى كونترول قىلىدۇ. ئۇنى بەتكۈچ ، دورا ۋە باشقا .nav
كۈچلۈك يول باشلاش ئارقىلىق ئىشلىتەلەيسىز.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the 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-bs-toggle="tab"
سىز پەقەت بىر ئېلېمېنت ياكى ئېلېمېنت ئارقىلىق JavaScript يازمايلا بەتكۈچ ياكى دورا يول باشلاشنى قوزغىتالايسىز data-bs-toggle="pill"
. بۇ سانلىق مەلۇمات خاسلىقىنى .nav-tabs
ياكى .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>
JavaScript ئارقىلىق
JavaScript ئارقىلىق جەدۋەل بەتكۈچلىرىنى قوزغىتىڭ (ھەر بىر بەتكۈچنى ئايرىم قوزغىتىش كېرەك):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
يەككە بەتكۈچلەرنى بىر قانچە خىل ئۇسۇلدا قوزغىتالايسىز:
var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
سۇس ئۈنۈم
بەتكۈچلەرنى سۇسلاشتۇرۇش ئۈچۈن ، .fade
ھەر بىرىگە قوشۇڭ .tab-pane
. بىرىنچى بەتكۈچ تاختىسىمۇ .show
دەسلەپكى مەزمۇننى كۆرۈنۈشى كېرەك.
<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
ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى
بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .
constructor
بەتكۈچ ئېلېمېنتى ۋە مەزمۇن قاچىسىنى قوزغىتىدۇ. بەتكۈچتە DOM دىكى قاچا تۈگۈنىنى نىشانلىغان data-bs-target
ئۇلىنىش ياكى href
خاسلىق ئىشلىتىلىشى كېرەك.
<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 button')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
show
بېرىلگەن بەتكۈچنى تاللايدۇ ۋە مۇناسىۋەتلىك تاختىنى كۆرسىتىدۇ. ئىلگىرى تاللانغان باشقا بەتكۈچلەر تاللانمايدۇ ۋە ئۇنىڭغا مۇناسىۋەتلىك كۆزنەك يوشۇرۇنغان. بەتكۈچ تاختىسى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.tab
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
بىر تەرەپ قىلىش
ئېلېمېنتنىڭ بەتكۈچىنى بۇزىدۇ.
getInstance
تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن مۇناسىۋەتلىك بەتكۈچ مىسالىغا ئېرىشەلەيسىز
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن مۇناسىۋەتلىك بەتكۈچ ئۈلگىسىنى ئالالايسىز ياكى باشلانمىغان ئەھۋالدا يېڭىسىنى قۇرالايسىز.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Events
يېڭى بەتكۈچنى كۆرسەتكەندە ، ۋەقەلەر تۆۋەندىكى تەرتىپ بويىچە ئوت ئالىدۇ:
hide.bs.tab
(نۆۋەتتىكى ئاكتىپ بەتكۈچتە)show.bs.tab
(كۆرسىتىلىدىغان بەتكۈچتە)hidden.bs.tab
(ئالدىنقى ئاكتىپ بەتكۈچتە ،hide.bs.tab
پائالىيەت بىلەن ئوخشاش)shown.bs.tab
(يېڭىدىن ئاكتىپلانغان ئەمدىلا كۆرسىتىلگەن بەتكۈچتە ،show.bs.tab
پائالىيەت بىلەن ئوخشاش)
ئەگەر ھېچقانداق بەتكۈچ ئاكتىپلانمىغان بولسا ، ئۇنداقتا hide.bs.tab
ۋە hidden.bs.tab
ۋەقەلەر ئېتىلمايدۇ.
پائالىيەت تىپى | چۈشەندۈرۈش |
---|---|
show.bs.tab |
بۇ پائالىيەت بەتكۈچ كۆرگەزمىسىدە ئوت ئاچىدۇ ، ئەمما يېڭى بەتكۈچ كۆرسىتىلىشتىن بۇرۇن. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.target ۋە نىشانلاڭ.event.relatedTarget |
shown.bs.tab |
بۇ ھادىسە بەتكۈچ كۆرسىتىلگەندىن كېيىن بەتكۈچتە كۆرۈنىدۇ. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.target ۋە نىشانلاڭ.event.relatedTarget |
hide.bs.tab |
يېڭى بەتكۈچ كۆرۈنگەندە بۇ ھادىسە ئوت ئاپىتى يۈز بېرىدۇ (شۇنداق قىلىپ ئالدىنقى ئاكتىپ بەتكۈچ يوشۇرۇن بولىدۇ). نۆۋەتتىكى ئاكتىپ بەتكۈچ ۋە يېڭى پات يېقىندا ئاكتىپلىنىدىغان بەتكۈچنى ئىشلىتىڭ event.target ۋە نىشانلاڭ.event.relatedTarget |
hidden.bs.tab |
بۇ ھادىسە يېڭى بەتكۈچ كۆرسىتىلگەندىن كېيىن ئوت ئاتىدۇ (شۇنداق قىلىپ ئالدىنقى ئاكتىپ بەتكۈچ يوشۇرۇنغان). ئالدىنقى ئاكتىپ بەتكۈچ ۋە يېڭى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.target ۋە 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
})