Navs اور ٹیبز

بوٹسٹریپ کے شامل نیویگیشن اجزاء کو استعمال کرنے کے طریقے کے لیے دستاویزات اور مثالیں۔

اس صفحہ پر

بیس nav

.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، nav لنکس ویسا ہی برتاؤ کرتے ہیں جیسا کہ nav آئٹمز کریں گے، لیکن اضافی مارک اپ کے بغیر۔

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 یوٹیلیٹیز کے ساتھ اپنے nav کی افقی سیدھ کو تبدیل کریں ۔ پہلے سے طے شدہ طور پر، navs بائیں سیدھ میں ہوتے ہیں، لیکن آپ انہیں آسانی سے بیچ میں یا دائیں سیدھ میں تبدیل کر سکتے ہیں۔

کے ساتھ مرکز .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 لیتا ہے اور .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>

گولیاں

وہی ایچ ٹی ایم ایل لیں، لیکن .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-items سے تمام دستیاب جگہ کو متناسب طور پر بھرنے کے لیے، استعمال کریں .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 لنکس کے ذریعے قبضہ کیا جائے گا، لیکن اوپر کے برعکس .nav-fill، ہر nav آئٹم کی چوڑائی ایک جیسی ہوگی۔

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>

فلیکس یوٹیلیٹیز کے ساتھ کام کرنا

اگر آپ کو جوابی NAV مختلف حالتوں کی ضرورت ہے تو، flexbox افادیت کی ایک سیریز استعمال کرنے پر غور کریں۔ زیادہ لفظی ہونے کے باوجود، یہ افادیت جوابی بریک پوائنٹس میں زیادہ حسب ضرورت پیش کرتی ہے۔ نیچے دی گئی مثال میں، ہماری nav کو سب سے کم بریک پوائنٹ پر اسٹیک کیا جائے گا، پھر ایک افقی لے آؤٹ کے مطابق ڈھال لیا جائے گا جو چھوٹے بریک پوائنٹ سے شروع ہونے والی دستیاب چوڑائی کو بھرتا ہے۔

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 تصنیف کی مشق گائیڈ ٹیبز پیٹرن میں بیان کیا گیا ہے ۔ مثال کے لیے اس سیکشن میں متحرک ٹیب والے انٹرفیس کے لیے JavaScript کا رویہ دیکھیں ۔ متحرک ٹیب والے aria-currentانٹرفیس پر انتساب ضروری نہیں ہے کیونکہ ہمارا JavaScript 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 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے 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};

Sass متغیرات

$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 پلگ ان کا استعمال کریں — اسے انفرادی طور پر یا مرتب کردہ 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>-بیسڈ مارک اپ کے ساتھ کام کرتا ہے، جیسا کہ اوپر دکھایا گیا ہے، یا کسی بھی صوابدیدی "اپنا خود رول" مارک اپ کے ساتھ۔ نوٹ کریں کہ اگر آپ استعمال کر رہے ہیں <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 تصنیف کی مشق گائیڈ ٹیبز کے پیٹرنrole="tablist" میں بیان کیا گیا ہے ، role="tab", role="tabpanel", اور اضافی صفات کی ضرورت ہوتی ہے aria-تاکہ ان کی ساخت، فعالیت، اور موجودہ حالت کو معاون ٹیکنالوجیز (جیسے اسکرین ریڈرز) کے صارفین تک پہنچایا جا سکے۔ ایک بہترین عمل کے طور پر، ہم <button>ٹیبز کے لیے عناصر استعمال کرنے کی تجویز کرتے ہیں، کیونکہ یہ ایسے کنٹرولز ہیں جو متحرک تبدیلی کو متحرک کرتے ہیں، بجائے اس کے کہ وہ لنکس جو کسی نئے صفحہ یا مقام پر تشریف لے جائیں۔

ARIA تصنیف کے طرز عمل کے مطابق، صرف فی الحال فعال ٹیب ہی کی بورڈ فوکس حاصل کرتا ہے۔ جب JavaScript پلگ ان شروع ہو جائے گا، تو یہ tabindex="-1"تمام غیر فعال ٹیب کنٹرولز پر سیٹ ہو جائے گا۔ ایک بار جب فی الحال فعال ٹیب پر فوکس ہوجاتا ہے، کرسر کیز پچھلے/اگلے ٹیب کو چالو کرتی ہیں، پلگ ان کے ساتھ روونگtabindex کو اس کے مطابق تبدیل کرتا ہے۔ تاہم، نوٹ کریں کہ جاوا اسکرپٹ پلگ ان افقی اور عمودی ٹیب کی فہرستوں کے درمیان فرق نہیں کرتا جب یہ کرسر کی کلیدی تعاملات کی بات کرتا ہے: ٹیب کی فہرست کی سمت بندی سے قطع نظر، اوپر اور بائیں دونوں کرسر پچھلے ٹیب پر جاتے ہیں، اور نیچے اور دائیں کرسر جاتے ہیں۔ اگلا ٹیب

عام طور پر، کی بورڈ نیویگیشن کی سہولت کے لیے، یہ تجویز کیا جاتا ہے کہ ٹیب پینلز کو خود بھی توجہ کے قابل بنایا جائے، جب تک کہ ٹیب پینل کے اندر بامعنی مواد پر مشتمل پہلا عنصر پہلے ہی قابل توجہ نہ ہو۔ tabindex="0"JavaScript پلگ ان اس پہلو کو سنبھالنے کی کوشش نہیں کرتا ہے — جہاں مناسب ہو، آپ کو اپنے مارک اپ میں شامل کر کے واضح طور پر اپنے ٹیب پینلز کو قابل توجہ بنانے کی ضرورت ہوگی ۔

ٹیب 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 طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر میتھڈ کال کو نظر انداز کر دیا جائے گا ۔

مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات دیکھیں ۔

آپ کے مواد کو ایک ٹیب عنصر کے طور پر فعال کرتا ہے۔

آپ کنسٹرکٹر کے ساتھ ایک ٹیب مثال بنا سکتے ہیں، مثال کے طور پر:

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.tabhide.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
})