बूटस्ट्रैप 4 नवस
नव मेनू
यदि आप एक साधारण क्षैतिज मेनू बनाना चाहते हैं, तो
.navकक्षा को एक <ul>तत्व में जोड़ें, उसके बाद .nav-item
प्रत्येक के लिए <li>और .nav-linkकक्षा को उनके लिंक में जोड़ें:
उदाहरण
<ul class="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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
संरेखित नेवी
.justify-content-centerएनएवी को केंद्र में रखने के लिए क्लास जोड़ें , और नेवी .justify-content-endको राइट-अलाइन करने के लिए क्लास जोड़ें।
उदाहरण
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
लंबवत नाव
.flex-columnवर्टिकल नेवी बनाने के लिए क्लास जोड़ें :
उदाहरण
<ul class="nav
flex-column">
टैब
नेविगेशन मेनू को .nav-tabsकक्षा के साथ नेविगेशन टैब में बदलें। .activeकक्षा को सक्रिय/वर्तमान लिंक में जोड़ें । यदि आप टैब को टॉगल करने योग्य बनाना चाहते हैं, तो इस पृष्ठ पर अंतिम उदाहरण देखें।
उदाहरण
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" 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-pillsकक्षा के साथ नेविगेशन गोलियों में बदलें। यदि आप चाहते हैं कि गोलियां टॉगल की जा सकें, तो इस पृष्ठ पर अंतिम उदाहरण देखें।
उदाहरण
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" 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-justifiedवर्ग (समान चौड़ाई) के साथ टैब/गोलियों का औचित्य सिद्ध करें :
उदाहरण
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
ड्रॉपडाउन के साथ गोलियां
उदाहरण
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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>
<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>
ड्रॉपडाउन के साथ टैब
उदाहरण
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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>
<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>
टॉगल करने योग्य / गतिशील टैब
घर
दर्द अपने आप में महत्वपूर्ण है, लेकिन वजन बढ़ने की प्रक्रिया से दर्द बढ़ जाता है, लेकिन मैं इसे काटने का समय देता हूं ताकि मैं कुछ महान काम और दर्द कर सकूं।
टैब को टॉगल करने योग्य बनाने के लिए, data-toggle="tab"प्रत्येक लिंक में विशेषता जोड़ें। फिर .tab-paneप्रत्येक टैब के लिए एक अद्वितीय आईडी के साथ एक वर्ग जोड़ें और उन्हें
<div>वर्ग के साथ एक तत्व के अंदर लपेटें .tab-content।
यदि आप चाहते हैं कि टैब क्लिक करने पर अंदर और बाहर फीके पड़ें, तो इसमें
.fadeकक्षा जोड़ें .tab-pane:
उदाहरण
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
टॉगल करने योग्य / गतिशील गोलियां
घर
दर्द अपने आप में महत्वपूर्ण है, लेकिन वजन बढ़ने की प्रक्रिया से दर्द बढ़ जाता है, लेकिन मैं इसे काटने का समय देता हूं ताकि मैं कुछ महान काम और दर्द कर सकूं।
गोलियों पर भी यही कोड लागू होता है; केवल डेटा-टॉगल विशेषता को इसमें बदलें data-toggle="pill":
उदाहरण
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
पूर्ण बूटस्ट्रैप 4 एनएवी संदर्भ
सभी टैब विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप 4 जेएस टैब संदर्भ पर जाएं ।