يول ۋە بەتكۈچ

Bootstrap نىڭ يول باشلاش زاپچاسلىرىنى قانداق ئىشلىتىش توغرىسىدىكى ھۆججەتلەر ۋە مىساللار.

بۇ بەتتە

Base nav

Bootstrap دىكى يول باشلاش ئاساسى .navسىنىپتىن ئاكتىپ ۋە مېيىپ ھالەتلەرگىچە بولغان ئومۇمىي بەلگە ۋە ئۇسلۇبلارنى ئورتاقلىشىدۇ. ھەر بىر ئۇسلۇبنى ئالماشتۇرۇش ئۈچۈن ئۆزگەرتىش سىنىپى ئالماشتۇرۇڭ.

ئاساسى .navزاپچاس ئەۋرىشىم ساندۇق بىلەن ياسالغان بولۇپ ، ھەر خىل يول باشلاش زاپچاسلىرىنى ياساشقا كۈچلۈك ئاساس بىلەن تەمىنلەيدۇ. ئۇ بىر قىسىم ئۇسلۇب قاپلاش (تىزىملىك بىلەن ئىشلەش ئۈچۈن) ، چوڭراق زەربە بېرىلگەن رايونلارغا ئۇلىنىش ئۇلاش ۋە ئاساسىي مېيىپ ئۇسلۇبنى ئۆز ئىچىگە ئالىدۇ.

ئاساسى .navزاپچاس ھېچقانداق دۆلەتنى ئۆز ئىچىگە ئالمايدۇ .active. تۆۋەندىكى مىساللار دەرسنى ئۆز ئىچىگە ئالىدۇ ، ئاساسلىقى بۇ ئالاھىدە سىنىپنىڭ ھېچقانداق ئالاھىدە ئۇسلۇبنى قوزغاتمايدىغانلىقىنى كۆرسىتىپ بېرىدۇ.

ئاكتىپ ھالەتنى ياردەمچى تېخنىكىلارغا يەتكۈزۈش ئۈچۈن ، aria-currentخاسلىقنى ئىشلىتىڭ - pageنۆۋەتتىكى بەتنىڭ قىممىتىنى ياكى trueبىر يۈرۈش نۆۋەتتىكى تۈرنى ئىشلىتىڭ.

html

<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 تۈرلىرىگە ئوخشاش ھەرىكەت قىلىدۇ ، ئەمما ئارتۇقچە بەلگە قويمايدۇ.

html

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

html

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

html

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

html

<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 بولمىسا مۇمكىن .

html

<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 قىستۇرمىسى بىلەن جەدۋەللىك رايون قۇرالايسىز .

html

<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ئۇنىڭ ئورنىغا ئىشلىتىڭ:

html

<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-items بىلەن ماس ھالدا تولدۇرۇش ئۈچۈن ئىشلىتىڭ .nav-fill. بارلىق گورىزونتال بوشلۇقنىڭ ئىگىلىۋېلىنغانلىقىغا دىققەت قىلىڭ ، ئەمما ھەر بىر دېڭىز تۈرىنىڭ كەڭلىكى ئوخشاش بولمايدۇ.

html

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

html

<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يۇقىرىقىلارغا ئوخشىمايدىغىنى ، ھەر بىر دېڭىز ئارمىيىسىنىڭ ئوخشاش كەڭلىكى بولىدۇ.

html

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

html

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

ئەۋرىشىم ئەسلىھەلىرى بىلەن ئىشلەش

ئەگەر ئىنكاسچان دېڭىز ئۆزگىرىشلىرىگە ئېھتىياجلىق بولسىڭىز ، بىر يۈرۈش ئەۋرىشىم قوراللارنى ئىشلىتىشنى ئويلاڭ . تېخىمۇ كۆپ سۆزلۈك بولسىمۇ ، بۇ مۇلازىمەتلەر ئىنكاس قايتۇرۇش نۇقتىسىدا تېخىمۇ چوڭ خاسلاشتۇرۇش بىلەن تەمىنلەيدۇ. تۆۋەندىكى مىسالدا ، بىزنىڭ دېڭىز ئارمىيىمىز ئەڭ تۆۋەن بۆسۈش ئېغىزىغا تىزىدۇ ، ئاندىن كىچىك بۆسۈشتىن باشلاپ بار بولغان كەڭلىكنى تولدۇرىدىغان گورىزونتال ئورۇنلاشتۇرۇشقا ماسلىشىدۇ.

html

<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>ياكى a نى ئوراپ بېقىڭ.<nav> پۈتكۈل يولباشچىغا ئېلېمېنت ئوراپ بېرىڭ. رولنى ئۆزىگە قوشماڭ <ul>، چۈنكى بۇ ئۇنىڭ ياردەمچى تېخنىكا ئارقىلىق ئەمەلىي تىزىملىك سۈپىتىدە ئېلان قىلىنىشىنىڭ ئالدىنى ئالىدۇ.

.nav-tabsشۇنىڭغا دىققەت قىلىڭكى ، يولباشچى تاياقچە كۆرۈنۈشتە سىنىپ بىلەن بەتكۈچ شەكلىدە كۆرۈنسىمۇ ، بېرىلمەسلىكى كېرەك . بۇلار پەقەت ARIA ئاپتورلۇق مەشغۇلات قوللانمىسى بەتكۈچ ئەندىزىسىدە تەسۋىرلەنگەندەك ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزىگە ماس كېلىدۇ . بۇ بۆلەكتىكى ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزى ئۈچۈن JavaScript ھەرىكىتىنى كۆرۈڭ . Therole="tablist"role="tab"role="tabpanel"aria-currentJavaScript ئاكتىپ بەتكۈچكە قوشۇش ئارقىلىق تاللانغان ھالەتنى بىر تەرەپ قىلىدىغان بولغاچقا ، ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزىدەaria-selected="true" خاسلىق لازىم ئەمەس .

تامچە ئىشلىتىش

ئازراق قوشۇمچە HTML ۋە ئېسىلما JavaScript قىستۇرمىسى بىلەن تىزىملىك تىزىملىكىنى قوشۇڭ بىلەن تىزىملىك تىزىملىكىنى قوشۇڭ .

تارتما تىزىملىكلەر

html

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

تۆۋەنگە چۈشكەن دورىلار

html

<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

ئۆزگەرگۈچى مىقدار

V5.2.0 گە قوشۇلدى

.navBootstrap نىڭ تەرەققىي قىلىۋاتقان CSS ئۆزگەرگۈچى مىقدارنىڭ بىر قىسمى بولۇش سۈپىتى بىلەن ، دېڭىز ئارمىيىسى ھازىر يەرلىك CSS ئۆزگەرگۈچى مىقدارنى ئىشلىتىدۇ .nav-tabsھەمدە .nav-pillsئەمەلىيلەشتۈرۈشنى كۈچەيتىدۇ. CSS ئۆزگەرگۈچى مىقدارنىڭ قىممىتى Sass ئارقىلىق بەلگىلىنىدۇ ، شۇڭا Sass خاسلاشتۇرۇش يەنىلا قوللىنىدۇ.

ئاساسى .navسىنىپتا:

  --#{$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};

ئۆزگەرتكۈچ .nav-tabsسىنىپىدا:

  --#{$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};

ئۆزگەرتكۈچ .nav-pillsسىنىپىدا:

  --#{$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};

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;

JavaScript ھەرىكىتى

بەتكۈچ JavaScript قىستۇرمىسىنى ئىشلىتىڭ ، ئۇنى ئايرىم ياكى تۈزۈلگەن bootstrap.jsھۆججەت ئارقىلىق ئۆز ئىچىگە ئالىدۇ.

بۇ باش بەتكۈچنىڭ مۇناسىۋەتلىك مەزمۇنلىرى. باشقا بىر بەتكۈچنى چەكسىڭىز ، ئۇنىڭ كېيىنكىسىنىڭ كۆرۈنۈشچانلىقىنى ئۆزگەرتىدۇ. بەتكۈچ 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.

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>

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

This is some placeholder content the Disabled tab's associated content.

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

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

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>

ھەمدە تىك دورىلار بىلەن. aria-orientation="vertical"ئەڭ ياخشىسى ، تىك بەتكۈچ ئۈچۈن ، بەتكۈچ تىزىملىكى قاچىسىغا قوشۇشىڭىز كېرەك .

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>

قولايلىق

ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزى ، ARIA ئاپتورلۇق مەشغۇلات قوللانمىسى بەتكۈچ ئەندىزىسىدە تەسۋىرلەنگەندەك ، ئۇلارنىڭ قۇرۇلمىسى ، ئىقتىدارى ۋە ھازىرقى ھالىتىنى ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە (ئېكران ئوقۇغۇچىلىرىغا ئوخشاش) يەتكۈزۈش ئۈچۈن ، تەلەپ ۋە قوشۇمچە خاسلىقلارنى role="tablist"تەلەپ قىلىدۇ . ئەڭ ياخشى ئەمەلىيەت سۈپىتىدە ، بەتكۈچكە ئېلېمېنت ئىشلىتىشنى تەۋسىيە قىلىمىز ، چۈنكى بۇلار يېڭى بەت ياكى ئورۇنغا يۆتكىلىدىغان ئۇلىنىش بولماستىن ، بەلكى ھەرىكەتچان ئۆزگىرىش پەيدا قىلىدىغان كونتروللار.role="tab"role="tabpanel"aria-<button>

ARIA ئاپتورلۇق مەشغۇلات ئەندىزىسىگە ئاساسەن ، پەقەت نۆۋەتتىكى ئاكتىپ بەتكۈچلا كۇنۇپكا تاختىسىنى قوبۇل قىلىدۇ. JavaScript قىستۇرمىسى قوزغالغاندا ، ئۇ tabindex="-1"بارلىق ئاكتىپسىز بەتكۈچ كونتروللىرىغا ئورنىتىلىدۇ. نۆۋەتتىكى ئاكتىپ بەتكۈچ فوكۇسلانغاندىن كېيىن ، نۇر بەلگە كۇنۇپكىسى ئالدىنقى / كېيىنكى بەتكۈچنى قوزغىتىدۇ ، قىستۇرما ماس ھالدا يۆتكىلىشنىtabindex ئۆزگەرتىدۇ . قانداقلا بولمىسۇن ، نۇر بەلگىسىنىڭ ئۆز-ئارا تەسىر كۆرسىتىشىدە JavaScript قىستۇرمىسىنىڭ توغرىسىغا ۋە تىك بەتكۈچ تىزىملىكىنى پەرقلەندۈرەلمەيدىغانلىقىغا دىققەت قىلىڭ: بەتكۈچ تىزىملىكىنىڭ يۆنىلىشىنىڭ قانداق بولۇشىدىن قەتئىينەزەر ، ئۈستى ۋە سول نۇر بەلگە ئالدىنقى بەتكۈچكە ، ئاستى ۋە ئوڭ نۇر بەلگە يۆتكىلىدۇ. كېيىنكى بەتكۈچ.

ئادەتتە ، كۇنۇپكا تاختىسىنىڭ يول باشلىشىغا قۇلايلىق بولسۇن ئۈچۈن ، بەتكۈچ تاختىسىنىڭ ئىچىدە ئەھمىيەتلىك مەزمۇنلارنى ئۆز ئىچىگە ئالغان بىرىنچى ئېلېمېنت ئاللىقاچان فوكۇسلانغان بولمىسىلا ، بەتكۈچ تاختىسىنى ئۆزىمۇ فوكۇس توغرىلاش تەۋسىيە قىلىنىدۇ. JavaScript قىستۇرمىسى بۇ تەرىپىنى بىر تەرەپ قىلىشقا ئۇرۇنمايدۇ ، ئەگەر مۇۋاپىق بولسا ، قوشۇش ئارقىلىق بەتكۈچ تاختىڭىزنى مۇھىم ئورۇنغا قويۇشىڭىز كېرەك. tabindex="0" بەلگە قوشۇش ئارقىلىق بەتكۈچ تاختىڭىزنى فوكۇس توغرىلاش كېرەك.

بەتكۈچ JavaScript قىستۇرمىسى يوق ، چۈنكى بۇلار ئىشلىتىشچانلىقى ۋە ئىشلىتىشچانلىقى مەسىلىسىنى كەلتۈرۈپ چىقىرىدۇ. ئىشلىتىش نۇقتىسىدىن قارىغاندا ، نۆۋەتتە كۆرسىتىلگەن بەتكۈچنىڭ قوزغىتىش ئېلېمېنتى دەرھال كۆرۈنمەيدۇ (ئۇ يېپىق تىزىملىك تىزىملىكىدە) قالايمىقانچىلىق كەلتۈرۈپ چىقىرىدۇ. زىيارەت قىلىش نۇقتىسىدىن ئېلىپ ئېيتقاندا ، ھازىر بۇ خىل قۇرۇلۇشنى ئۆلچەملىك WAI ARIA ئەندىزىسىگە سىزىشنىڭ ئاقىلانە ئۇسۇلى يوق ، يەنى ياردەم تېخنىكىسىنى ئىشلەتكۈچىلەرگە ئاسان چۈشىنىشكە بولمايدۇ.

سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش

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

JavaScript ئارقىلىق

JavaScript ئارقىلىق جەدۋەل بەتكۈچلىرىنى قوزغىتىڭ (ھەر بىر بەتكۈچنى ئايرىم قوزغىتىش كېرەك):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

سۇس ئۈنۈم

بەتكۈچلەرنى سۇسلاشتۇرۇش ئۈچۈن ، .fadeھەر بىرىگە قوشۇڭ .tab-pane. بىرىنچى بەتكۈچ تاختىسىمۇ .showدەسلەپكى مەزمۇننى كۆرۈنۈشى كېرەك.

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

Methods

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .

مەزمۇننى بەتكۈچ ئېلېمېنتى سۈپىتىدە قوزغىتىدۇ.

قۇرغۇچى بىلەن بەتكۈچ ئۈلگىسى قۇرالايسىز ، مەسىلەن:

const bsTab = new bootstrap.Tab('#myTab')

ئۇسۇل	چۈشەندۈرۈش
`dispose`	ئېلېمېنتنىڭ بەتكۈچىنى بۇزىدۇ.
`getInstance`	تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن مۇناسىۋەتلىك بەتكۈچ مىسالىغا ئېرىشەلەيسىز ، ئۇنى تۆۋەندىكىدەك ئىشلىتەلەيسىز : `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	تۇراقلىق ئۇسۇل DOM ئېلېمېنتىغا باغلانغان بەتكۈچ مىسالى قايتۇرىدۇ ياكى باشلانمىغان ئەھۋال ئاستىدا يېڭىسىنى قۇرالايدۇ. ئۇنى مۇنداق ئىشلىتەلەيسىز : `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	بېرىلگەن بەتكۈچنى تاللايدۇ ۋە مۇناسىۋەتلىك تاختىنى كۆرسىتىدۇ. ئىلگىرى تاللانغان باشقا بەتكۈچلەر تاللانمايدۇ ۋە ئۇنىڭغا مۇناسىۋەتلىك كۆزنەك يوشۇرۇنغان. بەتكۈچ تاختىسى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .`shown.bs.tab`

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ۋەقەلەر ئېتىلمايدۇ.

پائالىيەت تىپى	چۈشەندۈرۈش
`hide.bs.tab`	يېڭى بەتكۈچ كۆرۈنگەندە بۇ ھادىسە ئوت ئاپىتى يۈز بېرىدۇ (شۇنداق قىلىپ ئالدىنقى ئاكتىپ بەتكۈچ يوشۇرۇن بولىدۇ). نۆۋەتتىكى ئاكتىپ بەتكۈچ ۋە يېڭى پات يېقىندا ئاكتىپلىنىدىغان بەتكۈچنى ئىشلىتىڭ `event.target`ۋە نىشانلاڭ.`event.relatedTarget`
`hidden.bs.tab`	بۇ ھادىسە يېڭى بەتكۈچ كۆرسىتىلگەندىن كېيىن ئوت ئاتىدۇ (شۇنداق قىلىپ ئالدىنقى ئاكتىپ بەتكۈچ يوشۇرۇنغان). ئالدىنقى ئاكتىپ بەتكۈچ ۋە يېڭى ئاكتىپ بەتكۈچنى ئىشلىتىڭ `event.target`ۋە `event.relatedTarget`نىشانلاڭ.
`show.bs.tab`	بۇ پائالىيەت بەتكۈچ كۆرگەزمىسىدە ئوت ئاچىدۇ ، ئەمما يېڭى بەتكۈچ كۆرسىتىلىشتىن بۇرۇن. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ `event.target`ۋە نىشانلاڭ.`event.relatedTarget`
`shown.bs.tab`	بۇ ھادىسە بەتكۈچ كۆرسىتىلگەندىن كېيىن بەتكۈچتە كۆرۈنىدۇ. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ `event.target`ۋە نىشانلاڭ.`event.relatedTarget`

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