नीचे की ओर फैलने वाला बिंदु
बूटस्ट्रैप ड्रॉपडाउन प्लगइन के साथ लिंक और अधिक की सूची प्रदर्शित करने के लिए प्रासंगिक ओवरले टॉगल करें।
ड्रॉपडाउन टॉगल करने योग्य हैं, लिंक की सूची प्रदर्शित करने के लिए प्रासंगिक ओवरले और बहुत कुछ। उन्हें शामिल बूटस्ट्रैप ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथ इंटरैक्टिव बनाया गया है। उन्हें क्लिक करके टॉगल किया जाता है, होवर करके नहीं; यह एक जानबूझकर डिजाइन निर्णय है।
ड्रॉपडाउन तीसरे पक्ष के पुस्तकालय, Popper.js पर बनाए गए हैं , जो गतिशील स्थिति और व्यूपोर्ट पहचान प्रदान करता है। बूटस्ट्रैप के जावास्क्रिप्ट से पहले popper.min.js को शामिल करना सुनिश्चित करें या bootstrap.bundle.min.js
/ का उपयोग करें bootstrap.bundle.js
जिसमें Popper.js शामिल है। Popper.js का उपयोग नेवबार में ड्रॉपडाउन की स्थिति के लिए नहीं किया जाता है, हालांकि डायनेमिक पोजिशनिंग की आवश्यकता नहीं होती है।
यदि आप स्रोत से हमारी जावास्क्रिप्ट बना रहे हैं, तो इसके लिएutil.js
.
WAI ARIA मानक एक वास्तविक role="menu"
विजेट को परिभाषित करता है, लेकिन यह एप्लिकेशन-जैसे मेनू के लिए विशिष्ट है जो क्रियाओं या कार्यों को ट्रिगर करता है। ARIA मेनू में केवल मेनू आइटम, चेकबॉक्स मेनू आइटम, रेडियो बटन मेनू आइटम, रेडियो बटन समूह और उप-मेनू हो सकते हैं।
दूसरी ओर, बूटस्ट्रैप के ड्रॉपडाउन सामान्य होने के लिए डिज़ाइन किए गए हैं और विभिन्न स्थितियों और मार्कअप संरचनाओं पर लागू होते हैं। उदाहरण के लिए, ड्रॉपडाउन बनाना संभव है जिसमें अतिरिक्त इनपुट और फॉर्म नियंत्रण हों, जैसे खोज फ़ील्ड या लॉगिन फ़ॉर्म। इस कारण से, बूटस्ट्रैप सच्चे ARIA मेनू के लिए आवश्यक किसी भी role
और विशेषता की अपेक्षा नहीं करता (न ही स्वचालित रूप से जोड़ता है)। लेखकों को इन अधिक विशिष्ट विशेषताओं को स्वयं शामिल करना होगा।aria-
हालाँकि, बूटस्ट्रैप अधिकांश मानक कीबोर्ड मेनू इंटरैक्शन के लिए अंतर्निहित समर्थन जोड़ता है, जैसे .dropdown-item
कि कर्सर कुंजियों का उपयोग करके अलग-अलग तत्वों के माध्यम से स्थानांतरित करने और कुंजी के साथ मेनू को बंद करने की क्षमता ESC।
ड्रॉपडाउन के टॉगल (आपका बटन या लिंक) और ड्रॉपडाउन मेनू को .dropdown
, या घोषित करने वाले किसी अन्य तत्व के भीतर लपेटें position: relative;
। ड्रॉपडाउन को <a>
या <button>
तत्वों से ट्रिगर किया जा सकता है ताकि आपकी संभावित जरूरतों को बेहतर ढंग से पूरा किया जा सके।
.btn
कुछ मार्कअप परिवर्तनों के साथ किसी एकल को ड्रॉपडाउन टॉगल में बदला जा सकता है। यहां बताया गया है कि आप उन्हें किसी भी <button>
तत्व के साथ कैसे काम कर सकते हैं:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
और <a>
तत्वों के साथ:
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
सबसे अच्छी बात यह है कि आप इसे किसी भी बटन संस्करण के साथ भी कर सकते हैं:
इसी तरह, सिंगल बटन ड्रॉपडाउन के समान मार्कअप के साथ स्प्लिट बटन ड्रॉपडाउन बनाएं, लेकिन .dropdown-toggle-split
ड्रॉपडाउन कैरेट के आसपास उचित रिक्ति के अतिरिक्त।
padding
हम कैरेट के दोनों ओर क्षैतिज को 25% तक कम करने के लिए इस अतिरिक्त वर्ग का उपयोग करते हैं और margin-left
नियमित बटन ड्रॉपडाउन के लिए जोड़े गए को हटा देते हैं। वे अतिरिक्त परिवर्तन कैरेट को विभाजित बटन में केंद्रित रखते हैं और मुख्य बटन के बगल में अधिक उचित आकार का हिट क्षेत्र प्रदान करते हैं।
बटन ड्रॉपडाउन डिफ़ॉल्ट और स्प्लिट ड्रॉपडाउन बटन सहित सभी आकारों के बटन के साथ काम करते हैं।
.dropup
मूल तत्व में जोड़कर तत्वों के ऊपर ड्रॉपडाउन मेनू ट्रिगर करें।
.dropright
मूल तत्व में जोड़कर तत्वों के दाईं ओर ड्रॉपडाउन मेनू ट्रिगर करें ।
.dropleft
मूल तत्व में जोड़कर तत्वों के बाईं ओर ड्रॉपडाउन मेनू ट्रिगर करें ।
ऐतिहासिक रूप से ड्रॉपडाउन मेनू सामग्री को लिंक होना था , लेकिन अब v4 के साथ ऐसा नहीं है। अब आप वैकल्पिक रूप से केवल s <button>
के बजाय अपने ड्रॉपडाउन में तत्वों का उपयोग कर सकते हैं।<a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
डिफ़ॉल्ट रूप से, एक ड्रॉपडाउन मेनू स्वचालित रूप से ऊपर से 100% और उसके पैरेंट के बाईं ओर स्थित होता है। ड्रॉपडाउन मेनू को दाईं ओर संरेखित करने के .dropdown-menu-right
लिए जोड़ें ।.dropdown-menu
सचेत! Popper.js के कारण ड्रॉपडाउन स्थित हैं (सिवाय तब जब वे एक नेवबार में समाहित हों)।
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
किसी भी ड्रॉपडाउन मेनू में क्रियाओं के अनुभागों को लेबल करने के लिए एक शीर्षलेख जोड़ें।
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
डिवाइडर के साथ संबंधित मेनू आइटम के अलग समूह।
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
ड्रॉपडाउन मेनू में एक फॉर्म डालें, या इसे ड्रॉपडाउन मेनू में बनाएं, और मार्जिन या पैडिंग यूटिलिटीज का उपयोग करके इसे आपके लिए आवश्यक नकारात्मक स्थान दें।
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
आइटम को सक्रिय के रूप में स्टाइल करने.active
के लिए ड्रॉपडाउन में जोड़ें ।
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
उन्हें अक्षम के रूप में स्टाइल करने.disabled
के लिए ड्रॉपडाउन में आइटम में जोड़ें ।
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
.show
डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से, ड्रॉपडाउन प्लगइन मूल सूची आइटम पर वर्ग को टॉगल करके छिपी हुई सामग्री (ड्रॉपडाउन मेनू) को टॉगल करता है । data-toggle="dropdown"
एप्लिकेशन स्तर पर ड्रॉपडाउन मेनू बंद करने के लिए विशेषता पर भरोसा किया जाता है, इसलिए इसका हमेशा उपयोग करना एक अच्छा विचार है ।
टच-सक्षम डिवाइस पर, ड्रॉपडाउन खोलने से तत्व के तत्काल बच्चों में खाली ( $.noop
) हैंडलर जुड़ जाते हैं। आईओएस के इवेंट प्रतिनिधिमंडल में एक विचित्रता के आसपास काम करने के लिए यह स्वीकार्य रूप से बदसूरत हैक आवश्यक है , जो अन्यथा ड्रॉपडाउन के बाहर कहीं भी एक टैप को ड्रॉपडाउन को बंद करने वाले कोड को ट्रिगर करने से रोक देगा। ड्रॉपडाउन बंद होने के बाद, ये अतिरिक्त खाली हैंडलर हटा दिए जाते हैं।mouseover
<body>
mouseover
data-toggle="dropdown"
किसी ड्रॉपडाउन को चालू करने के लिए लिंक या बटन में जोड़ें ।
जावास्क्रिप्ट के माध्यम से ड्रॉपडाउन को कॉल करें:
data-toggle="dropdown"
अभी भी आवश्यक
भले ही आप अपने ड्रॉपडाउन को जावास्क्रिप्ट के माध्यम से कॉल करें या इसके बजाय डेटा-एपीआई का उपयोग करें, data-toggle="dropdown"
ड्रॉपडाउन के ट्रिगर तत्व पर हमेशा उपस्थित होना आवश्यक है।
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-
, जैसा कि में है data-offset=""
।
नाम | टाइप | चूक | विवरण |
---|---|---|---|
ओफ़्सेट | संख्या | स्ट्रिंग | समारोह | 0 | अपने लक्ष्य के सापेक्ष ड्रॉपडाउन की भरपाई। अधिक जानकारी के लिए Popper.js के ऑफसेट डॉक्स देखें । |
पलटना | बूलियन | सच | संदर्भ तत्व पर अतिव्यापी होने की स्थिति में ड्रॉपडाउन को फ़्लिप करने दें। अधिक जानकारी के लिए Popper.js के फ्लिप डॉक्स देखें । |
सीमा | स्ट्रिंग | तत्व | 'स्क्रॉल पेरेंट' | ड्रॉपडाउन मेनू की अतिप्रवाह बाधा सीमा। 'viewport' , 'window' , 'scrollParent' , या HTMLElement संदर्भ (केवल जावास्क्रिप्ट) के मानों को स्वीकार करता है । अधिक जानकारी के लिए Popper.js के preventOverflow डॉक्स देखें । |
नोट करें कि जब boundary
के अलावा किसी अन्य मान पर सेट किया जाता है 'scrollParent'
, तो शैली कंटेनर position: static
पर लागू होती है ।.dropdown
तरीका | विवरण |
---|---|
$().dropdown('toggle') |
किसी दिए गए नेवबार या टैब्ड नेविगेशन के ड्रॉपडाउन मेनू को टॉगल करता है। |
$().dropdown('update') |
किसी तत्व के ड्रॉपडाउन की स्थिति को अपडेट करता है। |
$().dropdown('dispose') |
किसी तत्व के ड्रॉपडाउन को नष्ट कर देता है। |
सभी ड्रॉपडाउन घटनाओं को .dropdown-menu
मूल तत्व पर निकाल दिया जाता है और एक relatedTarget
संपत्ति होती है, जिसका मूल्य टॉगलिंग एंकर तत्व होता है।
आयोजन | विवरण |
---|---|
show.bs.dropdown |
जब शो इंस्टेंस विधि कहा जाता है तो यह घटना तुरंत सक्रिय हो जाती है। |
shown.bs.dropdown |
यह घटना तब सक्रिय होती है जब उपयोगकर्ता को ड्रॉपडाउन दिखाई देता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। |
hide.bs.dropdown |
जब छुपा इंस्टेंस विधि कहा जाता है तो इस घटना को तुरंत निकाल दिया जाता है। |
hidden.bs.dropdown |
यह घटना तब सक्रिय होती है जब ड्रॉपडाउन उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। |