نيو ۽ ٽيب

Bootstrap جي شامل ڪيل نيويگيشن اجزاء کي ڪيئن استعمال ڪجي لاءِ دستاويز ۽ مثال.

هن صفحي تي

Base nav

بوٽ اسٽريپ ۾ موجود نيويگيشن شيئر جنرل مارڪ اپ ۽ اسلوب، بنيادي .navڪلاس کان وٺي فعال ۽ معذور رياستن تائين. هر انداز جي وچ ۾ مٽائڻ لاءِ مٽائيندڙ طبقن کي تبديل ڪريو.

بنيادي .navجزو flexbox سان ٺهيل آهي ۽ سڀني قسمن جي نيويگيشن اجزاء جي تعمير لاء هڪ مضبوط بنياد مهيا ڪري ٿو. ان ۾ شامل آھي ڪجھ انداز اوور رائڊز (فھرستن سان ڪم ڪرڻ لاءِ)، ڪجھ لنڪ پيڊنگ وڏن ھٽ وارن علائقن لاءِ، ۽ بنيادي معذور اسٽائلنگ.

بنيادي جزو ۾ ڪا به رياست .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 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 جزو جو انداز تبديل ڪريو . ملائي ۽ ملائي جيئن ضرورت هجي، يا پنهنجو پاڻ ٺاهيو.

افقي ترتيب

flexbox افاديت سان پنهنجي نيوي جي افقي ترتيب کي تبديل ڪريو . ڊفالٽ طور، نيوي کاٻي پاسي سان ترتيب ڏنل آهن، پر توهان آساني سان انهن کي تبديل ڪري سگهو ٿا مرڪز يا ساڄي طرف.

مرڪز سان .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-tabsڪلاس کي شامل ڪري ٿو هڪ ٽيب ٿيل انٽرفيس ٺاهي. اسان جي ٽيب جاوا اسڪرپٽ پلگ ان سان ٽيبلبل علائقا ٺاهڻ لاءِ انھن کي استعمال ڪريو .

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

گوليون

اهو ساڳيو 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-itemجي s سان تمام موجود جڳهه ڀرڻ لاءِ، استعمال ڪريو .nav-fill. نوٽ ڪريو ته تمام افقي جڳهه تي قبضو ڪيو ويو آهي، پر هر نيوي شيون هڪ ئي ويڪر ناهي.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" 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>

فليڪس افاديت سان ڪم ڪرڻ

جيڪڏهن توهان کي ضرورت آهي جوابي نيوي جي مختلف تبديلين، استعمال ڪرڻ تي غور ڪريو flexbox افاديت جو هڪ سلسلو . جڏهن ته وڌيڪ لفظي، اهي افاديت پيش ڪن ٿيون وڌيڪ ڪسٽمائيزيشن جوابي بريڪ پوائنٽس ۾. هيٺ ڏنل مثال ۾، اسان جي نيوي کي تمام گھٽ بريڪ پوائنٽ تي اسٽيڪ ڪيو ويندو، پوءِ افقي ترتيب سان ٺاھ ٺاھيو جيڪو ننڍي بريڪ پوائنٽ کان شروع ٿيندڙ موجود ويڪر کي پورو ڪري.

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

پهچ جي حوالي سان

جيڪڏھن توھان نيويگيشن بار مهيا ڪرڻ لاءِ navs استعمال ڪري رھيا آھيو، پڪ ڪريو ته ھڪ کي شامل ڪريو role="navigation"سڀ کان وڌيڪ منطقي پرينٽ ڪنٽينر ۾ <ul>، يا ھڪڙي <nav>عنصر کي پوري نيويگيشن جي چوڌاري لپيٽيو. ڪردار کي پاڻ ۾ شامل نه ڪريو <ul>، ڇاڪاڻ ته اهو ان کي مددگار ٽيڪنالاجي جي حقيقي فهرست طور اعلان ٿيڻ کان روڪيندو.

نوٽ ڪريو ته نيويگيشن بار، جيتوڻيڪ بصري انداز ۾ .nav-tabsڪلاس سان ٽيب طور، نه ڏنو وڃي role="tablist"، role="tab"يا role="tabpanel"خاصيتون. اهي صرف متحرڪ ٽئب ٿيل انٽرفيس لاءِ مناسب آهن، جيئن WAI ARIA Authoring Practices ۾ بيان ڪيو ويو آهي . ڏسو جاوا اسڪرپٽ رويي لاء متحرڪ ٽيب ٿيل انٽرفيس لاء هن حصي ۾ مثال لاء. متحرڪ ٽيب ٿيل انٽرفيس تي aria-currentخاصيت ضروري ناهي ڇو ته اسان جي جاوا اسڪرپٽ aria-selected="true"فعال ٽيب تي شامل ڪندي چونڊيل رياست کي سنڀاليندو آهي.

ڊراپ ڊائونز استعمال ڪندي

شامل ڪريو ڊراپ ڊائون مينيو ٿورڙو اضافي 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" 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>

ساس

متغير

$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>ٿو-based مارڪ اپ سان، جيئن مٿي ڏيکاريل آھي، يا ڪنھن صوابديدي ”پنھنجو پنھنجو“ مارڪ اپ سان. نوٽ ڪريو ته جيڪڏھن توھان استعمال ڪري رھيا آھيو <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"يا 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>

جاوا اسڪرپٽ ذريعي

جاوا اسڪرپٽ ذريعي ٽيبلبل ٽيب کي فعال ڪريو (هر ٽيب کي انفرادي طور تي چالو ڪرڻ جي ضرورت آهي):

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>

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا JavaScript دستاويز ڏسو .

constructor

هڪ ٽيب عنصر ۽ مواد ڪنٽينر کي چالو ڪري ٿو. ٽيب کي يا ته هجڻ گهرجي data-bs-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-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>

ڏيکارڻ

ڏنل ٽيب چونڊيو ۽ ان سان لاڳاپيل پين ڏيکاري ٿو. ٻيو ڪو به ٽيب جيڪو اڳ ۾ چونڊيو ويو هو غير منتخب ٿيل آهي ۽ ان سان لاڳاپيل پين لڪيل آهي. ڪالر ڏانهن واپسي ان کان اڳ جو ٽيب پين اصل ۾ ڏيکاريو ويو آهي (يعني 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

واقعا

جڏهن هڪ نئين ٽيب ڏيکاريندي، واقعا هيٺ ڏنل ترتيب ۾ باهه لڳندا آهن:

hide.bs.tab(موجوده فعال ٽيب تي)
show.bs.tab(ڏسڻ واري ٽيب تي)
hidden.bs.tab(اڳوڻي فعال ٽيب تي، ساڳيو ئي hide.bs.tabواقعي جي لاءِ)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

Event type	Description
`show.bs.tab`	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`shown.bs.tab`	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`hide.bs.tab`	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
`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
})