बूटस्ट्रैप नेविगेशन बार
नेविगेशन बार्स
नेविगेशन बार एक नेविगेशन हेडर है जिसे पेज के शीर्ष पर रखा जाता है:
बूटस्ट्रैप के साथ, स्क्रीन आकार के आधार पर नेविगेशन बार का विस्तार या पतन हो सकता है।
के साथ एक मानक नेविगेशन बार बनाया गया है <nav class="navbar navbar-default">।
निम्न उदाहरण दिखाता है कि पृष्ठ के शीर्ष पर नेविगेशन बार कैसे जोड़ा जाए:
उदाहरण
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
नोट: इस पृष्ठ के सभी उदाहरण एक नेविगेशन बार दिखाएंगे जो छोटी स्क्रीन पर बहुत अधिक जगह लेता है (हालांकि, नेविगेशन बार बड़ी स्क्रीन पर एक ही लाइन पर होगा - क्योंकि बूटस्ट्रैप उत्तरदायी है)। यह समस्या (छोटी स्क्रीन के साथ) इस पृष्ठ पर अंतिम उदाहरण में हल हो जाएगी।
उलटा नेविगेशन बार
यदि आपको डिफ़ॉल्ट नेविगेशन बार की शैली पसंद नहीं है, तो बूटस्ट्रैप एक वैकल्पिक, काला नावबार प्रदान करता है:
बस .navbar-defaultकक्षा को इसमें बदलें .navbar-inverse:
उदाहरण
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
ड्रॉपडाउन के साथ नेविगेशन बार
नेविगेशन बार में ड्रॉपडाउन मेन्यू भी हो सकते हैं।
निम्न उदाहरण "पेज 1" बटन के लिए एक ड्रॉपडाउन मेनू जोड़ता है:
उदाहरण
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
राइट-एलाइनेड नेविगेशन बार
.navbar-rightनेविगेशन बार बटन को राइट-एलाइन करने के लिए क्लास का उपयोग किया जाता है ।
निम्नलिखित उदाहरण में हम नेविगेशन बार में दाईं ओर "साइन अप" बटन और "लॉगिन" बटन डालते हैं। हम दो नए बटनों में से प्रत्येक पर एक ग्लिफ़कॉन भी जोड़ते हैं:
उदाहरण
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
नेवबार बटन
नेवबार के अंदर बटन जोड़ने के लिए, .navbar-btnबूटस्ट्रैप बटन पर वर्ग जोड़ें:
उदाहरण
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
नवबार प्रपत्र
नेवबार के अंदर फॉर्म एलिमेंट जोड़ने के लिए, .navbar-formक्लास को फॉर्म एलिमेंट में जोड़ें और एक इनपुट जोड़ें। ध्यान दें कि हमने .form-groupइनपुट रखने वाले डिव कंटेनर में एक क्लास जोड़ा है। यदि आपके पास एक से अधिक इनपुट हैं तो यह उचित पैडिंग जोड़ता है (आप इसके बारे में प्रपत्र अध्याय में अधिक जानेंगे)।
उदाहरण
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
आप इनपुट फ़ील्ड के बगल में एक आइकन या मदद टेक्स्ट संलग्न करने के लिए .input-groupऔर कक्षाओं का भी उपयोग कर सकते हैं । .input-group-addonआप इन कक्षाओं के बारे में बूटस्ट्रैप इनपुट अध्याय में अधिक जानेंगे।
उदाहरण
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
नेवबार टेक्स्ट
.navbar-textनेवबार के अंदर किसी भी ऐसे तत्व को लंबवत रूप से संरेखित करने के लिए कक्षा का उपयोग करें जो लिंक नहीं हैं (उचित पैडिंग और टेक्स्ट रंग सुनिश्चित करता है)।
उदाहरण
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
फिक्स्ड नेविगेशन बार
नेविगेशन बार को पेज के ऊपर या नीचे भी फिक्स किया जा सकता है।
एक निश्चित नेविगेशन बार पृष्ठ स्क्रॉल से स्वतंत्र एक निश्चित स्थिति (ऊपर या नीचे) में दृश्यमान रहता है।
.navbar-fixed-topक्लास नेविगेशन बार को सबसे ऊपर तय करती है :
उदाहरण
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
.navbar-fixed-bottomकक्षा नेविगेशन बार को सबसे नीचे रखती है :
उदाहरण
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
नेविगेशन बार को तोड़ना
नेविगेशन बार अक्सर छोटी स्क्रीन पर बहुत अधिक जगह लेता है।
हमें नेविगेशन बार छुपाना चाहिए; और केवल तभी दिखाएं जब इसकी आवश्यकता हो।
निम्नलिखित उदाहरण में नेविगेशन बार को ऊपरी दाएं कोने में एक बटन से बदल दिया गया है। केवल जब बटन क्लिक किया जाता है, तो नेविगेशन बार प्रदर्शित होगा:
उदाहरण
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>