Navs

د بوټسټریپ شامل شوي نیویګیشن اجزاو کارولو څرنګوالي لپاره اسناد او مثالونه.

بیس nav

په بوټسټریپ کې موجود نیویګیشن عمومي مارک اپ او سټایلونه شریکوي ، له بیس .navکلاس څخه فعال او معیوب حالتونو ته. د هر سټایل تر مینځ د بدلولو لپاره د ترمیم کونکي ټولګي بدل کړئ.

د بیس .navبرخه د فلیکس بکس سره جوړه شوې او د هر ډول نیویګیشن اجزاو جوړولو لپاره قوي بنسټ چمتو کوي. پدې کې ځینې سټایل اوورایډونه شامل دي (د لیستونو سره کار کولو لپاره) ، د لویو زیانونو ساحو لپاره ځینې لینک پیډینګ ، او لومړني معلول سټایل کول.

اساسی .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>د پورته په څیر وکاروئ ، <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د ترمیم کونکو او اسانتیاوو سره د برخې سټایل بدل کړئ . د اړتیا سره سم مخلوط او میچ کړئ، یا خپل ځان جوړ کړئ.

افقی سمون

د فلیکس بکس اسانتیاو سره د خپل نیوی افقی ترتیب بدل کړئ . په ډیفالټ کې، 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>

ګولۍ

ورته 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>

د فلیکس اسانتیاو سره کار کول

که تاسو ځواب ویونکي بدلونونو ته اړتیا لرئ، د فلیکس بکس یوټیلټیو لړۍ کارولو ته پام وکړئ . پداسې حال کې چې ډیر لفظي، دا اسانتیاوې د ځواب ویونکي وقفې په اوږدو کې ډیر دودیز وړاندیز کوي. په لاندې مثال کې، زموږ 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 لیکوال کولو تمرینونو لارښود ټب نمونه کې تشریح شوي . د مثال لپاره پدې برخه کې د متحرک ټب شوي انٹرفیسونو لپاره جاوا سکریپټ چلند وګورئ .

د ښکته کولو کارول

د یو څه اضافي 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>

جاواسکریپټ چلند

د ټب جاواسکریپټ پلگ ان وکاروئ — دا په انفرادي ډول یا د مرتب شوي bootstrap.jsفایل له لارې شامل کړئ — زموږ د نیویګیشنل ټبونو او ګولیو غزولو لپاره د ځایی مینځپانګو د میز وړ پینونو رامینځته کولو لپاره.

که تاسو زموږ جاوا سکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js .

متحرک ټب شوي انٹرفیسونه، لکه څنګه چې د ARIA د لیکوالۍ د طرزالعملونو لارښود ټب نمونهrole="tablist" کې تشریح شوي ، اړتیا لري چې د دوی جوړښت، فعالیت او اوسنی حالت د مرستندویه ټیکنالوژیو کاروونکو ته وړاندې کړي (لکه د سکرین لوستونکي). د غوره عمل په توګه، موږ د ټبونو لپاره د عناصرو کارولو وړاندیز کوو ، ځکه چې دا هغه کنټرولونه دي چې متحرک بدلون رامینځته کوي، د هغه لینکونو پر ځای چې نوي پاڼې یا ځای ته ځي.role="tab"role="tabpanel"aria-<button>

په یاد ولرئ چې ټب جاواسکریپټ پلگ ان د ټب شوي انٹرفیسونو ملاتړ نه کوي چې د ډراپ ډاون مینو لري، ځکه چې دا دواړه د کارونې او لاسرسي مسلو لامل کیږي. د کارونې له لید څخه ، دا حقیقت چې اوس مهال ښودل شوي ټب محرک عنصر سمدلاسه نه لیدل کیږي (لکه څنګه چې دا د تړل شوي ډراپ ډاون مینو کې دننه دی) د ګډوډۍ لامل کیدی شي. د لاسرسي له نظره، اوس مهال د دې ډول ساختماني معیاري WAI ARIA نمونې سره نقشه کولو لپاره هیڅ معقوله لاره شتون نلري، پدې معنی چې دا د مرستندویه ټیکنالوژیو کاروونکو ته په اسانۍ سره د پوهیدو وړ نه شي کیدی.

د ټب پینل لپاره د ځای لرونکی مینځپانګه. دا د کور ټب پورې اړه لري. تاسو مایلونه لوړ ، دومره لوړ ، ځکه چې هغې هغه نړیواله موسکا ترلاسه کړې. زما په بستر کې یو اجنبی دی، زما په سر کې ټکان دی. او، نه. په بل ژوند کې زه به تاسو ته پاتې شم. ځکه چې زه د هر څه توان لرم. زما د تاج جنګ لپاره مناسب. د خپل مور او پلار شراب غلا کول او چت ته پورته کیدل. ټون، ټین فټ او چمتو دی، پورته یې کړئ ځکه چې دا ډیر دروند کیږي. د هغې مینه د مخدره توکو په څیر ده. زه اټکل کوم چې ما هیر کړی چې ما یو انتخاب درلود.

د ټب پینل لپاره د ځای لرونکی مینځپانګه. دا د پروفایل ټب پورې اړه لري. تاسو غوره معمارۍ ترلاسه کړې. د پاسپورټ ټاپهونه، هغه کاسموپولیټین دی. ښه، تازه، تیاره، موږ یې په بند کې ترلاسه کړل. هېڅکله یې پلان نه درلود چې یوه ورځ به تا له لاسه ورکړم. هغه ستا زړه خوري. ستاسو بوس کائناتی دی، هر حرکت جادو دی. زما مطلب دی، زما مطلب دا دی لکه هغه یوه ده. سلامونه عزیزانو راځی چی یو سفر وکړو. یوازې د جولای د څلورمې په څیر شپه ولرئ! مګر تاسو باید ضایع شي.

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یا ولري، که د لینک په کارولو سره، 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پیښې به نه ویستل کیږي.

د پیښې ډول	تفصیل
show.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
})