Navs او tabs

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

په دې پاڼه کې

بیس nav

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

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

اساسی .navبرخه هیڅ .activeدولت نه لری. په لاندې مثالونو کې ټولګي شامل دي، په عمده توګه د ښودلو لپاره چې دا ځانګړي ټولګي کوم ځانګړي سټایل نه هڅوي.

مرستندویه ټیکنالوژیو ته د فعال حالت رسولو لپاره، aria-currentخاصیت وکاروئ - pageد اوسني پاڼې لپاره ارزښت په کارولو سره، یا trueپه یوه سیټ کې د اوسني توکي لپاره.

html

<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>د پورته په څیر وکاروئ ، <ol>که ستاسو د توکو ترتیب مهم وي، یا خپل ځان د <nav>عنصر سره رول کړئ. ځکه چې .navاستعمالونه display: flex، د nav لینکونه د nav توکو په څیر چلند کوي، مګر د اضافي مارک اپ پرته.

html

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

افقی سمون

د فلیکس بکس اسانتیاو سره د خپل نیوی افقی ترتیب بدل کړئ . په ډیفالټ کې، navs کیڼ اړخ سره سمون لري، مګر تاسو کولی شئ په اسانۍ سره په مرکز یا ښي اړخ کې بدل کړئ.

سره مرکز .justify-content-center:

html

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

html

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

html

<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 پرته هم ممکن دی.

html

<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د ټب شوي انٹرفیس رامینځته کولو لپاره ټولګي اضافه کوي. زموږ د ټب جاواسکریپټ پلگ ان سره د میز وړ سیمې رامینځته کولو لپاره یې وکاروئ .

html

<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پرځای یې وکاروئ:

html

<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-itemد s سره ټول موجود ځای ډکولو لپاره ، وکاروئ .nav-fill. په یاد ولرئ چې ټول افقی ځای نیول شوی، مګر هر نیوی توکي ورته عرض نلري.

html

<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>عناصرو لپاره اړین دی.

html

<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-fillپورته پورته برعکس، هر نوی توکي به ورته عرض وي.

html

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

html

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

html

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

.nav-tabsپه یاد ولرئ چې د نیویګیشن بارونه، حتی که په لید کې د ټولګي سره د ټبونو په توګه سټایل شوي وي، باید نه ورکړل شي role="tablist"، role="tab"یا role="tabpanel"ځانګړتیاوې. دا یوازې د متحرک ټب شوي انٹرفیسونو لپاره مناسب دي، لکه څنګه چې د ARIA لیکوال کولو تمرینونو لارښود ټب نمونه کې تشریح شوي . د مثال لپاره پدې برخه کې د متحرک ټب شوي انٹرفیسونو لپاره جاوا سکریپټ چلند وګورئ . دا aria-currentخاصیت په متحرک ټب شوي انٹرفیسونو کې اړین ندي ځکه چې زموږ جاواسکریپټ aria-selected="true"په فعال ټب کې اضافه کولو سره غوره شوي حالت اداره کوي.

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

د یو څه اضافي HTML او ډراپ ډاون جاواسکریپټ پلگ ان سره د ډراپ ډاون مینو اضافه کړئ .

ټبونه د ښکته کیدو سره

html

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

ګولۍ د ښکته کیدو سره

html

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

سی ایس ایس

متغیرات

په v5.2.0 کې اضافه شوی

د بوټسټریپ د پرمختللې CSS متغیر تګلارې د یوې برخې په توګه ، navs اوس په .nav, .nav-tabs، او .nav-pillsد ریښتیني وخت اصلاح کولو لپاره ځایی CSS متغیرونه کاروي. د CSS متغیرونو لپاره ارزښتونه د Sass له لارې تنظیم شوي، نو د Sass تخصیص لاهم هم ملاتړ کیږي.

په .navاساسی ټولګی کې:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

د .nav-tabsترمیم کونکي ټولګي کې:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

د .nav-pillsترمیم کونکي ټولګي کې:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

د Sass متغیرات

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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فایل له لارې شامل کړئ — زموږ د نیویګیشنل ټبونو او ګولیو غزولو لپاره د ځایی مینځپانګو د میز وړ پینونو رامینځته کولو لپاره.

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

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

ستاسو د اړتیاو پوره کولو کې د مرستې لپاره، دا د پر <ul>بنسټ مارک اپ سره کار کوي، لکه څنګه چې پورته ښودل شوي، یا د هر ډول "خپل ځان رول" مارک اپ سره. په یاد ولرئ چې که تاسو کاروئ <nav>، تاسو باید په role="tablist"مستقیم ډول په دې کې اضافه نه کړئ، ځکه چې دا به د عنصر اصلي رول د نیویګیشن نښه په توګه بدل کړي. پرځای یې، یو بدیل عنصر ته لاړ شئ (په لاندې مثال کې، یو ساده <div>) او <nav>شاوخوا یې وپلټئ.

This is some placeholder content the Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

او د عمودی ګولیو سره. په عین حال کې، د عمودی ټبونو لپاره، تاسو باید aria-orientation="vertical"د ټب لیست کانټینر کې هم اضافه کړئ.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

لاسرسی

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

د ARIA لیکوالۍ طرزالعملونو سره سم، یوازې اوس مهال فعال ټب د کیبورډ تمرکز ترلاسه کوي. کله چې د جاواسکریپټ پلگ ان پیل شي، دا به tabindex="-1"په ټولو غیر فعال ټب کنټرولونو کې تنظیم شي. یوځل چې اوس مهال فعال ټب تمرکز وکړي، د کرسر کیلي پخوانی/راتلونکی ټب فعالوي، د پلگ ان سره سم رووینګtabindex بدلوي . په هرصورت، په یاد ولرئ چې د جاواسکریپټ پلگ ان د افقی او عمودی ټب لیستونو ترمنځ توپیر نه کوي کله چې دا د کرسر کلیدي تعاملاتو ته راځي: د ټب لیست سمت ته په پام سره، دواړه پورته او کیڼ کرسر پخواني ټب ته ځي، او ښکته او ښیې کرسر ته ځي. بل ټب.

په عموم کې، د کیبورډ نیویګیشن اسانتیا لپاره، دا سپارښتنه کیږي چې د ټب پینل پخپله هم د تمرکز وړ وي، پرته لدې چې لومړی عنصر چې د ټب پینل دننه معنی لرونکي مینځپانګې لري دمخه د تمرکز وړ وي. د جاواسکریپټ پلگ ان هڅه نه کوي چې دا اړخ اداره کړي — چیرته چې مناسب وي، تاسو به اړتیا ولرئ په واضح ډول خپل ټب پینلونه د tabindex="0"خپل مارک اپ په اضافه کولو سره د تمرکز وړ کړئ.

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

د ډیټا ځانګړتیاو کارول

تاسو کولی شئ د جاوا سکریپټ لیکلو پرته یو ټب یا د ګولی نیویګیشن په ساده ډول مشخص کولو 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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

د جاواسکریپټ له لارې

د جاواسکریپټ له لارې د ټب وړ ټبونه فعال کړئ (هر ټب باید په انفرادي ډول فعال شي):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

const 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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

میتودونه

غیر متناسب میتودونه او لیږدونه

ټولې API میتودونه غیر متزلزل دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته بیرته راځي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .

د نورو معلوماتو لپاره زموږ جاواسکریپټ اسناد وګورئ .

ستاسو مینځپانګه د ټب عنصر په توګه فعالوي.

تاسو کولی شئ د جوړونکي سره د ټب مثال رامینځته کړئ ، د مثال په توګه:

const bsTab = new bootstrap.Tab('#myTab')

طریقه	تفصیل
`dispose`	د عنصر ټب ویجاړوي.
`getInstance`	جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر سره د ټب مثال ترلاسه کړئ ، تاسو کولی شئ دا د دې په څیر وکاروئ: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	جامد میتود چې د DOM عنصر پورې اړوند د ټب مثال بیرته راګرځوي یا یو نوی رامینځته کړي که چیرې دا پیل نه وي. تاسو کولی شئ دا په لاندې ډول وکاروئ: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	ورکړل شوی ټب غوره کوي او د هغې اړوند پین ښیې. کوم بل ټب چې دمخه غوره شوی و غیر انتخاب شوی او د هغې اړوند پین پټ دی. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د ټب پین واقعیا ښودل شوي وي (یعنې مخکې له دې چې `shown.bs.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پیښې به نه ویستل کیږي.

د پیښې ډول	تفصیل
`hide.bs.tab`	دا پیښه هغه وخت اوریږي کله چې یو نوی ټب وښودل شي (او پدې توګه پخوانی فعال ټب باید پټ شي). په ترتیب سره اوسني فعال ټب او نوي ژر تر ژره فعال ټب وکاروئ `event.target`او په نښه کړئ.`event.relatedTarget`
`hidden.bs.tab`	دا پیښه د نوي ټب ښودلو وروسته ډزې کوي (او پدې توګه پخوانی فعال ټب پټ شوی). په ترتیب سره پخوانی فعال ټب او نوی فعال ټب وکاروئ `event.target`او په نښه کړئ.`event.relatedTarget`
`show.bs.tab`	دا پیښه د ټب شو باندې ډزې کوي، مګر مخکې له دې چې نوی ټب ښودل شوی وي. په ترتیب سره د فعال ټب او پخوانی فعال ټب (که شتون ولري) وکاروئ `event.target`او په نښه کړئ.`event.relatedTarget`
`shown.bs.tab`	دا پیښه د ټب ښودلو وروسته د ټب ښودلو وروسته خپریږي. په ترتیب سره د فعال ټب او پخوانی فعال ټب (که شتون ولري) وکاروئ `event.target`او په نښه کړئ.`event.relatedTarget`

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