बूटस्ट्रैप दे शक्तिशाली, उत्तरदायी नेविगेशन हेडर, नवबार आस्तै दस्तावेजीकरण ते उदाहरण। ब्रांडिंग, नेविगेशन, ते होर मते आस्तै समर्थन शामल ऐ, जिंदे च साढ़े ढहने आह् ले प्लगइन आस्तै समर्थन बी शामल ऐ।
किवें कम्म करदा है
नवबार कन्नै शुरू करने शा पैह् ले तुसेंगी केह् जानना लोड़चदा ऐ:
नवबारें गी प्रतिक्रियाशील ढहने ते रंग योजना वर्गें लेई .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(बड्डे) ब्रेकपॉइंट पर स्वतः ढहदा ऐ।
इस उदाहरन च रंग ( bg-light) ते स्पेसिंग ( my-2, my-lg-0, mr-sm-0, my-sm-0) उपयोगिता वर्गें दा उपयोग कीता जंदा ऐ.
ब्रांड
द .navbar-brandगी मते सारे तत्वें पर लागू कीता जाई सकदा ऐ, पर इक एंकर बेहतर कम्म करदा ऐ की जे किश तत्वें गी उपयोगिता वर्गें जां कस्टम शैलियां दी लोड़ होग.
छवियें गी जोड़ने आस्तै .navbar-brandसंभावना ऐ जे हमेशा कस्टम शैलियें जां उपयोगिताएं गी ठीक ढंगै कन्नै आकार देने दी लोड़ होग. एह्दे प्रदर्शन करने आस्तै किश उदाहरण दित्ते गेदे न।
नव
नवबार नेविगेशन लिंक .navअपने-अपने संशोधक वर्ग कन्नै साढ़े विकल्पें पर निर्माण करदे न ते उचित प्रतिक्रियाशील स्टाइलिंग आस्तै टॉगलर वर्गें दा इस्तेमाल करने दी लोड़ होंदी ऐ। नवबारें च नेविगेशन बी बधी जाग तां जे तुंदी नवबार सामग्री गी सुरक्षत रूप कन्नै संरेखित रक्खेआ जाई सकै जित्थै तगर होई सकै क्षैतिज थाह् र पर कब्जा करी सकै।
सक्रिय अवस्थाएं—साथ .active—वर्तमान पृष्ठ गी दर्शाने आस्तै सीधे .nav-linkएस जां उंदे तत्काल माता-पिता .nav-itemएस पर लागू कीता जाई सकदा ऐ।
ते कीजे अस अपने नवें लेई क्लासें दा इस्तेमाल करदे आं, जेकर तुस चांदे ओ तां तुस सूची-आधारत दृष्टिकोण गी पूरी चाल्ली टाली सकदे ओ।
तुस अपने नवबार नव च ड्रॉपडाउन दा बी इस्तेमाल करी सकदे ओ। ड्रॉपडाउन मेनू गी स्थिति आस्तै इक लपेटने आह् ले तत्व दी लोड़ होंदी ऐ , इसलेई बक्ख-बक्ख ते नेस्टेड तत्वें दा इस्तेमाल करना सुनिश्चत करो आस्तै .nav-itemते .nav-linkजिऱयां कि हेठ दित्ते गेदे न.
रूप दे
कन्नै इक नवबार दे अंदर बक्ख-बक्ख फार्म नियंत्रण ते घटकें गी रक्खो .form-inline.
उपयोग च तत्काल बच्चें तत्व .navbarफ्लेक्स लेआउट ते डिफाल्ट रूप कन्नै justify-content: between. इस व्यवहार गी समायोजित करने लेई जरूरत मताबक अतिरिक्त फ्लेक्स उपयोगिताएं दा इस्तेमाल करो.
इनपुट समूह बी कम्म करदे न:
इनें नवबार फार्में दे हिस्से दे रूप च बी बक्ख-बक्ख बटन समर्थत न। एह् इक बड्डी याददाश्त बी ऐ जे बक्ख-बक्ख आकार दे तत्वें गी संरेखित करने लेई ऊर्ध्वाधर संरेखण उपयोगिताएं दा इस्तेमाल कीता जाई सकदा ऐ।
पाठ
नवबार च .navbar-text. एह् वर्ग पाठ दी स्ट्रिंग्स आस्तै ऊर्ध्वाधर संरेखण ते क्षैतिज अंतराल गी समायोजित करदा ऐ ।
जरूरत मताबक होर घटकें ते उपयोगिताएं कन्नै मिक्स ते मैच करो।
रंग योजनाएं
Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.
Containers
Although it’s not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
Placement
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.
Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
Toggler
Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
With no .navbar-brand shown in lowest breakpoint:
With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right:
External content
कदें-कदें तुस पृष्ठ पर कुसै होर थाह् र पर छिपी दी सामग्री गी ट्रिगर करने आस्तै संकुचित प्लगइन दा इस्तेमाल करना चांह् दे ओ. क्योंकि साडा प्लगइन idते data-targetमिलान ते कम्म करदा ऐ, ए आसानी कन्ने कीता जाई सकदा ऐ!