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

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

इस पृष्ठ पर

Base nav

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

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

आधारघटके कस्यापि अवस्थायाः .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 items इव व्यवहारं कुर्वन्ति, परन्तु अतिरिक्तं मार्कअपं विना ।

<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 utilities इत्यनेन सह स्वस्य 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" 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 item direction परिवर्त्य स्वस्य नेविगेशनं स्तम्भयन्तु । केषुचित् viewports इत्यत्र तान् स्तम्भयितुं आवश्यकता अस्ति किन्तु अन्येषु न? प्रतिक्रियाशीलसंस्करणानाम् उपयोगं कुर्वन्तु (उदा., .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 गृहीत्वा .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>

गोलियाँ

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

भरकर न्याय्यता दें

.navद्वयोः परिवर्तकवर्गयोः एकं पूर्णं उपलब्धं विस्तारं विस्तारयितुं भवतः 's सामग्रीं बाध्यं कुर्वन्तु । भवतः .nav-items इत्यनेन सर्वाणि उपलब्धानि स्थानानि आनुपातिकरूपेण पूरयितुं , इत्यस्य उपयोगं कुर्वन्तु .nav-fill। ध्यानं कुर्वन्तु यत् सर्वं क्षैतिजस्थानं व्याप्तम् अस्ति, परन्तु प्रत्येकस्य nav item इत्यस्य विस्तारः समानः नास्ति ।

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

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" 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 भिन्नतानां आवश्यकतां अनुभवन्ति, तर्हि flexbox उपयोगितानां श्रृङ्खलायाः उपयोगं विचारयन्तु . अधिकं वाचिकं भवति चेदपि, एतानि उपयोगितानि प्रतिक्रियाशीलविरामबिन्दुषु अधिकं अनुकूलनं प्रदास्यन्ति । अधोलिखिते उदाहरणे अस्माकं nav न्यूनतमे breakpoint इत्यत्र stacked भविष्यति, ततः लघु breakpoint तः आरभ्य उपलब्धं विस्तारं पूरयति इति क्षैतिजविन्यासे अनुकूलतां प्राप्स्यति ।

<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 -मध्ये वर्णितम् अस्ति । उदाहरणार्थं अस्मिन् खण्डे गतिशील-ट्याब्-अन्तरफलकानां कृते JavaScript व्यवहारं पश्यन्तु । अस्माकं जावास्क्रिप्ट् सक्रिय-ट्याब्-उपरि योजयित्वा चयनित-स्थितिं सम्पादयति इति कारणतः डायनामिक-ट्याब्ड्-इण्टरफेस्- मध्ये विशेषता आवश्यकी नास्ति ।role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

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

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" 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;

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

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

गतिशील-टैब-अन्तरफलकानि, यथा WAI ARIA Authoring Practices -मध्ये वर्णितम् , सहायक-प्रौद्योगिकीनां (यथा स्क्रीन-रीडर-इत्यादीनां) उपयोक्तृभ्यः स्वस्य संरचना, कार्यक्षमतां, वर्तमान-स्थितिं च प्रसारयितुं role="tablist", role="tab", role="tabpanel", अतिरिक्त- गुणानां च आवश्यकता भवति aria-उत्तम-अभ्यासरूपेण, वयं <button>ट्याब्स् कृते तत्त्वानां उपयोगं अनुशंसयामः, यतः एते नियन्त्रणानि सन्ति ये गतिशीलं परिवर्तनं प्रेरयन्ति, न तु नूतनपृष्ठं स्थानं वा गच्छन्ति लिङ्कानि

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

इदं किञ्चित् स्थानधारकसामग्री 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.

<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>-आधारित-मार्कअप-सहितं कार्यं करोति, यथा उपरि दर्शितम्, अथवा कस्यापि मनमानेन “roll your own”-मार्कअप-सहितम् । ध्यानं कुर्वन्तु यत् यदि भवान् , इत्यस्य उपयोगं करोति तर्हि भवान् तस्मिन् प्रत्यक्षतया <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"कस्यचित् तत्त्वस्य उपरि किमपि जावास्क्रिप्ट् लिखित्वा विना ट्याब् अथवा पिल् नेविगेशनं सक्रियं कर्तुं शक्नुवन्ति । एतानि 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">...</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>

दर्शयतु

दत्तं ट्याब् चित्वा तस्य सम्बद्धं फलकं दर्शयति । अन्यः कोऽपि ट्याब् यः पूर्वं चयनितः आसीत् सः अचयनितः भवति तस्य सम्बद्धं फलकं च गुप्तं भवति । ट्याब् फलकं वास्तवतः दर्शितस्य पूर्वं (अर्थात् 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

getOrCreateइन्स्टेंस इति

स्थिरविधिः या भवन्तं 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.taband hidden.bs.tabइवेण्ट्स् न प्रज्वलिताः भविष्यन्ति ।

घटना प्रकार	वर्णनम्‌
`show.bs.tab`	इदं इवेण्ट् ट्याब् शो इत्यत्र अग्निम् अङ्गीकुर्वति, परन्तु नूतनं ट्याब् दर्शितस्य पूर्वं । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए `event.target`और का प्रयोग करें ।`event.relatedTarget`
`shown.bs.tab`	एतत् इवेण्ट् ट्याब् दर्शितस्य अनन्तरं tab show इत्यत्र प्रज्वलितं भवति । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए `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
})