बूटस्ट्रैप ड्रॉपडाउन
मूल ड्रॉपडाउन
ड्रॉपडाउन मेनू एक टॉगल करने योग्य मेनू है जो उपयोगकर्ता को पूर्वनिर्धारित सूची से एक मान चुनने की अनुमति देता है:
उदाहरण
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
उदाहरण समझाया गया
.dropdownवर्ग एक ड्रॉपडाउन मेनू इंगित करता है ।
ड्रॉपडाउन मेनू खोलने के लिए, किसी वर्ग .dropdown-toggleऔर
data-toggle="dropdown"विशेषता वाले बटन या लिंक का उपयोग करें।
वर्ग एक .caretकैरेट तीर चिह्न बनाता है (), जो इंगित करता है कि बटन एक ड्रॉपडाउन है।
वास्तव में ड्रॉपडाउन मेनू बनाने के लिए .dropdown-menuकक्षा को एक तत्व में जोड़ें ।<ul>
ड्रॉपडाउन डिवाइडर
कक्षा का .dividerउपयोग ड्रॉपडाउन मेनू के अंदर एक पतली क्षैतिज सीमा के साथ लिंक को अलग करने के लिए किया जाता है:
उदाहरण
<li class="divider"></li>
ड्रॉपडाउन हैडर
.dropdown-headerड्रॉपडाउन मेनू के अंदर हेडर जोड़ने के लिए क्लास का उपयोग किया जाता है :
उदाहरण
<li class="dropdown-header">Dropdown header 1</li>
अक्षम और सक्रिय आइटम
सक्रिय वर्ग के साथ एक विशिष्ट ड्रॉपडाउन आइटम को हाइलाइट करें (नीला पृष्ठभूमि रंग जोड़ता है)।
ड्रॉपडाउन मेनू में किसी आइटम को अक्षम करने के लिए, .disabledकक्षा का उपयोग करें (हल्के भूरे रंग का टेक्स्ट रंग और होवर पर "नो-पार्किंग-साइन" आइकन प्राप्त होता है):
उदाहरण
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
ड्रॉपडाउन स्थिति
ड्रॉपडाउन को राइट-एलाइन .dropdown-menu-rightकरने के लिए, .ड्रॉपडाउन-मेनू के साथ क्लास को एलिमेंट में जोड़ें:
उदाहरण
<ul class="dropdown-menu dropdown-menu-right">
ऊपर की ओर जाना
यदि आप चाहते हैं कि ड्रॉपडाउन मेनू नीचे की बजाय ऊपर की ओर बढ़े, तो <div> तत्व को वर्ग = "ड्रॉपडाउन" के साथ बदलें "dropup":
उदाहरण
<div class="dropup">
ड्रॉपडाउन एक्सेसिबिलिटी
स्क्रीन रीडर का उपयोग करने वाले लोगों की पहुंच में सुधार करने में सहायता के लिए , ड्रॉपडाउन मेनू बनाते समय आपको निम्नलिखित roleऔर विशेषताओं को शामिल करना चाहिए:aria-*
उदाहरण
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
पूर्ण बूटस्ट्रैप ड्रॉपडाउन संदर्भ
सभी ड्रॉपडाउन विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस ड्रॉपडाउन संदर्भ पर जाएं ।