ناۋرىز

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

Base nav

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

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

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

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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. بارلىق گورىزونتال بوشلۇقنىڭ ئىگىلىۋېلىنغانلىقىغا دىققەت قىلىڭ ، ئەمما ھەر بىر دېڭىز تۈرىنىڭ كەڭلىكى ئوخشاش بولمايدۇ.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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شۇنىڭغا دىققەت قىلىڭكى ، يولباشچى تاياقچە كۆرۈنۈشتە سىنىپ بىلەن بەتكۈچ شەكلىدە كۆرۈنسىمۇ ، بېرىلمەسلىكى كېرەك . بۇلار پەقەت ARIA ئاپتورلۇق مەشغۇلات قوللانمىسى بەتكۈچ ئەندىزىسىدە تەسۋىرلەنگەندەك ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزىگە ماس كېلىدۇ . بۇ بۆلەكتىكى ھەرىكەتچان بەتكۈچ كۆرۈنمە يۈزى ئۈچۈن JavaScript ھەرىكىتىنى كۆرۈڭ .role="tablist"role="tab"role="tabpanel"

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

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

JavaScript ھەرىكىتى

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

ئەگەر JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇutil.js .

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

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

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

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

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>بېقىڭ.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>

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

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

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

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

data-toggle="tab"سىز پەقەت بىر ئېلېمېنت ياكى ئېلېمېنت ئارقىلىق JavaScript يازمايلا بەتكۈچ ياكى دورا يول باشلاشنى قوزغىتالايسىز data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 ئارقىلىق جەدۋەل بەتكۈچلىرىنى قوزغىتىڭ (ھەر بىر بەتكۈچنى ئايرىم قوزغىتىش كېرەك):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 ھۆججىتىمىزنى كۆرۈڭ .

$ (). بەتكۈچ

بەتكۈچ ئېلېمېنتى ۋە مەزمۇن قاچىسىنى قوزغىتىدۇ. بەتكۈچتە data-targetياكى ياكى ئۇلىنىش ئىشلىتىۋاتقان بولسا href، DOM دىكى قاچا تۈگۈنىنى نىشانلىغان خاسلىق بولۇشى كېرەك.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab ('show')

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

$('#someTab').tab('show')

.tab ('dispose')

ئېلېمېنتنىڭ بەتكۈچىنى بۇزىدۇ.

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`نىشانلاڭ.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})