Source

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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

کله چې پر <nav>بنسټ نیویګیشن کاروئ، ډاډ ترلاسه کړئ چې .nav-itemپه اینکرونو کې شامل کړئ.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

.nav-fillد پراساس نیویګیشن کارولو مثال ته ورته <nav>، ډاډ ترلاسه کړئ چې .nav-itemپه اینکرونو کې شامل کړئ.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

د لاسرسي په اړه

که تاسو د نیویګیشن بار چمتو کولو لپاره navs کاروئ ، نو ډاډه اوسئ چې role="navigation"د خورا منطقي اصلي کانټینر کې یو اضافه کړئ <ul>، یا <nav>د ټول نیویګیشن شاوخوا یو عنصر وپلټئ. په خپل ځان کې رول مه اضافه کړئ <ul>، ځکه چې دا به د مرستندویه ټیکنالوژیو لخوا د حقیقي لیست په توګه د اعلان کیدو مخه ونیسي.

.nav-tabsپه یاد ولرئ چې د نیویګیشن بارونه، حتی که په لید کې د ټولګي سره د ټبونو په توګه سټایل شوي وي، باید نه ورکړل شي role="tablist"، role="tab"یا role="tabpanel"ځانګړتیاوې. دا یوازې د متحرک ټب شوي انٹرفیسونو لپاره مناسب دي، لکه څنګه چې د WAI 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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

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

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

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

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

خام ډینم تاسو شاید د جین شارټس آسټین په اړه نه وي اوریدلی. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor، Williamsburg Carles Vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. کاسبي سویټر eu banh mi, qui irure Terry Richardson ex squid. ایلیکیپ پلیسیټ سالویا سیلم آی فون. Seitan aliquip quis cardigan American apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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>

د ټبونو پلگ ان د ګولیو سره هم کار کوي.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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>

او د عمودی ګولیو سره.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. د id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

تاسو کولی شئ انفرادي ټبونه په څو لارو فعال کړئ:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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

د ټب عنصر او د مینځپانګې کانټینر فعالوي. ټب باید په DOM کې د کانټینر نوډ په نښه کولو data-targetیا هم ولري.href

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').tab('show')
  })
</script>

.tab('شو')

ورکړل شوی ټب غوره کوي او د هغې اړوند پین ښیې. کوم بل ټب چې دمخه غوره شوی و غیر انتخاب شوی او د هغې اړوند پین پټ دی. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د ټب پین واقعیا ښودل شوي وي (یعنې مخکې له دې چې shown.bs.tabپیښه پیښ شي).

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

.tab('تصویر')

د عنصر ټب ویجاړوي.

پیښې

کله چې یو نوی ټب وښایاست، پیښې په لاندې ترتیب کې اوریدل کیږي:

  1. hide.bs.tab(په اوسني فعال ټب کې)
  2. show.bs.tab(په ښودل شوي ټب کې)
  3. hidden.bs.tab(په پخواني فعال ټب کې، د hide.bs.tabپیښې لپاره ورته ورته)
  4. 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 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})