नवस आ टैब के बारे में बतावल गइल बा

बूटस्ट्रैप के शामिल नेविगेशन घटक सभ के इस्तेमाल करे के तरीका खातिर दस्तावेजीकरण आ उदाहरण।

एह पन्ना पर दिहल गइल बा

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

पूरा में क्लास के इस्तेमाल होला, एहसे राउर मार्कअप सुपर लचीला हो सकेला. <ul>ऊपर के तरह s के प्रयोग करीं , अगर आपके आइटम के क्रम महत्वपूर्ण बा, या कवनो तत्व <ol>के साथ आपन रोल करीं । <nav>काहें से कि .navuses 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

उपलब्ध स्टाइल के बा

.navसंशोधक आ उपयोगिता के साथ s घटक के शैली बदलीं । जरूरत के हिसाब से मिक्स एंड मैच करीं, भा आपन बनाईं.

क्षैतिज संरेखण के बा

flexbox उपयोगिता के साथ अपना nav के क्षैतिज संरेखण बदलीं . डिफ़ॉल्ट रूप से, navs बाईं ओर संरेखित होला, बाकी रउआँ आसानी से एकरा के केंद्र भा दाहिना संरेखित में बदल सकत बानी।

के साथ केंद्रित बा .justify-content-center: 1।

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

गोली के इलाज कइल जाला

उहे एचटीएमएल लीं, बाकिर .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

भर के जायज ठहरावे के बा

अपना .nav's सामग्री के पूरा उपलब्ध चौड़ाई के दू गो संशोधक वर्ग में से एक के बढ़ावे खातिर मजबूर करीं। अपना .nav-items से सभ उपलब्ध जगह के आनुपातिक रूप से भरे खातिर, के इस्तेमाल करीं .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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

बराबर-चौड़ाई वाला तत्वन खातिर, के इस्तेमाल करीं .nav-justified। सभ क्षैतिज जगह पर nav लिंक सभ के कब्जा होखी, बाकी .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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

फ्लेक्स यूटिलिटीज के साथे काम कइल

अगर रउआँ के रिस्पांसिव नेव भिन्नता के जरूरत बा, त फ्लेक्सबॉक्स उपयोगिता के एगो श्रृंखला के इस्तेमाल करे पर विचार करीं । जबकि अधिका वर्बोज, ई उपयोगिता सभ रिस्पांसिव ब्रेकपॉइंट सभ में ढेर अनुकूलन प्रदान करे लीं। नीचे दिहल उदाहरण में, हमनी के nav सबसे निचला ब्रेकपॉइंट पर ढेर हो जाई, फिर एगो क्षैतिज लेआउट में अनुकूलित हो जाई जवन छोट ब्रेकपॉइंट से शुरू होके उपलब्ध चौड़ाई के भर देला।

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

सुलभता के संबंध में बा

अगर आप नेविगेशन बार उपलब्ध करावे खातिर navs के इस्तेमाल कर रहल बानी, त role="navigation"के सभसे तार्किक पैरेंट कंटेनर में a जरूर जोड़ल जाय , या पूरा नेविगेशन के चारों ओर <ul>कौनों तत्व के लपेट लीं । <nav>भूमिका के खुद में मत जोड़ीं <ul>, काहें से कि एह से सहायक तकनीक सभ द्वारा एकरा के वास्तविक सूची के रूप में घोषित ना कइल जा सके ला।

ध्यान दीं कि नेविगेशन बार, भले ही .nav-tabsक्लास के साथ टैब के रूप में विजुअल स्टाइल कइल गइल होखे , , या एट्रिब्यूट ना दिहल जाय । ई सभ खाली डायनामिक टैब इंटरफेस सभ खातिर उपयुक्त बाड़ें, जइसन कि WAI ARIA Authoring Practices में बतावल गइल बा । उदाहरण खातिर एह खंड में डायनामिक टैब इंटरफेस सभ खातिर जावास्क्रिप्ट व्यवहार देखल जाय । डायनामिक टैब इंटरफेस पर विशेषता जरूरी नइखे काहें से कि हमनी के जावास्क्रिप्ट सक्रिय टैब पर जोड़ के चुनल गइल स्थिति के संभाले ले।role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

ड्रॉपडाउन के इस्तेमाल कइल जा रहल बा

तनी अतिरिक्त एचटीएमएल आ ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथे ड्रॉपडाउन मेनू जोड़ीं .

ड्रॉपडाउन के साथ टैब बा

<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

रउआँ कई तरीका से अलग-अलग टैब सभ के सक्रिय क सकत बानी:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
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>

विधियन के बारे में बतावल गइल बा

एसिंक्रोनस तरीका आ संक्रमण के बारे में बतावल गइल बा

सभ एपीआई विधि एसिंक्रोनस होला आ एगो संक्रमण शुरू होला . संक्रमण शुरू होते ही उ लोग फोन करे वाला के पास वापस आ जाला लेकिन खतम होखे से पहिले . एकरा अलावा, एगो संक्रमण घटक पर एगो मेथड कॉल के अनदेखी कइल जाई .

अधिक जानकारी खातिर हमनी के जावास्क्रिप्ट दस्तावेज देखल जाव .

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 a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

दिहल गइल टैब के चयन करेला आ ओकरा से जुड़ल फलक देखावेला। कवनो अउरी टैब जवन पहिले चुनल गइल रहे ऊ अनचयनित हो जाला आ ओकरा से जुड़ल फलक छिप जाला. टैब फलक के वास्तव में देखावल जाए से पहिले (यानी shown.bs.tabघटना होखे से पहिले) कॉलर के वापस आ जाला।

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

  tab.show()

dispose

कवनो तत्व के टैब के नष्ट कर देला।

getInstance

स्थिर विधि जवन रउआ के कवनो डोम तत्व से जुड़ल टैब इंस्टेंस पावे के अनुमति देला

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

Events

नया टैब देखावे के समय, घटना सभ निम्नलिखित क्रम में फायर करे लीं:

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