नवबर जी
बूटस्ट्रैप दे शक्तिशाली, उत्तरदायी नेविगेशन हेडर, नवबार आस्तै दस्तावेजीकरण ते उदाहरण। ब्रांडिंग, नेविगेशन, ते होर मते आस्तै समर्थन शामल ऐ, जिंदे च साढ़े ढहने आह् ले प्लगइन आस्तै समर्थन बी शामल ऐ।
नवबार कन्नै शुरू करने शा पैह् ले तुसेंगी केह् जानना लोड़चदा ऐ:
- नवबारें गी प्रतिक्रियाशील ढहने ते रंग योजना वर्गें लेई
.navbarकन्नै इक रैपिंग दी लोड़ होंदी ऐ।.navbar-expand{-sm|-md|-lg|-xl} - नवबार ते उंदी सामग्री डिफ़ॉल्ट रूप कन्नै तरल ऐ। उंदी क्षैतिज चौड़ाई गी सीमित करने आस्तै वैकल्पिक कंटेनरें दा इस्तेमाल करो।
- नवबारें दे अंदर स्पेसिंग ते संरेखण गी नियंत्रित करने आस्तै साढ़ी स्पेसिंग ते फ्लेक्स यूटिलिटी क्लासें दा इस्तेमाल करो.
- नवबार डिफ़ॉल्ट रूप कन्नै प्रतिक्रियाशील न, पर तुस उसगी बदलने आस्तै उनेंगी आसानी कन्नै संशोधित करी सकदे ओ. उत्तरदायी व्यवहार साढ़े संकुचित जावास्क्रिप्ट प्लगइन पर निर्भर करदा ऐ।
- छपाई करदे बेल्लै नवबार डिफ़ॉल्ट रूप कन्नै छिपे दे न। च जोड़ियै उनेंगी छपने लेई मजबूर
.d-printकरो.navbar. प्रदर्शन उपयोगिता वर्ग दिक्खो । - इक तत्व दा उपयोग करियै सुलभता सुनिश्चत करो
<nav>जां, जेकर इक होर जेनेरिक तत्व जि’यां इक दा उपयोग करदे ओ तां हर नवबार<div>च a जोड़ो तां जे सहायक तकनीकें दे बरतूनकर्ताएं आस्तै इसगी इक लैंडमार्क क्षेत्र दे रूप च स्पश्ट रूप कन्नै पन्छानेआ जाई सकै।role="navigation"
समर्थत उप-घटकें दी इक उदाहरन ते सूची आस्तै अग्गें पढ़ो.
नवबार मुट्ठी भर उप-घटकें लेई बिल्ट-इन समर्थन कन्नै औंदे न। जरूरत मताबक निम्नलिखित च चुनो:
.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="#">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.0/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.0/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="#">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="#">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" 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>अपने इनलाइन फार्म दी सामग्री गी जरूरत मताबक उपयोगिताएं कन्नै संरेखित करो।
<nav class="navbar navbar-light bg-light justify-content-between">
<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="#">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="#">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="#">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">
<h4 class="text-white">Collapsed content</h4>
<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>