Navs او ټبونه

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

په دې پاڼه کې

بیس nav

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

افقی سمون

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

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

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

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

<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"ځانګړتیاوې. دا یوازې د متحرک ټب شوي انٹرفیسونو لپاره مناسب دي، لکه څنګه چې د WAI ARIA لیکوال کولو تمرینونو کې تشریح شوي . د مثال لپاره پدې برخه کې د متحرک ټب شوي انٹرفیسونو لپاره جاوا سکریپټ چلند وګورئ . ځانګړنه په aria-currentمتحرک ټب شوي انٹرفیسونو کې اړین ندي ځکه چې زموږ جاواسکریپټ aria-selected="true"په فعال ټب کې اضافه کولو سره غوره شوي حالت اداره کوي.

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

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

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

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

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

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