Source

ناۋرىز

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" 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" 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" 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" 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" 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" 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" 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" 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" 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 class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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-itemكىرگۈزۈڭ.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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" 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 ھەرىكىتىنى كۆرۈڭ .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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

JavaScript ھەرىكىتى

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

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

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

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

خام رەقەم بەلكىم سىز ئۇلارنىڭ قىسقا كالتە ئىشتاننى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن. Nesciunt tofu stumptown aliqua, retro synth master cleanse. بۇرۇتنى ۋاقىتلىق بېسىش ، ۋىليامسبۇرگ كارلېس گۆشسىز قۇتقۇزۇش ماشىنىسى. Reprehenderit قاسساپ retro keffiyeh dreamcatcher synth. Cosby swater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan ئامېرىكىلىق كىيىم-كېچەك ، قاسساپ ۋولۇپات نىسى كۇ.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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>

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

ئاقىۋەت ئۇكام ئۇللامكو ئامېت non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud چېنىقىش proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud ۋېنىئام ئېلانىدا لوڭقا ئولتۇرىدۇ. Eiusmod ئاقىۋەت eu adipisising minim anim aliquip cupidatat culpa excepteur quis. Occaecat ئولتۇرۇش eu چېنىقىش irore Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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>

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

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. ئوكسات تاۋارلىرىدىكى ئىپسۇم دولور ۋە ئەڭ تۆۋەن دەرىجىدىكى رېپېندېرت موللىت پارىيات. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

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

$ (). بەتكۈچ

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').tab('show')
  })
</script>

.tab ('show')

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

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

.tab ('dispose')

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

Events

��ېڭى بەتكۈچنى كۆرسەتكەندە ، ۋەقەلەر تۆۋەندىكى تەرتىپ بويىچە ئوت ئالىدۇ:

  1. hide.bs.tab(نۆۋەتتىكى ئاكتىپ بەتكۈچتە)
  2. show.bs.tab(كۆرسىتىلىدىغان بەتكۈچتە)
  3. hidden.bs.tab(ئالدىنقى ئاكتىپ بەتكۈچتە ، hide.bs.tabپائالىيەت بىلەن ئوخشاش)
  4. 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نىشانلاڭ. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})