Bootstrap 5 ड्रॉपडाउन सूची
- पिछला पृष्ठ BS5 कार्ड
- अगला पृष्ठ BS5 फ़ोल्डर
बुनियादी ड्रॉपडाउन सूची
ड्रॉपडाउन मेन्यू एक टूटी-टूटी मेन्यू है, जो उपयोगकर्ता को पूर्व-डिफाइन्ड सूची से वैल्यू चुनने की अनुमति देता है:
उदाहरण
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
ड्रॉपडाउन बटन
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">लिंक 1</a></li>
<li><a class="dropdown-item" href="#">लिंक 2</a></li>
<li><a class="dropdown-item" href="#">लिंक 3</a></li>
</ul>
</div>
उदाहरण व्याख्या
.dropdown क्लास का उपयोग करें。
अगर आप ड्रॉपडाउन मेन्यू खोलना चाहते हैं, तो ड्रॉपडाउन मेन्यू इंगित करने वाले .dropdown-toggle और को जोड़े data-toggle="dropdown"
विशेषता .dropdown-menu को जोड़े <div> एलीमेंट, जो वास्तव में ड्रॉपडाउन मेन्यू बनाने के लिए उपयोग किया जाता है। फिर, .dropdown-item को ड्रॉपडाउन मेन्यू में हर एलीमेंट (लिंक या बटन) में जोड़े。
ड्रॉपडाउन विभाजक
.dropdown-divider को ड्रॉपडाउन मेन्यू में लिंकों को आड़ा बारीए द्वारा अलग करने के लिए उपयोग करें:
उदाहरण
<li><hr class="dropdown-divider"></hr></li>
ड्रॉपडाउन शीर्षक
.dropdown-header को ड्रॉपडाउन मेन्यू में शीर्षक जोड़ने के लिए उपयोग करें:
उदाहरण
<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
को जोड़े
असक्षम और सक्रिय एलीमेंट .active को जोड़े (उस ड्रॉपडाउन एलीमेंट को नीला पृष्ठभूमि रंग जोड़ा जाता है)。
अगर आप चाहते हैं कि ड्रॉपडाउन मेन्यू में किसी एलीमेंट को असक्षम करें, तो .disabled को जोड़े (होवें तो हल्के ग्रे रंग का टेक्स्ट और "no-parking-sign" आइकॉन प्राप्त होता है)。
उदाहरण
<li><a class="dropdown-item" href="#">सामान्य</a></li> <li><a class="dropdown-item active" href="#">सक्रिय</a></li> <li><a class="dropdown-item disabled" href="#">असक्षम</a></li>
ड्रॉपडाउन स्थान
आप अधिक ड्रॉपडाउन स्थान निर्धारित कर सकते हैं .dropend या .dropstart को ड्रॉपडाउन एलीमेंट में जोड़े, ताकि "dropend" या "dropstart" मेन्यू बनाएँ। ध्यान दें कि इंसर्ट सिंगल/बेल्ट आटोमैटिक रूप से जोड़ा जाता है:
ड्रॉपराइट
<div class="dropdown dropend">
ड्रॉपलेफ्ट
<div class="dropdown dropstart">
ड्रॉपडाउन दायाँ बाईं में
अगर आप चाहते हैं कि ड्रॉपडाउन मेन्यू दायाँ बाईं में खुले, तो .dropdown-menu-end को उस class को जोड़े .dropdown-menu के एलीमेंट:
उदाहरण
<div class="dropdown-menu dropdown-menu-end">
अपर ड्रॉप लिस्ट
आप चाहते हैं कि ड्रॉपडाउन मेन्यू नीचे बढ़ने के बजाय ऊपर खुले, तो class="dropdown" के <div> एलीमेंट को बदलें "dropup"：
उदाहरण
<div class="dropup">
ड्रॉपडाउन टेक्स्ट
.dropdown-item-text क्लास ड्रॉपडाउन आइटम को साधारण टेक्स्ट के लिए जोड़ने के लिए या लिंक को डिफ़ॉल्ट लिंक शैली के लिए जोड़ने के लिए उपयोग की जाती है。
उदाहरण
<ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">लिंक 1</a></li> <li><a class="dropdown-item" href="#">लिंक 2</a></li> <li><a class="dropdown-item" href="#">लिंक 3</a></li> <li><a class="dropdown-item-text" href="#">टेक्स्ट लिंक</a></li> <li><span class="dropdown-item-text">साधारण टेक्स्ट</span></li> </ul>
समूह बटन और ड्रॉपडाउन सूची
उदाहरण
<div class="btn-group">
<button type="button" class="btn btn-primary">हावेयी</button>
<button type="button" class="btn btn-primary">ड्रोन</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">सिलिकॉन</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">मोबाइल</a></li>
<li><a class="dropdown-item" href="#">टैबलेट</a></li>
</ul>
</div>
</div>
खड़ी समूह बटन और ड्रॉपडाउन सूची
उदाहरण
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">हावेयी</button>
<button type="button" class="btn btn-primary">ड्रोन</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">सिलिकॉन</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">मोबाइल</a></li>
<li><a class="dropdown-item" href="#">टैबलेट</a></li>
</ul>
</div>
</div>
- पिछला पृष्ठ BS5 कार्ड
- अगला पृष्ठ BS5 फ़ोल्डर
