نيوس

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

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

بوٽ اسٽريپ ۾ موجود نيويگيشن شيئر جنرل مارڪ اپ ۽ اسلوب، بنيادي .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 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 افاديت سان پنهنجي نيوي جي افقي ترتيب کي تبديل ڪريو . ڊفالٽ طور، نيوي کاٻي پاسي سان ترتيب ڏنل آهن، پر توهان آساني سان انهن کي تبديل ڪري سگهو ٿا مرڪز يا ساڄي طرف.

مرڪز سان .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-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>

گوليون

اهو ساڳيو HTML وٺو، پر .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-itemجي s سان تمام موجود جڳهه ڀرڻ لاءِ، استعمال ڪريو .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-fillمٿين جي برعڪس، هر نيوي شين جي ويڪر ساڳي هوندي.

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

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

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

<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 Authoring Practices Guide tabs pattern ۾ بيان ڪيو ويو آهي . ڏسو جاوا اسڪرپٽ رويي لاء متحرڪ ٽيب ٿيل انٽرفيس لاء هن حصي ۾ مثال لاء.

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

شامل ڪريو ڊراپ ڊائون مينيو ٿورڙو اضافي 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 رويي

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

جيڪڏهن توهان اسان جي جاوا اسڪرپٽ ماخذ کان ٺاهي رهيا آهيو، ان جي ضرورت آهيutil.js .

متحرڪ ٽيب ٿيل انٽرفيس، جيئن بيان ڪيو ويو آهي ARIA Authoring Practices Guide tabs pattern ۾، ضرورت آهي 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>ٿو-based مارڪ اپ سان، جيئن مٿي ڏيکاريل آھي، يا ڪنھن صوابديدي ”پنھنجو پنھنجو“ مارڪ اپ سان. نوٽ ڪريو ته جيڪڏھن توھان استعمال ڪري رھيا آھيو <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 طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

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

$().tab

هڪ ٽيب عنصر ۽ مواد ڪنٽينر کي چالو ڪري ٿو. ٽيب کي يا ته هجڻ گهرجي data-target، يا، جيڪڏهن هڪ لنڪ استعمال ڪندي، هڪ hrefخاصيت DOM ۾ ڪنٽينر نوڊ کي نشانو بڻائيندي.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-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.tab(اڳوڻي فعال ٽيب تي، ساڳيو ئي hide.bs.tabواقعي جي لاءِ)
shown.bs.tab(نئين-فعال صرف ڏيکاريل ٽيب تي، ساڳي ئي show.bs.tabواقعي جي لاءِ)

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

واقعي جو قسم	وصف
ڏيکاريو.bs.tab	هي واقعو ٽيب شو تي فائر ڪري ٿو، پر ان کان اڳ جو نئون ٽيب ڏيکاريو ويو آهي. استعمال ڪريو `event.target`۽ `event.relatedTarget`ھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي).
ڏيکاريو ويو.bs.tab	هي واقعو ٽيب شو تي فائر ٿئي ٿو جڏهن هڪ ٽيب ڏيکاريو ويو آهي. استعمال ڪريو `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
})