बूटस्ट्रैप 4 ड्रॉपडाउन
मूल ड्रॉपडाउन
ड्रॉपडाउन मेनू एक टॉगल करने योग्य मेनू है जो उपयोगकर्ता को पूर्वनिर्धारित सूची से एक मान चुनने की अनुमति देता है:
उदाहरण
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<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>
</div>
उदाहरण समझाया गया
.dropdownवर्ग एक ड्रॉपडाउन मेनू इंगित करता है ।
ड्रॉपडाउन मेनू खोलने के लिए, किसी वर्ग .dropdown-toggleऔर
data-toggle="dropdown"विशेषता वाले बटन या लिंक का उपयोग करें।
वास्तव में ड्रॉपडाउन मेनू बनाने के लिए .dropdown-menuकक्षा को एक तत्व में जोड़ें । <div>फिर
.dropdown-itemड्रॉपडाउन मेनू के अंदर प्रत्येक तत्व (लिंक या बटन) में कक्षा जोड़ें।
ड्रॉपडाउन डिवाइडर
कक्षा का .dropdown-dividerउपयोग ड्रॉपडाउन मेनू के अंदर एक पतली क्षैतिज सीमा के साथ लिंक को अलग करने के लिए किया जाता है:
उदाहरण
<div class="dropdown-divider"></div>
ड्रॉपडाउन हैडर
.dropdown-headerड्रॉपडाउन मेनू के अंदर हेडर जोड़ने के लिए क्लास का उपयोग किया जाता है :
उदाहरण
<div class="dropdown-header">Dropdown header 1</div>
अक्षम और सक्रिय आइटम
कक्षा के साथ एक विशिष्ट ड्रॉपडाउन आइटम हाइलाइट करें .active(नीला पृष्ठभूमि रंग जोड़ता है)।
ड्रॉपडाउन मेनू में किसी आइटम को अक्षम करने के लिए, .disabledकक्षा का उपयोग करें (हल्के भूरे रंग का टेक्स्ट रंग और होवर पर "नो-पार्किंग-साइन" आइकन प्राप्त होता है):
उदाहरण
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
ड्रॉपडाउन स्थिति
आप ड्रॉपडाउन तत्व में .droprightया वर्ग जोड़कर "ड्रॉपराइट" या "ड्रॉपलेफ्ट" मेनू भी बना सकते हैं । .dropleftध्यान दें कि कैरेट/एरो अपने आप जुड़ जाता है:
ड्रॉपराइट
<div class="dropdown dropright">
ड्रॉपलेफ्ट
<div class="dropdown dropleft">
ड्रॉपडाउन मेनू राइट
ड्रॉपडाउन मेनू को राइट- .dropdown-menu-rightएलाइन करने के लिए, .ड्रॉपडाउन-मेनू के साथ क्लास को एलिमेंट में जोड़ें:
उदाहरण
<div class="dropdown-menu dropdown-menu-right">
ऊपर की ओर जाना
यदि आप चाहते हैं कि ड्रॉपडाउन मेनू नीचे की बजाय ऊपर की ओर बढ़े, तो <div> तत्व को वर्ग = "ड्रॉपडाउन" के साथ बदलें "dropup":
उदाहरण
<div class="dropup">
ड्रॉपडाउन टेक्स्ट
क्लास का .dropdown-item-textउपयोग ड्रॉपडाउन आइटम में सादा पाठ जोड़ने के लिए किया जाता है, या डिफ़ॉल्ट लिंक स्टाइल के लिए लिंक पर उपयोग किया जाता है।
उदाहरण
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
ड्रॉपडाउन के साथ समूहीकृत बटन
उदाहरण
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
स्प्लिट बटन ड्रॉपडाउन
उदाहरण
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
लंबवत बटन समूह डब्ल्यू / ड्रॉपडाउन
उदाहरण
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
पूर्ण बूटस्ट्रैप 4 ड्रॉपडाउन संदर्भ
सभी ड्रॉपडाउन विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप 4 जेएस ड्रॉपडाउन संदर्भ पर जाएं ।