बूटस्ट्रैप टैब और गोलियां
मेनू
अधिकांश वेब पेजों में किसी न किसी प्रकार का मेनू होता है।
एचटीएमएल में, एक मेनू को अक्सर एक अनियंत्रित सूची <ul>(और बाद में स्टाइल) में परिभाषित किया जाता है, जैसे:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
यदि आप ऊपर दी गई सूची का एक क्षैतिज मेनू बनाना चाहते हैं, तो
.list-inlineकक्षा को इसमें जोड़ें <ul>:
<ul class="list-inline">
या आप ऊपर दिए गए मेनू को बूटस्ट्रैप्स टैब्स एंड पिल्स (नीचे देखें) के साथ प्रदर्शित कर सकते हैं।
नोट: टैब और गोलियों को टॉगल करने योग्य/गतिशील बनाने का तरीका जानने के लिए इस पृष्ठ पर अंतिम उदाहरण देखें ।
टैब
टैब इसके साथ बनाए गए हैं <ul class="nav nav-tabs">:
युक्ति: वर्तमान पृष्ठ को के साथ भी चिह्नित करें <li class="active">।
निम्न उदाहरण नेविगेशन टैब बनाता है:
उदाहरण
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
ड्रॉपडाउन मेनू के साथ टैब
टैब ड्रॉपडाउन मेनू भी रख सकते हैं।
निम्न उदाहरण "मेनू 1" में एक ड्रॉपडाउन मेनू जोड़ता है:
उदाहरण
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
गोलियाँ
से गोलियां बनाई जाती हैं <ul class="nav nav-pills">। वर्तमान पृष्ठ को भी इसके साथ चिह्नित करें
<li class="active">:
उदाहरण
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
लंबवत गोलियां
गोलियों को लंबवत भी प्रदर्शित किया जा सकता है। बस .nav-stackedकक्षा जोड़ें:
उदाहरण
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
एक पंक्ति में लंबवत गोलियां
मूलपाठ...
मूलपाठ...
मूलपाठ...
निम्न उदाहरण लंबवत गोली मेनू को अंतिम कॉलम के अंदर रखता है। तो, एक बड़ी स्क्रीन पर मेनू दाईं ओर प्रदर्शित होगा। लेकिन छोटी स्क्रीन पर, सामग्री स्वचालित रूप से एकल-स्तंभ लेआउट में समायोजित हो जाएगी:
उदाहरण
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
ड्रॉपडाउन मेनू के साथ गोलियां
गोलियां ड्रॉपडाउन मेनू भी रख सकती हैं।
निम्न उदाहरण "मेनू 1" में एक ड्रॉपडाउन मेनू जोड़ता है:
उदाहरण
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
केंद्रित टैब और गोलियां
टैब और गोलियों को केंद्र में रखने/उचित करने के लिए, .nav-justifiedकक्षा का उपयोग करें।
ध्यान दें कि 768px से छोटी स्क्रीन पर, सूची आइटम स्टैक किए जाते हैं (सामग्री केंद्रित रहेगी):
उदाहरण
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
टॉगल करने योग्य / गतिशील टैब
घर
दर्द अपने आप में महत्वपूर्ण है, लेकिन वजन बढ़ने की प्रक्रिया से दर्द बढ़ जाता है, लेकिन मैं इसे काटने का समय देता हूं ताकि मैं कुछ महान काम और दर्द कर सकूं।
टैब को टॉगल करने योग्य बनाने के लिए, data-toggle="tab"प्रत्येक लिंक में विशेषता जोड़ें। फिर .tab-paneप्रत्येक टैब के लिए एक अद्वितीय आईडी के साथ एक वर्ग जोड़ें और उन्हें
<div>वर्ग के साथ एक तत्व के अंदर लपेटें .tab-content।
यदि आप चाहते हैं कि टैब क्लिक करने पर अंदर और बाहर फीके पड़ें, तो इसमें
.fadeकक्षा जोड़ें .tab-pane:
उदाहरण
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
टॉगल करने योग्य / गतिशील गोलियां
गोलियों पर भी यही कोड लागू होता है; केवल डेटा-टॉगल विशेषता को इसमें बदलें data-toggle="pill":
उदाहरण
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
पूर्ण बूटस्ट्रैप नेविगेशन संदर्भ
सभी नेविगेशन कक्षाओं के संपूर्ण संदर्भ के लिए, हमारे संपूर्ण बूटस्ट्रैप नेविगेशन संदर्भ पर जाएं ।
सभी टैब विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस टैब संदर्भ पर जाएं ।