Navs اور ٹیبز

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

اس صفحہ پر

بیس 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">Disabled</a>
  </li>
</ul>

کلاسوں کو ہر جگہ استعمال کیا جاتا ہے، لہذا آپ کا مارک اپ انتہائی لچکدار ہو سکتا ہے۔ <ul>اگر آپ کی اشیاء کی ترتیب اہم ہے تو اوپر کی طرح s کا استعمال کریں <ol>، یا کسی <nav>عنصر کے ساتھ اپنا رول کریں۔ کیونکہ .navاستعمال display: flex، nav لنکس وہی برتاؤ کرتے ہیں جیسا کہ nav آئٹمز کریں گے، لیکن اضافی مارک اپ کے بغیر۔

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

<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 لیتا ہے اور .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>

گولیاں

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

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

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

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

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

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

constructor

ایک ٹیب عنصر اور مواد کے کنٹینر کو چالو کرتا ہے۔ ٹیب میں یا تو ایک ہونا چاہیے data-bs-targetیا، اگر کوئی لنک استعمال کر رہے ہیں، تو hrefDOM میں کنٹینر نوڈ کو نشانہ بناتے ہوئے ایک انتساب ہونا چاہیے۔

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