Source

ناوس

بەڵگەنامە و نموونە بۆ چۆنیەتی بەکارهێنانی پێکهاتەکانی گەشتکردن کە لەخۆدەگرێت لە Bootstrap.

Base nav

گەشتکردن کە لە Bootstrap بەردەستە هاوبەشی مارکاپی گشتی و ستایلەکانە، لە .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>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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

ستایلەکانی بەردەست

شێوازی .navپێکهاتەی s بگۆڕە بە دەستکاریکەر و سوودمەندیەکان. بەپێی پێویست تێکەڵاو بکە و یەکسان بکە، یان خۆت دروستی بکە.

ڕێکخستنی ئاسۆیی

ڕێکخستنی ئاسۆیی nav ـەکەت بگۆڕە بە سوودمەندییەکانی flexbox . بە شێوازی پێشوەختە، 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-items ـەکەت پڕ بکەیتەوە، بەکاربهێنە .nav-fill. سەرنج بدە کە هەموو بۆشایی ئاسۆیی داگیرکراوە، بەڵام هەموو بابەتی nav یەک پانایی نییە.

<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 داگیر دەکرێن، بەڵام بە پێچەوانەی ئەوانەی .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" 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 وەڵامدەرەوەیە، بیر لە بەکارهێنانی زنجیرەیەک لە سوودمەندییەکانی 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

سەبارەت بە دەستڕاگەیشتن

ئەگەر navs بەکاردەهێنیت بۆ دابینکردنی پەتی گەشتکردن، دڵنیابە کە a زیاد دەکەیت role="navigation"بۆ لۆژیکیترین کۆنتێنەری باوکی <ul>, یان <nav>توخمێک بە دەوری تەواوی گەشتەکەدا بپێچە. ڕۆڵەکە زیاد مەکە بۆ <ul>خۆی، چونکە ئەمە ڕێگری دەکات لەوەی وەک لیستێکی ڕاستەقینە لەلایەن تەکنەلۆژیا یارمەتیدەرەکانەوە ڕابگەیەنرێت.

تێبینی بکە کە پەتی گەشتکردن، تەنانەت ئەگەر بە شێوەیەکی بینراو وەک تاب لەگەڵ .nav-tabsپۆلەکەدا ستایل کرابێت، نابێت ,role="tablist" یان role="tab"تایبەتمەندی role="tabpanel"بدرێت . ئەمانە تەنها بۆ ڕووکارە تابدارە داینامیکیەکان گونجاون، وەک لە پراکتیکەکانی نووسینی WAI ARIA باسکراوە . بۆ نموونە سەیری هەڵسوکەوتی جاڤاسکڕێپت بکە بۆ ڕووکارە تابدارە داینامیکیەکان لەم بەشەدا.

بەکارهێنانی درۆپداونەکان

زیادکردنی مینیوی دابەزین بە کەمێک HTML زیادە و پێوەکراوەکانی JavaScript .

تابەکان بە درۆپ داون

<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 تۆفۆ stumptown aliqua، پاککردنەوەی وەستای ڕیترۆ سینت. سمێڵ کلیشە کاتی، ویلیامسبێرگ کارلێس ڤیگن هێلڤێتیکا. Reprehenderit قەساب ڕیترۆ keffiyeh خەون گیر synth. بلوزێکی کۆسبی eu banh mi، qui irure تێری ڕیچاردسۆن ex squid. Aliquip placeat سەلڤیا سیلوم ئایفۆن. Seitan aliquip quis کاردیگان جل و بەرگی ئەمریکی، قەساب 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>

هەروەها پێوەکراوەکەی tabs لەگەڵ حەبەکان کاردەکات.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure ڕووداوەکان ئیست دویس ئەنیم سونت ئۆفیسیا. Fugiat velit proident aliquip nisi incididunt وەرزشی لووت proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud دانیشتن کوپیداتات لە ڤینیام ad. Eiusmod consequat eu adipisicing کەمترین ئەنیم ئەلیکویپ cupidatat culpa excepteur quis. Occaecat دانیشتن eu وەرزشکردن 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>

وە لەگەڵ حەبی ڕاست.

سیلوم ئاد ئوت ئیرور کاتی ڤێلیت نۆسترۆد ئۆکایکات ئولامکۆ ئەلیکوا ئەنیم لۆرێم سینت. ڤێنیام سینت دویس ئینسیدیدونت دۆ ئێس ماگنا مۆلیت جگە لە لابەرۆم کوی. Id id reprehenderit sit est eu aliqua occaecat quis و velit جگە لە لابەرۆم مۆلیت دۆلۆری ئییوسمۆد. ئیپسوم دۆلۆر لە occaecat commodo و voluptate کەمترین رێپرێندێریت مۆلیت پاریاتۆر. Deserunt non labourum enim et cillum eu جێگرەوەی جگە لە ڕووداوی کەمترین ئۆکایکات.

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بۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
شاردنەوەی.bs.tab ئەم ڕووداوە کاتێک ئاگر دەداتەوە کە بڕیارە تابێکی نوێ پیشان بدرێت (و بەم شێوەیە تابە چالاکەکەی پێشوو دەبێ بشاردرێتەوە). event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک ئێستا و تابی نوێی بەم زووانە چالاک دەبێت، بە رێککەوت.
شاراوە.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
})