نيوي ۽ ٽيب

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

هن صفحي تي

بنيادي نيٽ ورڪ

بوٽ اسٽريپ ۾ موجود نيويگيشن شيئر جنرل مارڪ اپ ۽ اسلوب، بنيادي .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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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 button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

توھان ڪيترن ئي طريقن سان انفرادي ٽيب کي چالو ڪري سگھو ٿا:

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var 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">...</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 button')
  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(نئين-فعال صرف ڏيکاريل ٽيب تي، ساڳي ئي show.bs.tabواقعي جي لاءِ)

جيڪڏهن ڪو به ٽيب اڳ ۾ ئي فعال نه هو، ته پوءِ hide.bs.tab۽ hidden.bs.tabواقعا فائر نه ڪيا ويندا.

واقعي جو قسم	وصف
`show.bs.tab`	هي واقعو ٽيب شو تي فائر ڪري ٿو، پر ان کان اڳ جو نئون ٽيب ڏيکاريو ويو آهي. استعمال ڪريو `event.target`۽ `event.relatedTarget`ھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي) ترتيب وار.
`shown.bs.tab`	هي واقعو ٽيب شو تي فائر ٿئي ٿو هڪ ٽيب ڏيکاريو ويو آهي. استعمال ڪريو `event.target`۽ `event.relatedTarget`ھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي) ترتيب وار.
`hide.bs.tab`	هي واقعو فائر ٿئي ٿو جڏهن هڪ نئين ٽيب کي ڏيکاريو وڃي (۽ اهڙيء طرح پوئين فعال ٽيب کي لڪايو وڃي). استعمال ڪريو `event.target`۽ `event.relatedTarget`ھدف ڪرڻ لاءِ ھدف ڪرڻ لاءِ موجوده فعال ٽيب ۽ نئين جلد فعال ٿيڻ واري ٽيب، ترتيب سان.
`hidden.bs.tab`	هي واقعو نئين ٽيب جي ظاهر ٿيڻ کان پوءِ فائر ٿئي ٿو (۽ اهڙيءَ طرح پوئين فعال ٽيب لڪيل آهي). استعمال ڪريو `event.target`۽ `event.relatedTarget`ھدف ڪرڻ لاء اڳئين فعال ٽيب ۽ نئين فعال ٽيب، ترتيب سان.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})