बूटस्ट्रैप 4 नेविगेशन बार
नेविगेशन बार्स
नेविगेशन बार एक नेविगेशन हेडर है जिसे पेज के शीर्ष पर रखा जाता है:
मूल नवबार
बूटस्ट्रैप के साथ, स्क्रीन आकार के आधार पर नेविगेशन बार का विस्तार या पतन हो सकता है।
कक्षा के साथ एक मानक नेविगेशन बार बनाया जाता है .navbar
, उसके बाद एक उत्तरदायी ढहने वाला वर्ग होता है: .navbar-expand-xl|lg|md|sm
(अतिरिक्त बड़ी, बड़ी, मध्यम या छोटी स्क्रीन पर नेवबार को लंबवत रूप से ढेर करता है)।
नेवबार के अंदर लिंक जोड़ने के लिए, के <ul>साथ एक तत्व का उपयोग करें class="navbar-nav"। फिर एक वर्ग <li>के साथ तत्वों को एक वर्ग के साथ एक तत्व के साथ जोड़ें :.nav-item<a>.nav-link
उदाहरण
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
लंबवत नवबार
.navbar-expand-xl|lg|md|smलंबवत नेविगेशन बार बनाने के लिए कक्षा निकालें :
उदाहरण
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
केंद्रित नवबार
.justify-content-centerनेविगेशन बार को केंद्र में रखने के लिए कक्षा जोड़ें ।
निम्न उदाहरण मध्यम, बड़ी और अतिरिक्त बड़ी स्क्रीन पर नेविगेशन बार को केन्द्रित करेगा। छोटी स्क्रीन पर इसे लंबवत और बाएं संरेखित (.navbar-expand-sm वर्ग के कारण) प्रदर्शित किया जाएगा:
उदाहरण
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
रंगीन नवबार
नेवबार ( , , , , , , और ) .bg-colorकी पृष्ठभूमि का रंग बदलने के लिए किसी भी वर्ग का उपयोग करें.bg-primary
.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
युक्ति: कक्षा के साथ नेवबार में सभी लिंक में एक सफेद.navbar-dark टेक्स्ट रंग जोड़ें , या एक काला टेक्स्ट रंग .navbar-lightजोड़ने के लिए कक्षा का
उपयोग करें।
उदाहरण
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
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="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
सक्रिय/अक्षम स्थिति : वर्तमान लिंक को हाइलाइट करने के .activeलिए किसी तत्व में वर्ग
जोड़ें, या यह इंगित करने के लिए वर्ग जोड़ें कि लिंक क्लिक करने योग्य नहीं है।<a>.disabled
ब्रांड लोगो
.navbar-brandआपके पृष्ठ के ब्रांड/लोगो/प्रोजेक्ट नाम को हाइलाइट करने के लिए कक्षा का उपयोग किया जाता है :
उदाहरण
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
छवियों पर वर्ग का उपयोग करते समय .navbar-brand, बूटस्ट्रैप 4 स्वचालित रूप से छवि को नेवबार को लंबवत रूप से फिट करने के लिए स्टाइल करेगा।
उदाहरण
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
नेविगेशन बार को तोड़ना
बहुत बार, विशेष रूप से छोटी स्क्रीन पर, आप नेविगेशन लिंक को छिपाना चाहते हैं और उन्हें एक बटन से बदलना चाहते हैं, जिस पर क्लिक करने पर उन्हें प्रकट करना चाहिए।
बंधनेवाला नेविगेशन बार बनाने के लिए, के साथ एक बटन का उपयोग करें । फिर नेवबार सामग्री (लिंक, आदि) को एक div तत्व के अंदर लपेटें , उसके बाद एक आईडी जो बटन से मेल खाती है: " thetarget "।class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
उदाहरण
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<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"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
युक्ति: आप .navbar-expand-md वर्ग को हमेशा नेवबार लिंक छिपाने और टॉगलर बटन प्रदर्शित करने के लिए भी हटा सकते हैं।
ड्रॉपडाउन के साथ नेवबार
नेवबार ड्रॉपडाउन मेनू भी रख सकते हैं:
उदाहरण
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
नेवबार फॉर्म और बटन
समूह इनपुट और बटन के <form>साथ एक तत्व जोड़ें :class="form-inline"
उदाहरण
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
आप अन्य इनपुट क्लासेस का भी उपयोग कर सकते हैं, जैसे कि इनपुट फ़ील्ड के आगे एक आइकन या हेल्प टेक्स्ट संलग्न करना .input-group-prependया संलग्न करना। .input-group-appendआप इन कक्षाओं के बारे में बूटस्ट्रैप इनपुट अध्याय में अधिक जानेंगे।
उदाहरण
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
नेवबार टेक्स्ट
.navbar-textनेवबार के अंदर किसी भी ऐसे तत्व को लंबवत रूप से संरेखित करने के लिए कक्षा का उपयोग करें जो लिंक नहीं हैं (उचित पैडिंग और टेक्स्ट रंग सुनिश्चित करता है)।
उदाहरण
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
फिक्स्ड नेविगेशन बार
नेविगेशन बार को पेज के ऊपर या नीचे भी फिक्स किया जा सकता है।
एक निश्चित नेविगेशन बार पृष्ठ स्क्रॉल से स्वतंत्र एक निश्चित स्थिति (ऊपर या नीचे) में दृश्यमान रहता है।
.fixed-topवर्ग नेविगेशन बार को शीर्ष पर तय करता है :
उदाहरण
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
.fixed-bottomनेवबार को पृष्ठ के निचले भाग पर बने रहने के लिए कक्षा का उपयोग करें :
उदाहरण
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>