نیوس

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

بیس nav

.navبوٹسٹریپ میں دستیاب نیویگیشن بیس کلاس سے لے کر فعال اور معذور ریاستوں تک عمومی مارک اپ اور اسٹائل شیئر کرتی ہے۔ ہر سٹائل کے درمیان سوئچ کرنے کے لیے موڈیفائر کی کلاسز کو تبدیل کریں۔

بنیادی .navجزو flexbox کے ساتھ بنایا گیا ہے اور ہر قسم کے نیویگیشن اجزاء کی تعمیر کے لیے ایک مضبوط بنیاد فراہم کرتا ہے۔ اس میں کچھ اسٹائل اوور رائیڈز (فہرستوں کے ساتھ کام کرنے کے لیے)، بڑے ہٹ ایریاز کے لیے کچھ لنک پیڈنگ، اور بنیادی معذور اسٹائل شامل ہیں۔

بنیادی .navجزو میں کوئی ریاست شامل نہیں .activeہے۔ درج ذیل مثالوں میں کلاس شامل ہے، بنیادی طور پر یہ ظاہر کرنے کے لیے کہ یہ مخصوص کلاس کسی خاص اسٹائل کو متحرک نہیں کرتی ہے۔

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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 کا رویہ دیکھیں ۔

ڈراپ ڈاؤن استعمال کرنا

تھوڑا سا اضافی HTML اور ڈراپ ڈاؤن جاوا اسکرپٹ پلگ ان کے ساتھ ڈراپ ڈاؤن مینو شامل کریں ۔

ڈراپ ڈاؤن کے ساتھ ٹیبز

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

جاوا اسکرپٹ کا رویہ

ٹیب JavaScript پلگ ان کا استعمال کریں — اسے انفرادی طور پر یا مرتب کردہ bootstrap.jsفائل کے ذریعے شامل کریں — ہمارے نیویگیشنل ٹیبز اور گولیوں کو بڑھانے کے لیے مقامی مواد کے ٹیبل پین بنانے کے لیے۔

اگر آپ ہمارا جاوا اسکرپٹ ماخذ سے بنا رہے ہیں، تو اس کی ضرورت ہےutil.js ۔

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

نوٹ کریں کہ ٹیب JavaScript پلگ ان ٹیب والے انٹرفیس کو سپورٹ نہیں کرتا ہے جو ڈراپ ڈاؤن مینیو پر مشتمل ہوتے ہیں، کیونکہ یہ استعمال اور قابل رسائی دونوں مسائل کا سبب بنتے ہیں۔ استعمال کے نقطہ نظر سے، یہ حقیقت کہ فی الحال ظاہر کردہ ٹیب کا محرک عنصر فوری طور پر نظر نہیں آتا ہے (کیونکہ یہ بند ڈراپ ڈاؤن مینو کے اندر ہے) الجھن کا باعث بن سکتا ہے۔ رسائی کے نقطہ نظر سے، اس قسم کی تعمیر کو معیاری WAI ARIA پیٹرن میں نقشہ بنانے کا فی الحال کوئی معقول طریقہ نہیں ہے، مطلب یہ ہے کہ اسے معاون ٹیکنالوجیز کے صارفین کے لیے آسانی سے قابل فہم نہیں بنایا جا سکتا۔

ٹیب پینل کے لیے پلیس ہولڈر کا مواد۔ اس کا تعلق ہوم ٹیب سے ہے۔ آپ کو میلوں اونچائی پر لے جاتی ہے، اتنی اونچی، 'کیونکہ اسے ایک بین الاقوامی مسکراہٹ مل گئی ہے۔ میرے بستر پر ایک اجنبی ہے، میرے سر میں ایک دھڑکن ہے۔ ارے نہیں. ایک اور زندگی میں میں تمہیں رہنے دوں گا۔ کیونکہ میں، میں ہر چیز پر قادر ہوں۔ میرے تاج کی جنگ کے لیے موزوں۔ اپنے والدین کی شراب چوری کرنے اور چھت پر چڑھنے کے لیے استعمال کیا جاتا تھا۔ ٹون، ٹین فٹ اور تیار ہے، اسے اوپر کر دیں کیونکہ اس کا وزن بڑھ رہا ہے۔ اس کی محبت ایک نشے کی طرح ہے۔ مجھے لگتا ہے کہ میں بھول گیا تھا کہ میرے پاس ایک انتخاب تھا۔

ٹیب پینل کے لیے پلیس ہولڈر کا مواد۔ یہ پروفائل ٹیب سے متعلق ہے۔ آپ کو بہترین فن تعمیر ملا ہے۔ پاسپورٹ سٹیمپ، وہ کاسموپولیٹن ہے۔ ٹھیک، تازہ، شدید، ہم نے اسے تالا لگا دیا۔ کبھی نہیں سوچا تھا کہ ایک دن میں تمہیں کھو دوں گا۔ وہ آپ کا دل کھاتی ہے۔ آپ کا بوسہ کائناتی ہے، ہر حرکت جادو ہے۔ میرا مطلب ہے وہ، میرا مطلب ہے جیسے وہ ایک ہے۔ سلام پیاروں آئیے ایک سفر کرتے ہیں۔ صرف 4 جولائی کی طرح رات کے مالک! لیکن آپ ضائع ہونے کو ترجیح دیں گے۔

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>دیں۔

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>

اور عمودی گولیوں کے ساتھ۔

ٹیب پینل کے لیے پلیس ہولڈر کا مواد۔ اس کا تعلق ہوم ٹیب سے ہے۔ آپ کو شہر کے مرکز میں بلیوز گاتے دیکھا۔ نالی کا چکر لگاتے ہوئے دیکھیں۔ تم مجھے رکنے کیوں نہیں دیتے؟ وہ سر بھاری ہے جو تاج پہنتا ہے۔ جی ہاں، ہم فرشتوں کو روتے ہیں، اوپر سے زمین پر بارش برساتے ہیں۔ شو کو 3D میں دیکھنا چاہتے ہیں، ایک فلم۔ کیا آپ کو کبھی محسوس ہوتا ہے، اتنا کاغذ پتلا محسوس ہوتا ہے۔ یہ ہاں یا نہیں، شاید نہیں ہے۔

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

ڈیٹا اوصاف کا استعمال

آپ کسی بھی جاوا اسکرپٹ کو لکھے بغیر data-toggle="tab"یا data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>

جاوا اسکرپٹ کے ذریعے

جاوا اسکرپٹ کے ذریعے قابل ٹیب ٹیبز کو فعال کریں (ہر ٹیب کو انفرادی طور پر چالو کرنے کی ضرورت ہے):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

آپ انفرادی ٹیبز کو کئی طریقوں سے چالو کر سکتے ہیں:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر میتھڈ کال کو نظر انداز کر دیا جائے گا ۔

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

$().tab

ایک ٹیب عنصر اور مواد کے کنٹینر کو چالو کرتا ہے۔ ٹیب میں یا تو ہونا چاہیے data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('شو')

دیئے گئے ٹیب کو منتخب کرتا ہے اور اس سے منسلک پین دکھاتا ہے۔ کوئی دوسرا ٹیب جو پہلے منتخب کیا گیا تھا وہ غیر منتخب ہو جاتا ہے اور اس سے منسلک پین چھپا جاتا ہے۔ ٹیب پین کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.tabواقعہ پیش آنے سے پہلے)۔

$('#someTab').tab('show')

.tab('تصرف')

ایک عنصر کے ٹیب کو تباہ کرتا ہے۔

تقریبات

نیا ٹیب دکھاتے وقت، واقعات درج ذیل ترتیب میں فائر ہوتے ہیں:

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`پچھلے فعال ٹیب (اگر دستیاب ہو) کو نشانہ بنانے کے لیے استعمال کریں ۔
دکھایا گیا بی ایس ٹیب	یہ ایونٹ ٹیب کے دکھائے جانے کے بعد ٹیب شو پر فائر ہوتا ہے۔ `event.target`بالترتیب فعال ٹیب اور `event.relatedTarget`پچھلے فعال ٹیب (اگر دستیاب ہو) کو نشانہ بنانے کے لیے استعمال کریں ۔
hide.bs.tab	یہ واقعہ اس وقت شروع ہوتا ہے جب ایک نیا ٹیب دکھایا جانا ہوتا ہے (اور اس طرح پچھلے فعال ٹیب کو چھپایا جانا ہوتا ہے)۔ بالترتیب موجودہ ایکٹو ٹیب اور جلد فعال ہونے والے نئے ٹیب کا استعمال کریں `event.target`اور ان کو نشانہ بنائیں۔`event.relatedTarget`
hidden.bs.tab	یہ واقعہ ایک نئے ٹیب کے دکھائے جانے کے بعد فائر ہوتا ہے (اور اس طرح پچھلا فعال ٹیب چھپ جاتا ہے)۔ بالترتیب پچھلے ایکٹو ٹیب اور نئے ایکٹو ٹیب کو ٹارگٹ کرنے کے لیے `event.target`استعمال کریں ۔`event.relatedTarget`

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})