Source

नवबर जी

बूटस्ट्रैप दे शक्तिशाली, उत्तरदायी नेविगेशन हेडर, नवबार आस्तै दस्तावेजीकरण ते उदाहरण। ब्रांडिंग, नेविगेशन, ते होर मते आस्तै समर्थन शामल ऐ, जिंदे च साढ़े ढहने आह् ले प्लगइन आस्तै समर्थन बी शामल ऐ।

किवें कम्म करदा है

नवबार कन्नै शुरू करने शा पैह् ले तुसेंगी केह् जानना लोड़चदा ऐ:

  • नवबारें गी प्रतिक्रियाशील ढहने ते रंग योजना वर्गें लेई .navbarकन्नै इक रैपिंग दी लोड़ होंदी ऐ।.navbar-expand{-sm|-md|-lg|-xl}
  • नवबार ते उंदी सामग्री डिफ़ॉल्ट रूप कन्नै तरल ऐ। उंदी क्षैतिज चौड़ाई गी सीमित करने आस्तै वैकल्पिक कंटेनरें दा इस्तेमाल करो।
  • नवबारें दे अंदर स्पेसिंग ते संरेखण गी नियंत्रित करने आस्तै साढ़ी स्पेसिंग ते फ्लेक्स यूटिलिटी क्लासें दा इस्तेमाल करो.
  • नवबार डिफ़ॉल्ट रूप कन्नै प्रतिक्रियाशील न, पर तुस उसगी बदलने आस्तै उनेंगी आसानी कन्नै संशोधित करी सकदे ओ. उत्तरदायी व्यवहार साढ़े संकुचित जावास्क्रिप्ट प्लगइन पर निर्भर करदा ऐ।
  • छपाई करदे बेल्लै नवबार डिफ़ॉल्ट रूप कन्नै छिपे दे न। च जोड़ियै उनेंगी छपने लेई मजबूर .d-printकरो .navbar. प्रदर्शन उपयोगिता वर्ग दिक्खो ।
  • इक तत्व दा उपयोग करियै सुलभता सुनिश्चत करो <nav>जां, जेकर इक होर जेनेरिक तत्व जि’यां इक दा उपयोग करदे ओ तां हर नवबार <div>च a जोड़ो तां जे सहायक तकनीकें दे बरतूनकर्ताएं आस्तै इसगी इक लैंडमार्क क्षेत्र दे रूप च स्पश्ट रूप कन्नै पन्छानेआ जाई सकै।role="navigation"

इस घटक दा एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर करदा ऐ। साढ़े सुलभता दस्तावेजें दा घट्ट कीती गेदी गति खंड दिक्खो .

समर्थत उप-घटकें दी इक उदाहरन ते सूची आस्तै अग्गें पढ़ो.

समर्थत सामग्री

नवबार मुट्ठी भर उप-घटकें लेई बिल्ट-इन समर्थन कन्नै औंदे न। जरूरत मताबक निम्नलिखित च चुनो:

  • .navbar-brandअपनी कंपनी, उत्पाद, जां प्रोजेक्ट दे नांऽ आस्तै।
  • .navbar-navपूर्ण-ऊँचाई ते हल्के वजन आह् ले नेविगेशन आस्तै (ड्रॉपडाउन आस्तै समर्थन समेत)।
  • .navbar-togglerसाढ़े कोलैप्स प्लगइन ते होर नेविगेशन टॉगलिंग व्यवहारें कन्नै इस्तेमाल आस्तै.
  • .form-inlineकिसे बी रूप नियंत्रण ते कार्रवाईयें लेई।
  • .navbar-textपाठ दी लंबवत केंद्रित स्ट्रिंग्स गी जोड़ने आस्तै।
  • .collapse.navbar-collapseइक पैरेंट ब्रेकपॉइंट आसेआ नवबार सामग्री गी समूहीकृत करने ते छिपाने आस्तै।

इत्थै इक प्रतिक्रियाशील प्रकाश-थीम आह् ले नवबार च शामल सब्भै उप-घटकें दा इक उदाहरण ऐ जेह् ड़ा lg(बड्डे) ब्रेकपॉइंट पर स्वतः ढहदा ऐ।

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

इस उदाहरन च रंग ( bg-light) ते स्पेसिंग ( my-2, my-lg-0, mr-sm-0, my-sm-0) उपयोगिता वर्गें दा उपयोग कीता जंदा ऐ.

ब्रांड

द .navbar-brandगी मते सारे तत्वें पर लागू कीता जाई सकदा ऐ, पर इक एंकर बेहतर कम्म करदा ऐ की जे किश तत्वें गी उपयोगिता वर्गें जां कस्टम शैलियां दी लोड़ होई सकदी ऐ.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

छवियें गी जोड़ने आस्तै .navbar-brandसंभावना ऐ जे हमेशा कस्टम शैलियें जां उपयोगिताएं गी ठीक ढंगै कन्नै आकार देने दी लोड़ होग. एह्दे प्रदर्शन करने आस्तै किश उदाहरण दित्ते गेदे न।

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

नवबार नेविगेशन लिंक .navअपने-अपने संशोधक वर्ग कन्नै साढ़े विकल्पें पर निर्माण करदे न ते उचित प्रतिक्रियाशील स्टाइलिंग आस्तै टॉगलर वर्गें दा इस्तेमाल करने दी लोड़ होंदी ऐ। नवबारें च नेविगेशन बी बधी जाग तां जे तुंदी नवबार सामग्री गी सुरक्षत रूप कन्नै संरेखित रक्खेआ जाई सकै जित्थै तगर होई सकै क्षैतिज थाह् र पर कब्जा करी सकै।

सक्रिय अवस्थाएं—साथ .active—वर्तमान पृष्ठ गी दर्शाने आस्तै सीधे .nav-linkएस जां उंदे तत्काल माता-पिता .nav-itemएस पर लागू कीता जाई सकदा ऐ.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

ते कीजे अस अपने नवें लेई क्लासें दा इस्तेमाल करदे आं, जेकर तुस चांदे ओ तां तुस सूची-आधारत दृष्टिकोण गी पूरी चाल्ली टाली सकदे ओ।

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

तुस अपने नवबार नव च ड्रॉपडाउन दा बी इस्तेमाल करी सकदे ओ। ड्रॉपडाउन मेनू गी स्थिति आस्तै इक लपेटने आह् ले तत्व दी लोड़ होंदी ऐ , इसलेई बक्ख-बक्ख ते नेस्टेड तत्वें दा इस्तेमाल करना सुनिश्चत करो आस्तै .nav-itemते .nav-linkजिऱयां कि हेठ दित्ते गेदे न.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

रूप दे

कन्नै इक नवबार दे अंदर बक्ख-बक्ख फार्म नियंत्रण ते घटकें गी रक्खो .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

उपयोग च तत्काल बच्चें तत्व .navbarफ्लेक्स लेआउट ते डिफाल्ट रूप कन्नै justify-content: space-between. इस व्यवहार गी समायोजित करने लेई जरूरत मताबक अतिरिक्त फ्लेक्स उपयोगिताएं दा इस्तेमाल करो.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

इनपुट समूह बी कम्म करदे न:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

इनें नवबार फार्में दे हिस्से दे रूप च बी बक्ख-बक्ख बटन समर्थत न। एह् इक बड्डी याददाश्त बी ऐ जे बक्ख-बक्ख आकार दे तत्वें गी संरेखित करने लेई ऊर्ध्वाधर संरेखण उपयोगिताएं दा इस्तेमाल कीता जाई सकदा ऐ।

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

पाठ

नवबार च .navbar-text. एह् वर्ग पाठ दी स्ट्रिंग्स आस्तै ऊर्ध्वाधर संरेखण ते क्षैतिज अंतराल गी समायोजित करदा ऐ ।

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

जरूरत मताबक होर घटकें ते उपयोगिताएं कन्नै मिक्स ते मैच करो।

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

रंग योजनाएं

नवबार गी थीम करना कदें बी इस थमां आसान नेईं होई सकेआ ऐ जेह् ड़ी थीमिंग वर्गें ते background-colorउपयोगिताएं दे संयोजन दी बदौलत ऐ। .navbar-lightहल्के पृष्ठभूमि रंगें कन्नै इस्तेमाल आस्तै, जां .navbar-darkगहरे पृष्ठभूमि रंगें आस्तै चुनो . फिर, .bg-*उपयोगिताएं कन्नै अनुकूलित करो।

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

कंटेनर

हालांकि एह् जरूरी नेईं ऐ , तुस .containerइक पृष्ठ पर केंद्रत करने आस्तै इक नवबार गी इक च लपेटी सकदे ओ जां इक अंदर जोड़ सकदे ओ तां जे सिर्फ इक स्थिर जां स्थिर शीर्शक नवबार दी सामग्री गी केंद्रत कीता जाई सकै .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

.navbar-expand{-sm|-md|-lg|-xl}जदूं कंटेनर तुंदे नवबार दे अंदर होंदा ऐ तां इसदी क्षैतिज पैडिंग तुंदे निर्दिश्ट वर्ग थमां घट्ट ब्रेकपॉइंटें पर हटाई दित्ती जंदी ऐ . एह् सुनिश्चत करदा ऐ जे जिसलै तुंदा नवबार ढहदा ऐ तां अस निचले व्यूपोर्टें पर गैर-जरूरी पैडिंग पर दोगुना नेईं करा करदे आं.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

प्लेसमेंट करना

नवबारें गी गैर-स्थिर स्थिति च रक्खने लेई साढ़ी स्थिति उपयोगिताएं दा इस्तेमाल करो। शीर्शक तगर स्थिर, निचले पास्सै स्थिर, जां शीर्शक तगर चिपकने आह् ले थमां चुनो (पृष्ठ कन्नै स्क्रॉल करदा ऐ जिसलै तकर ओह् शीर्शक तगर नेईं पुज्जी जंदा, फ्ही उत्थें गै रौंह् दा ऐ)। फिक्स्ड नवबार दा इस्तेमाल कीता जंदा ऐ position: fixed, मतलब एह् DOM दे सामान्य प्रवाह थमां खींचे गेदे न ते होर तत्वें कन्नै ओवरलैप गी रोकने आस्तै कस्टम CSS (जियां, padding-topपर ) दी लोड़ होई सकदी ऐ.<body>

एह् बी ध्यान रक्खो जे .sticky-topइस्तेमाल करदा ऐ position: sticky, जेह् ड़ा हर ब्राउज़र च पूरी चाल्ली समर्थत नेईं ऐ .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

प्रतिक्रियाशील व्यवहार

नवबार .navbar-toggler, .navbar-collapse, ते .navbar-expand{-sm|-md|-lg|-xl}क्लासें दा उपयोग करियै बदलने लेई करी सकदे न जिसलै उंदी सामग्री इक बटन दे पिच्छें ढहदी ऐ. होर उपयोगिताएं कन्नै मिलियै, तुस बड़ी असानी कन्नै चुन सकदे ओ जे खास तत्वें गी कदूं दस्सना जां छुपाना ऐ।

नवबारें आस्तै जेह् ड़े कदें बी ढहदे नेईं न, .navbar-expandनवबार पर क्लास जोड़ो. नवबारें लेई जेह् ड़े हमेशा ढहदे न, कोई बी .navbar-expandक्लास नेईं जोड़ो।

टॉगलर ने दी

नवबार टॉगलर डिफ़ॉल्ट रूप कन्नै बाएं-संरेखित कीते गेदे न, पर जेकर ओह् इक भाई-बहन तत्व दा पालन करदे न जिऱयां इक .navbar-brand, तां ओह् स्वतः सुदूर दाएं पास्सै संरेखित होङन. अपने मार्कअप गी उल्टा करने कन्नै टॉगलर दी प्लेसमेंट उल्टा होई जाग। हेठ बक्ख-बक्ख टॉगल शैलियें दे उदाहरण दित्ते गेदे न।

.navbar-brandनिचले ब्रेकपॉइंट च कोई नेईं दस्सेआ गेआ ऐ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

बाएं पास्से दस्सेआ गेदा ब्रांड नांऽ ते दाएं पास्से टॉगलर कन्नै:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

बाएं पास्से टॉगलर ते दाएं पास्से ब्रांड नाम कन्नै:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

बाहरी सामग्री

कदें-कदें तुस पृष्ठ पर कुसै होर थाह् र पर छिपी दी सामग्री गी ट्रिगर करने आस्तै संकुचित प्लगइन दा इस्तेमाल करना चांह् दे ओ. क्योंकि साडा प्लगइन idते data-targetमिलान ते कम्म करदा ऐ, ए आसानी कन्ने कीता जाई सकदा ऐ!

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>