نيو ۽ ٽيب

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

هن صفحي تي

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

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

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

بنيادي جزو ۾ ڪا به رياست .navشامل ناهي . .activeھيٺ ڏنل مثالن ۾ ڪلاس شامل آھن، خاص طور تي اھو ظاھر ڪرڻ لاءِ ته ھي خاص ڪلاس ڪنھن خاص اسٽائل کي متحرڪ نٿو ڪري.

فعال رياست کي مددگار ٽيڪنالاجيءَ تائين پهچائڻ لاءِ، aria-currentوصف استعمال ڪريو - pageموجوده صفحي لاءِ قدر استعمال ڪندي، يا trueسيٽ ۾ موجوده شيءِ لاءِ.

html

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ڪلاس استعمال ڪيا ويندا آهن، تنهنڪري توهان جو مارڪ اپ سپر لچڪدار ٿي سگهي ٿو. استعمال ڪريو <ul>s وانگر مٿي، <ol>جيڪڏهن توهان جي شين جو آرڊر اهم آهي، يا پنهنجو پاڻ کي هڪ <nav>عنصر سان رول ڪريو. ڇاڪاڻ ته .navاستعمال display: flex، نيوي لنڪس ساڳيو ئي عمل ڪن ٿيون جيئن نيوي شيون هونديون، پر اضافي مارڪ اپ کان سواء.

html

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

دستياب انداز

.navبدلائيندڙن ۽ افاديتن سان s جزو جو انداز تبديل ڪريو . ملائي ۽ ملائي جيئن ضرورت هجي، يا پنهنجو پاڻ ٺاهيو.

افقي ترتيب

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

مرڪز سان .justify-content-center:

html

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ساڄي سان ترتيب ڏنل .justify-content-end:

html

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

عمودي

.flex-columnيوٽيلٽي سان فليڪس آئٽم جي رخ کي تبديل ڪندي پنهنجي نيويگيشن کي اسٽيڪ ڪريو . انهن کي ڪجهه ڏسڻ جي بندرگاهن تي اسٽيڪ ڪرڻ جي ضرورت آهي پر ٻيا نه؟ جوابي نسخو استعمال ڪريو (مثال طور، .flex-sm-column).

html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

هميشه وانگر، عمودي نيويگيشن ممڪن آهي بغير <ul>s، پڻ.

html

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

ٽيب

مٿي کان بنيادي نيوي وٺي ٿو ۽ .nav-tabsڪلاس کي شامل ڪري ٿو هڪ ٽيب ٿيل انٽرفيس ٺاهي. اسان جي ٽيب جاوا اسڪرپٽ پلگ ان سان ٽيبلبل علائقا ٺاهڻ لاءِ انھن کي استعمال ڪريو .

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

گوليون

اهو ساڳيو HTML وٺو، پر .nav-pillsان جي بدران استعمال ڪريو:

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ڀريو ۽ جواز ڏيو

توهان .navجي مواد کي مڪمل دستياب ويڪر کي وڌائڻ لاء مجبور ڪريو ٻن ترميمي طبقن مان هڪ. متناسب طور تي توهان .nav-itemجي s سان تمام موجود جڳهه ڀرڻ لاءِ، استعمال ڪريو .nav-fill. نوٽ ڪريو ته تمام افقي جڳهه تي قبضو ڪيو ويو آهي، پر هر نيوي شيون هڪ ئي ويڪر ناهي.

html

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

جڏهن هڪ <nav>بنياد تي نيويگيشن استعمال ڪندي، توهان محفوظ طور تي ختم ڪري سگهو ٿا .nav-itemجيئن صرف اسٽائل عناصر .nav-linkلاء گهربل آهي .<a>

html

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

برابر ويڪر عناصر لاءِ، استعمال ڪريو .nav-justified. سموري افقي جڳهه نيوي لنڪس تي قبضو ڪيو ويندو، پر .nav-fillمٿين جي برعڪس، هر نيوي شين جي ويڪر ساڳي هوندي.

html

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

هڪ -بنياد نيويگيشن .nav-fillاستعمال ڪندي مثال سان ملندڙ جلندڙ.<nav>

html

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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

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

html

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

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

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

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

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

شامل ڪريو ڊراپ ڊائون مينيو ٿورڙو اضافي HTML ۽ ڊراپ ڊائونز جاوا اسڪرپٽ پلگ ان سان.

ڊراپ ڊائونز سان ٽيب

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ڊراپ ڊائونز سان گڏ گوليون

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

Bootstrap جي ترقي ڪندڙ CSS متغيرن جي انداز جي حصي جي طور تي، navs ھاڻي مقامي CSS متغير استعمال ڪن ٿا .nav, .nav-tabs, ۽ .nav-pillsوڌايل حقيقي وقت جي ڪسٽمائيزيشن لاءِ. CSS متغيرن لاءِ قيمتون Sass ذريعي سيٽ ڪيون ويون آهن، تنهنڪري Sass ڪسٽمائيزيشن اڃا به سپورٽ ٿيل آهي.

.navبنيادي طبقي تي :

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

.nav-tabsتبديل ڪندڙ طبقي تي :

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

.nav-pillsتبديل ڪندڙ طبقي تي :

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

سس متغير

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

JavaScript رويي

استعمال ڪريو ٽيب JavaScript پلگ ان- ان کي انفرادي طور تي يا مرتب ڪيل bootstrap.jsفائل ذريعي شامل ڪريو- مقامي مواد جي ٽيبلبل پينز ٺاهڻ لاءِ اسان جي نيويگيشنل ٽيب ۽ گولن کي وڌائڻ لاءِ.

هي ڪجهه جڳهه هولڊر مواد آهي هوم ٽيب سان لاڳاپيل مواد. ٻئي ٽئب تي ڪلڪ ڪرڻ سان ان جي نمائش کي ٽوگل ڪندو ايندڙ لاءِ. ٽيب JavaScript مواد جي نمائش ۽ اسٽائل کي ڪنٽرول ڪرڻ لاءِ ڪلاسن کي تبديل ڪري ٿو. توھان ان کي استعمال ڪري سگھوٿا ٽيب، گوليون، ۽ ڪنھن ٻئي .navطاقتور نيويگيشن سان.

هي ڪجهه جڳهه هولڊر مواد آهي پروفائل ٽيب سان لاڳاپيل مواد. ٻئي ٽئب تي ڪلڪ ڪرڻ سان ان جي نمائش کي ٽوگل ڪندو ايندڙ لاءِ. ٽيب JavaScript مواد جي نمائش ۽ اسٽائل کي ڪنٽرول ڪرڻ لاءِ ڪلاسن کي تبديل ڪري ٿو. توھان ان کي استعمال ڪري سگھوٿا ٽيب، گوليون، ۽ ڪنھن ٻئي .navطاقتور نيويگيشن سان.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

توھان جي ضرورتن کي پورو ڪرڻ ۾ مدد لاءِ، ھي ڪم ڪري <ul>ٿو-based مارڪ اپ سان، جيئن مٿي ڏيکاريل آھي، يا ڪنھن صوابديدي ”پنھنجو پنھنجو“ مارڪ اپ سان. نوٽ ڪريو ته جيڪڏھن توھان استعمال ڪري رھيا آھيو <nav>، توھان کي ان ۾ سڌو سنئون شامل نه ڪرڻ گھرجي role="tablist"، جيئن ھي عنصر جي اصلي ڪردار کي نيويگيشن لينڊ مارڪ جي طور تي ختم ڪري ڇڏيندو. ان جي بدران، هڪ متبادل عنصر ڏانهن وڃو (هيٺ ڏنل مثال ۾، هڪ سادي <div>) ۽ ان جي <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 Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

ٽيب پلگ ان پڻ ڪم ڪري ٿو گوليون سان.

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

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

۽ عمودي گولن سان. مثالي طور، عمودي ٽيب لاء، توهان کي پڻ شامل aria-orientation="vertical"ڪرڻ گهرجي ٽيب لسٽ ڪنٽينر ۾.

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

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

پهچ

متحرڪ ٽيب ٿيل انٽرفيس، جيئن بيان ڪيو ويو آهي ARIA Authoring Practices Guide tabs pattern ۾، ضرورت آهي role="tablist", role="tab", , role="tabpanel", ۽ اضافي aria-خاصيتون انهن جي جوڙجڪ، ڪارڪردگي، ۽ موجوده حالت کي مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين پهچائڻ لاءِ (جهڙوڪ اسڪرين ريڊر). هڪ بهترين عمل جي طور تي، اسان <button>ٽيب لاءِ عنصرن کي استعمال ڪرڻ جي صلاح ڏيون ٿا، جيئن اهي ڪنٽرول آهن جيڪي متحرڪ تبديلي کي محرڪ ڪن ٿا، بجاءِ انهن لنڪن جي جيڪي نئين صفحي يا هنڌ ڏانهن ويا.

ARIA Authoring Practices جي نموني سان، صرف في الحال فعال ٽيب ڪيبورڊ فوڪس حاصل ڪري ٿو. جڏهن جاوا اسڪرپٽ پلگ ان کي شروع ڪيو ويندو، اهو tabindex="-1"سڀني غير فعال ٽيب ڪنٽرول تي سيٽ ڪيو ويندو. هڪ دفعو في الحال فعال ٽيب تي فوڪس ڪيو ويو آهي، ڪرسر ڪيز اڳئين / ايندڙ ٽيب کي چالو ڪري ٿو، پلگ ان مطابق روئنگ تبديل ڪنديtabindex . بهرحال، ياد رکو ته جاوا اسڪرپٽ پلگ ان افقي ۽ عمودي ٽيب لسٽن جي وچ ۾ فرق نٿو ڪري جڏهن اهو ڪرسر جي اهم ڳالهين تي اچي ٿو: ٽيب لسٽ جي رخ جي لحاظ کان، ٻئي مٿي ۽ کاٻي ڪرسر پوئين ٽيب ڏانهن وڃو، ۽ هيٺ ۽ ساڄي ڪرسر ڏانهن وڃو. ايندڙ ٽيب.

عام طور تي، ڪيبورڊ نيويگيشن کي آسان ڪرڻ لاءِ، اها سفارش ڪئي وئي آهي ته ٽيب پينلز کي پاڻ سان گڏوگڏ ڌيان ڏيڻ جي قابل بڻايو وڃي، جيستائين پهريون عنصر جنهن ۾ ٽيب پينل اندر بامعني مواد شامل هجي اڳ ۾ ئي ڌيان ڏيڻ لائق نه هجي. JavaScript پلگ ان هن پاسو کي سنڀالڻ جي ڪوشش نه ڪندو آهي- جتي مناسب هجي، توهان کي پنهنجي مارڪ اپ ۾ شامل ڪندي واضح طور تي پنهنجي ٽيب پينلز کي ڌيان ڏيڻ جي قابل بنائڻ جي ضرورت پوندي tabindex="0".

ٽيب JavaScript پلگ ان ٽيب ٿيل انٽرفيس کي سپورٽ نٿو ڪري جنهن ۾ ڊراپ ڊائون مينيو شامل آهن، ڇاڪاڻ ته اهي ٻئي استعمال ۽ رسائي جا مسئلا آهن. استعمال جي نقطه نظر کان، حقيقت اها آهي ته هن وقت ڏيکاريل ٽيب جي ٽرگر عنصر فوري طور تي نظر نه ايندي آهي (جيئن ته اهو بند ٿيل ڊراپ ڊائون مينيو جي اندر آهي) مونجهارو پيدا ڪري سگهي ٿو. رسائي جي نقطي نظر کان، في الحال ھن قسم جي تعمير کي ھڪڙي معياري WAI ARIA نموني سان نقشي ڪرڻ لاء ڪو به سمجھدار طريقو نه آھي، مطلب ته اھو آسانيء سان نه ٿو ڪري سگھجي مددگار ٽيڪنالاجي جي استعمال ڪندڙن لاء.

ڊيٽا خاصيتون استعمال ڪندي

توھان چالو ڪري سگھو ٿا ٽئب يا پِل نيويگيشن بغير ڪنھن جاوا اسڪرپٽ لکڻ کان سواءِ صرف بيان ڪندي 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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

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

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

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

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

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

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

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

ٻرندڙ اثر

ٽيب کي ڦهلائڻ لاء، .fadeهر هڪ ۾ شامل ڪريو .tab-pane. پهرين ٽئب پين کي پڻ لازمي آهي .showته شروعاتي مواد کي ڏسڻ ۾ اچي.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

طريقا

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

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

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

توهان جي مواد کي ٽيب عنصر طور چالو ڪري ٿو.

توھان ٺاھي سگھوٿا ٽيب مثال ٺاھيندڙ سان، مثال طور:

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

طريقو	وصف
`dispose`	هڪ عنصر جي ٽيب کي تباهه ڪري ٿو.
`getInstance`	جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ٽيب مثال حاصل ڪرڻ جي اجازت ڏئي ٿو، توهان ان کي هن طرح استعمال ڪري سگهو ٿا: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	جامد طريقو جيڪو DOM عنصر سان لاڳاپيل هڪ ٽيب مثال واپس ڪري ٿو يا هڪ نئون ٺاهيو ان صورت ۾ ان جي شروعات نه ڪئي وئي هئي. توھان ان کي ھن طرح استعمال ڪري سگھو ٿا: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	ڏنل ٽيب چونڊيو ۽ ان سان لاڳاپيل پين ڏيکاري ٿو. ٻيو ڪو به ٽيب جيڪو اڳ ۾ چونڊيو ويو هو غير منتخب ٿيل آهي ۽ ان سان لاڳاپيل پين لڪيل آهي. ڪالر ڏانهن واپسي ان کان اڳ جو ٽيب پين اصل ۾ ڏيکاريو ويو آهي (يعني `shown.bs.tab`واقعي ٿيڻ کان اڳ).

واقعا

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

hide.bs.tab(موجوده فعال ٽيب تي)
show.bs.tab(ڏسڻ واري ٽيب تي)
hidden.bs.tab(اڳوڻي فعال ٽيب تي، ساڳيو ئي hide.bs.tabواقعي جي لاءِ)
shown.bs.tab(نئين-فعال صرف ڏيکاريل ٽيب تي، ساڳي ئي show.bs.tabواقعي جي لاءِ)

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

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

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