नवस् तथा टैब्स

Bootstrap इत्यस्य समाविष्टानां नेविगेशनघटकानाम् उपयोगं कथं कर्तव्यमिति दस्तावेजीकरणं उदाहरणानि च ।

इस पृष्ठ पर

आधार नव

Bootstrap इत्यस्मिन् उपलब्धं नेविगेशनं सामान्यमार्कअपं शैल्यां च साझां करोति, आधारवर्गात् .navसक्रिय-अक्षम-स्थितिपर्यन्तं । प्रत्येकशैल्याः मध्ये स्विच् कर्तुं परिवर्तकवर्गान् स्वैप् कुर्वन्तु ।

आधारघटकः .navflexbox इत्यनेन सह निर्मितः अस्ति तथा च सर्वप्रकारस्य नेविगेशनघटकानाम् निर्माणार्थं दृढं आधारं प्रदाति । अस्मिन् केचन शैली-अवरोहिताः (सूचीभिः सह कार्यं कर्तुं), बृहत्तर-हिट्-क्षेत्राणां कृते केचन लिङ्क-पैडिंग्, मूलभूत-अक्षम-शैली च समाविष्टाः सन्ति ।

आधारघटके कस्यापि अवस्थायाः .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>उपरिष्टाद् इव s उपयुज्यताम् , <ol>यदि भवतः वस्तूनाम् क्रमः महत्त्वपूर्णः अस्ति, अथवा एकेन <nav>तत्वेन सह स्वस्य रोलम् कुर्वन्तु । यतः .navuses display: flex, nav लिङ्कानि nav items इव व्यवहारं कुर्वन्ति, परन्तु अतिरिक्तं मार्कअपं विना ।

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संशोधकैः उपयोगितैः च सह s घटकस्य शैलीं परिवर्तयन्तु । आवश्यकतानुसारं मिश्रणं कृत्वा मेलनं कुर्वन्तु, अथवा स्वस्य निर्माणं कुर्वन्तु।

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

flexbox utilities इत्यनेन सह स्वस्य 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 item direction परिवर्त्य स्वस्य नेविगेशनं स्तम्भयन्तु । केषुचित् viewports इत्यत्र तान् स्तम्भयितुं आवश्यकता अस्ति किन्तु अन्येषु न? प्रतिक्रियाशीलसंस्करणानाम् उपयोगं कुर्वन्तु (उदा., .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द्वयोः परिवर्तकवर्गयोः एकं पूर्णं उपलब्धं विस्तारं विस्तारयितुं भवतः 's सामग्रीं बाध्यं कुर्वन्तु । भवतः .nav-items इत्यनेन सर्वाणि उपलब्धानि स्थानानि आनुपातिकरूपेण पूरयितुं , इत्यस्य उपयोगं कुर्वन्तु .nav-fill। ध्यानं कुर्वन्तु यत् सर्वं क्षैतिजस्थानं व्याप्तम् अस्ति, परन्तु प्रत्येकस्य nav item इत्यस्य विस्तारः समानः नास्ति ।

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 लिङ्क् द्वारा आक्रान्तं भविष्यति, परन्तु .nav-fillउपरिष्टात् विपरीतम्, प्रत्येकं nav द्रव्यं समानविस्तारं भविष्यति ।

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 भिन्नतानां आवश्यकतां अनुभवन्ति, तर्हि flexbox उपयोगितानां श्रृङ्खलायाः उपयोगं विचारयन्तु . अधिकं वाचिकं भवति चेदपि, एतानि उपयोगितानि प्रतिक्रियाशीलविरामबिन्दुषु अधिकं अनुकूलनं प्रदास्यन्ति । अधोलिखिते उदाहरणे अस्माकं nav न्यूनतमे breakpoint इत्यत्र stacked भविष्यति, ततः लघु breakpoint तः आरभ्य उपलब्धं विस्तारं पूरयति इति क्षैतिजविन्यासे अनुकूलतां प्राप्स्यति ।

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"इत्यस्य सर्वाधिक-तार्किक-मूल-पात्रे a अवश्यं योजयन्तु <ul>, अथवा <nav>सम्पूर्णस्य नेविगेशनस्य परितः एकं तत्त्वं लपेटयन्तु । भूमिकां स्वयमेव न योजयन्तु <ul>, यतः एतेन सहायकप्रौद्योगिकीभिः वास्तविकसूचीरूपेण घोषितं न भविष्यति ।

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

ड्रॉपडाउन्स् इत्यस्य उपयोगेन

किञ्चित् अतिरिक्त HTML सह ड्रॉपडाउन मेनू योजयन्तु तथा च ड्रॉपडाउन JavaScript प्लगिन् योजयन्तु .

ड्रॉपडाउन सहित ट्याब्स्

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>

CSS इति

चर

v5.2.0 इत्यस्मिन् योजितम्

Bootstrap इत्यस्य विकसितस्य CSS चरस्य दृष्टिकोणस्य भागत्वेन, navs इदानीं , , इत्यत्र तथा च वर्धितस्य वास्तविकसमयस्य अनुकूलनस्य कृते स्थानीय CSS चरस्य .navउपयोगं .nav-tabsकुर्वन्ति .nav-pills। 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};

सस्स चर

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

जावास्क्रिप्ट व्यवहार

ट्याब् JavaScript प्लगइन इत्यस्य उपयोगं कुर्वन्तु-तत् व्यक्तिगतरूपेण अथवा bootstrap.jsसंकलितसञ्चिकायाः माध्यमेन समाविष्टं कुर्वन्तु-स्थानीयसामग्रीणां टैब-योग्य-फलकानि निर्मातुं अस्माकं नेविगेशनल-ट्याब्स् तथा गोल्यः विस्तारयितुं।

इदं किञ्चित् स्थानधारकसामग्री Home ट्याब् इत्यस्य सम्बद्धा सामग्री अस्ति । अन्यं ट्याब् नुत्वा अस्य दृश्यतां अग्रिमस्य कृते टोग्ल् करिष्यति । ट्याब् जावास्क्रिप्ट् सामग्रीदृश्यतां स्टाइलिंग् च नियन्त्रयितुं वर्गान् स्वैप् करोति । भवान् तस्य उपयोगं ट्याब्स्, गोल्यः, अन्यैः च .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>-आधारित-मार्कअप-सहितं कार्यं करोति, यथा उपरि दर्शितम्, अथवा कस्यापि मनमानेन “roll your own”-मार्कअप-सहितम् । ध्यानं कुर्वन्तु यत् यदि भवान् , इत्यस्य उपयोगं करोति तर्हि भवान् तस्मिन् प्रत्यक्षतया <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 Authoring Practices Guide tabs pattern -मध्ये वर्णितम् , सहायक-प्रौद्योगिकीनां (यथा स्क्रीन-रीडर) उपयोक्तृभ्यः स्वस्य संरचना, कार्यक्षमतां, वर्तमान-स्थितिं च प्रसारयितुं role="tablist", role="tab", role="tabpanel", अपि च अतिरिक्त- गुणानां आवश्यकता भवति aria-उत्तम-अभ्यासरूपेण, वयं <button>ट्याब्स् कृते तत्त्वानां उपयोगं अनुशंसयामः, यतः एते नियन्त्रणानि सन्ति ये गतिशीलं परिवर्तनं प्रेरयन्ति, न तु नूतनपृष्ठं स्थानं वा गच्छन्ति लिङ्कानि

ARIA Authoring Practices pattern इत्यस्य अनुरूपं, केवलं वर्तमानं सक्रियं ट्याब् कीबोर्ड फोकस प्राप्नोति । यदा जावास्क्रिप्ट् प्लगिन् आरभ्यते तदा tabindex="-1"सर्वेषु निष्क्रिय-ट्याब्-नियन्त्रणेषु सेट् भविष्यति । एकदा वर्तमान सक्रिय ट्याब् फोकस भवति तदा कर्सर कील्स् पूर्व/अनन्तरं ट्याब् सक्रियं कुर्वन्ति, प्लगिन् तदनुसारं रोविंग् परिवर्तयति । tabindexतथापि, ध्यानं कुर्वन्तु यत् जावास्क्रिप्ट् प्लगिन् कर्सर-कुंजी-परस्परक्रियाणां विषये क्षैतिज-ऊर्ध्वाधर-ट्याब्-सूचीनां मध्ये भेदं न करोति: ट्याब्-सूचिकायाः अभिमुखीकरणं यथापि भवतु, उपरि वाम- कर्सरः पूर्व-ट्याब्-पर्यन्तं गच्छति, अधः - दक्षिण-कर्सरः च गच्छति अग्रिमः ट्याब् ।

सामान्यतया, कीबोर्ड-सञ्चारस्य सुविधायै, ट्याब्-पटलान् स्वयं अपि केन्द्रीकृतं कर्तुं अनुशंसितम्, यावत् ट्याब्-पटलस्य अन्तः सार्थक-सामग्री-युक्तः प्रथमः तत्त्वः पूर्वमेव केन्द्रीकृतः न भवति tabindex="0"जावास्क्रिप्ट् प्लगिन् एतत् पक्षं सम्भालितुं न प्रयतते-यत्र उचितं, भवद्भिः स्वस्य मार्कअप मध्ये योजयित्वा स्पष्टतया स्वस्य ट्याब्-पटलानि केन्द्रीकृतानि कर्तव्यानि भविष्यन्ति ।

ट्याब् जावास्क्रिप्ट् प्लगिन् ट्याब्ड् इन्टरफेस् समर्थनं न करोति येषु ड्रॉप् डाउन मेन्यू भवति, यतः एते उपयोगितासुगम्यतां च समस्यां जनयन्ति । उपयोगितादृष्ट्या वर्तमानप्रदर्शितस्य ट्याब् इत्यस्य ट्रिगर-तत्त्वं तत्क्षणं न दृश्यते (यतोहि तत् बन्द-ड्रॉप्-डाउन-मेनू-अन्तर्गतं) इति तथ्यं भ्रमस्य कारणं भवितुम् अर्हति सुलभतादृष्ट्या, वर्तमानकाले एतादृशस्य निर्माणस्य मानक WAI ARIA प्रतिमानं प्रति नक्शाङ्कनस्य कोऽपि विवेकपूर्णः उपायः नास्ति, अर्थात् सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः सहजतया अवगम्यं कर्तुं न शक्यते

दत्तांशगुणानां उपयोगः

data-bs-toggle="tab"केवलं निर्दिष्टं कृत्वा अथवा data-bs-toggle="pill"कस्यचित् तत्त्वस्य उपरि किमपि जावास्क्रिप्ट् लिखित्वा विना ट्याब् अथवा पिल् नेविगेशनं सक्रियं कर्तुं शक्नुवन्ति । एतानि data विशेषतानि .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>

जावास्क्रिप्ट् मार्गेण

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

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

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

You can activate individual tabs in several ways:

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 effect

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

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

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Activates your content as a tab element.

You can create a tab instance with the constructor, for example:

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

Method	Description
`dispose`	Destroys an element’s tab.
`getInstance`	Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs).

Events

When showing a new tab, the events fire in the following order:

hide.bs.tab (on the current active tab)
show.bs.tab (on the to-be-shown tab)
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

Event type	Description
`hide.bs.tab`	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
`hidden.bs.tab`	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.
`show.bs.tab`	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`shown.bs.tab`	एतत् इवेण्ट् ट्याब् दर्शितस्य अनन्तरं tab show इत्यत्र प्रज्वलितं भवति । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए `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
})