ناوەکان و تابەکان

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

لەم پەیجەدا

Base nav

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

پێکهاتەی بنەڕەتی .navبە فلیکس بۆکس دروستکراوە و بناغەیەکی بەهێز بۆ دروستکردنی هەموو جۆرە پێکهاتەکانی گەشتیاری دابین دەکات. هەندێک لە سەرپێچی ستایل (بۆ کارکردن لەگەڵ لیستەکان)، هەندێک پادکردنی بەستەر بۆ ناوچەی گەورەتری لێدان، و ستایلکردنی بنەڕەتی لەکارخراو لەخۆدەگرێت.

پێکهاتەی بنەڕەتی هیچ حاڵەتێک .navلەخۆناگرێت . .activeئەم نموونانەی خوارەوە پۆلەکە لەخۆدەگرن، بە شێوەیەکی سەرەکی بۆ ئەوەی نیشان بدەن کە ئەم پۆلە تایبەتە هیچ ستایلێکی تایبەت دەستپێناکات.

بۆ گەیاندنی دۆخی چالاک بۆ تەکنەلۆژیا یارمەتیدەرەکان، aria-currentتایبەتمەندییەکە بەکاربهێنە — بە بەکارهێنانی pageبەها بۆ لاپەڕەی ئێستا، یان trueبۆ بابەتی ئێستا لە کۆمەڵەیەکدا.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

پۆلەکان بە درێژایی بەکاردەهێنرێن، بۆیە مارکاپەکەت دەتوانێت سوپەر نەرم و نیان بێت. <ul>s وەک سەرەوە بەکاربهێنە ، <ol>ئەگەر ڕیزبەندی شتەکانت گرنگە، یان خۆت بە <nav>توخمێک ڕۆڵ بکە. چونکە .navبەکارهێنانەکان display: flex, بەستەرەکانی nav هەمان ڕەفتار دەکەن کە بابەتە navەکان دەیکەن، بەڵام بەبێ نیشاندانی زیادە.

<nav class="nav">
  <a class="nav-link active" aria-current="page" 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 بگۆڕە بە دەستکاریکەر و سوودمەندیەکان. بەپێی پێویست تێکەڵاو بکە و یەکسان بکە، یان خۆت دروستی بکە.

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

ڕێکخستنی ئاسۆیی nav ـەکەت بگۆڕە بە سوودمەندییەکانی flexbox . بە شێوازی پێشوەختە، navs بە چەپ ڕیز دەکرێن، بەڵام دەتوانیت بە ئاسانی بیانگۆڕیت بۆ ناوەڕاست یان ڕاست ڕیزکراو.

سەنتەری لەگەڵ .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" 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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

پڕ بکەرەوە و پاساو بۆ بهێنە

ناوەڕۆکی خۆت ناچار بکە .navبۆ درێژکردنەوەی تەواوی پانایی بەردەست یەکێک لە دوو پۆلی دەستکاریکەر. بۆ ئەوەی بە ڕێژەیی هەموو شوێنە بەردەستەکان بە .nav-items ـەکەت پڕ بکەیتەوە، بەکاربهێنە .nav-fill. سەرنج بدە کە هەموو بۆشایی ئاسۆیی داگیرکراوە، بەڵام هەموو بابەتی nav یەک پانایی نییە.

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

بۆ توخمەکانی پانایی یەکسان، بەکاربهێنە .nav-justified. هەموو شوێنە ئاسۆییەکان بە بەستەری nav داگیر دەکرێن، بەڵام بە پێچەوانەی ئەوانەی .nav-fillسەرەوە، هەموو بابەتی nav یەک پانایی دەبێت.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>-based navigation.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

کارکردن لەگەڵ کۆمپانیاکانی فلیکس

ئەگەر پێویستت بە گۆڕانکارییەکانی nav وەڵامدەرەوەیە، بیر لە بەکارهێنانی زنجیرەیەک لە سوودمەندییەکانی flexbox بکەرەوە . لە کاتێکدا کە زیاتر قسەکردنن، ئەم سوودمەندیانە خۆکارکردنی زیاتر پێشکەش دەکەن لە سەرانسەری خاڵە شکاندنەکانی وەڵامدەرەوە. لە نموونەی خوارەوەدا، nav ی ئێمە لەسەر نزمترین خاڵی شکاندن کۆ دەکرێتەوە، پاشان خۆی لەگەڵ شێوازێکی ئاسۆیی دەگونجێنێت کە پانایی بەردەست پڕدەکاتەوە لە خاڵی شکاندنی بچووکەوە دەست پێدەکات.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" 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 بەکاردەهێنیت بۆ دابینکردنی پەتی گەشتکردن، دڵنیابە کە a زیاد دەکەیت role="navigation"بۆ لۆژیکیترین کۆنتێنەری باوکی <ul>, یان <nav>توخمێک بە دەوری تەواوی گەشتەکەدا بپێچە. ڕۆڵەکە زیاد مەکە بۆ <ul>خۆی، چونکە ئەمە ڕێگری دەکات لەوەی وەک لیستێکی ڕاستەقینە لەلایەن تەکنەلۆژیا یارمەتیدەرەکانەوە ڕابگەیەنرێت.

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

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

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

هەڵسوکەوتی جاڤاسکڕێپت

پێوەکراوەکەی جاڤاسکڕێپتی تاب بەکاربهێنە-بە تاک یان لە ڕێگەی bootstrap.jsپەڕگەی کۆکراوەیەوە لەخۆی بگرە-بۆ درێژکردنەوەی تاب و حەبەکانی گەشتکردنمان بۆ دروستکردنی پەنجەرەی تابکراو لە ناوەڕۆکی ناوخۆیی.

ڕووکارە تابدارە داینامیکیەکان، وەک لە پراکتیکەکانی نووسینی WAI ARIA باسکراوە ، پێویستیان بە role="tablist", role="tab", role="tabpanel", و تایبەتمەندی زیادە aria-هەیە بۆ ئەوەی پێکهاتە، کارایی و دۆخی ئێستایان بگەیەننە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان (وەک خوێنەری شاشە). وەک باشترین پراکتیزە، پێشنیار دەکەین <button>توخمەکان بۆ تابەکان بەکاربهێنرێت، چونکە ئەمانە کۆنتڕۆڵن کە گۆڕانکارییەکی داینامیکی دەستپێدەکەن، نەک ئەو بەستەرانەی کە دەچنە لاپەڕە یان شوێنێکی نوێ.

تێبینی بکە کە ڕووکارە تابدارە داینامیکیەکان نابێت مینیوی دابەزینیان تێدابێت، چونکە ئەمە دەبێتە هۆی هەم کێشەی بەکارهێنان و هەم لە دەستڕاگەیشتن. لە ڕوانگەی بەکارهێنانەوە، ئەو ڕاستییەی کە توخمە دەستپێکەری تابەکەی ئێستا پیشان دراوە دەستبەجێ دیار نییە (وەک چۆن لە ناو مینیوی داخراودایە) دەتوانێت ببێتە هۆی سەرلێشێواوی. لە ڕوانگەی دەستڕاگەیشتنەوە، لە ئێستادا هیچ ڕێگەیەکی عەقڵانی نییە بۆ نەخشەکێشانی ئەم جۆرە بنیاتنانە بۆ نەخشێکی ستانداردی WAI ARIA، بەو مانایەی کە ناتوانرێت بە ئاسانی بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان تێبگەین.

ئەمە هەندێک ناوەڕۆکی شوێنهەڵگرە کە ناوەڕۆکی پەیوەندیدار بە تابی ماڵەوە. کرتەکردن لەسەر تابێکی تر بینینی ئەم تابانە دەگۆڕێت بۆ تابێکی تر. تابی جاڤاسکڕێپت پۆلەکان دەگۆڕێت بۆ کۆنترۆڵکردنی بینین و ستایلکردنی ناوەڕۆک. دەتوانیت لەگەڵ تابەکان، حەبەکان و هەر گەشتێکی تر .navکە -بەهێز بێت بەکاری بهێنیت.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>دەوریدا بپێچە.

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

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

<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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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>

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

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

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

بەکارهێنانی تایبەتمەندیەکانی داتا

دەتوانیت گەشتێکی تاب یان حەب چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها دیاریکردن data-bs-toggle="tab"یان data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>

لە ڕێگەی جاڤاسکڕێپتەوە

تابەکانی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر تابێک پێویستە بە تاک چالاک بکرێت):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

دەتوانیت بە چەند ڕێگەیەک تابەکانی تاک چالاک بکەیت:

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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 ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی میتۆد لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .

بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .

constructor

توخمێکی تاب و کۆنتێنەری ناوەڕۆک چالاک دەکات. تاب دەبێت data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

نیشاندان

تابە پێدراوەکە هەڵدەبژێرێت و پەنجەرەی پەیوەندیدارەکەی پیشان دەدات. هەر تابێکی تر کە پێشتر هەڵبژێردرابێت هەڵنەبژێردرابێت و پەنجەرەی پەیوەندیدارەکەی دەشاردرێتەوە. پێش ئەوەی لە ڕاستیدا پەنجەرەی تابەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.tabڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

فڕێ بدە

تابی توخمێک لەناو دەبات.

getInstance

شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی تابەکە بەدەستبهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی تابەکە بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکەیت لە ئەگەری دەستپێنەکردندا

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

ڕووداوەکان

لە کاتی پیشاندانی تابێکی نوێدا، ڕووداوەکان بەم ڕیزبەندییەی خوارەوە ئاگر دەکەون:

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

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})