يول ۋە بەتكۈچ

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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

تولدۇرۇڭ ۋە ئاقلاڭ

مەزمۇنلىرىڭىزنى .navئىككى ئۆزگەرگۈچى سىنىپنىڭ تولۇق كەڭلىكىنى كېڭەيتىشكە زورلاڭ. بارلىق بوشلۇقنى .nav-items بىلەن ماس ھالدا تولدۇرۇش ئۈچۈن ئىشلىتىڭ .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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

قولايلىقلىقى توغرىسىدا

ناۋادا يولباشچى ستونى بىلەن تەمىنلىمەكچى بولسىڭىز ، چوقۇم role="navigation"ئەڭ لوگىكىلىق ئانا قاچىسىغا بىرنى قوشۇڭ <ul>ياكى <nav>پۈتكۈل يولباشچىغا بىر ئېلېمېنتنى ئوراپ بېرىڭ. رولنى ئۆزىگە قوشماڭ <ul>، چۈنكى بۇ ئۇنىڭ ياردەمچى تېخنىكا ئارقىلىق ئەمەلىي تىزىملىك سۈپىتىدە ئېلان قىلىنىشىنىڭ ئالدىنى ئالىدۇ.

شۇنىڭغا دىققەت قىلىڭكى ، يولباشچى ستونى كۆرۈنۈشتە .nav-tabsسىنىپ بىلەن بەتكۈچ شەكلىدە يېزىلغان تەقدىردىمۇ ، ياكى خاسلىق بېرىلمەسلىكى كېرەك . بۇلار پەقەت WAI ARIA ئاپتور ئەمەلىيىتىدە تەسۋىرلەنگەندەك ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزىگە ماس كېلىدۇ . بۇ بۆلەكتىكى ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزى ئۈچۈن JavaScript ھەرىكىتىنى كۆرۈڭ . ھەرىكەتچان بەتكۈچ ئارايۈزىدە خاسلىق لازىم ئەمەس ، چۈنكى بىزنىڭ JavaScript ئاكتىپ بەتكۈچكە قوشۇش ئارقىلىق تاللانغان ھالەتنى بىر تەرەپ قىلىدۇ .role="tablist"role="tab"role="tabpanel" aria-currentaria-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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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>

بەتكۈچ قىستۇرمىسى دورىلار بىلەنمۇ ئىشلەيدۇ.

<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>

ھەمدە تىك دورىلار بىلەن.

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 a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

يەككە بەتكۈچلەرنى بىر قانچە خىل ئۇسۇلدا قوزغىتالايسىز:

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

سۇس ئۈنۈم

بەتكۈچلەرنى سۇسلاشتۇرۇش ئۈچۈن ، .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 a')
  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
})