in English

नीचे की ओर फैलने वाला बिंदु

बूटस्ट्रैप ड्रॉपडाउन प्लगइन के साथ लिंक और अधिक की सूची प्रदर्शित करने के लिए प्रासंगिक ओवरले टॉगल करें।

अवलोकन

ड्रॉपडाउन टॉगल करने योग्य हैं, लिंक की सूची प्रदर्शित करने के लिए प्रासंगिक ओवरले और बहुत कुछ। उन्हें शामिल बूटस्ट्रैप ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथ इंटरैक्टिव बनाया गया है। उन्हें क्लिक करके टॉगल किया जाता है, होवर करके नहीं; यह एक जानबूझकर डिजाइन निर्णय है ।

ड्रॉपडाउन तीसरे पक्ष के पुस्तकालय, पॉपर पर बनाए गए हैं , जो गतिशील स्थिति और व्यूपोर्ट पहचान प्रदान करता है। बूटस्ट्रैप के जावास्क्रिप्ट से पहले popper.min.js को शामिल करना सुनिश्चित करें या bootstrap.bundle.min.js/ का उपयोग करें bootstrap.bundle.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" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <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>
</div>

और <a>तत्वों के साथ:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <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>
</div>

सबसे अच्छी बात यह है कि आप इसे किसी भी बटन संस्करण के साथ भी कर सकते हैं:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <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>

स्प्लिट बटन

इसी तरह, सिंगल बटन ड्रॉपडाउन के समान मार्कअप के साथ स्प्लिट बटन ड्रॉपडाउन बनाएं, लेकिन .dropdown-toggle-splitड्रॉपडाउन कैरेट के आसपास उचित रिक्ति के अतिरिक्त।

paddingहम कैरेट के दोनों ओर क्षैतिज को 25% तक कम करने के लिए इस अतिरिक्त वर्ग का उपयोग करते हैं और margin-leftनियमित बटन ड्रॉपडाउन के लिए जोड़े गए को हटा देते हैं। वे अतिरिक्त परिवर्तन कैरेट को विभाजित बटन में केंद्रित रखते हैं और मुख्य बटन के बगल में अधिक उचित आकार का हिट क्षेत्र प्रदान करते हैं।

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <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>

आकार

बटन ड्रॉपडाउन डिफ़ॉल्ट और स्प्लिट ड्रॉपडाउन बटन सहित सभी आकारों के बटन के साथ काम करते हैं।

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

दिशा-निर्देश

ऊपर की ओर जाना

.dropupमूल तत्व में जोड़कर तत्वों के ऊपर ड्रॉपडाउन मेनू ट्रिगर करें।

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ड्रॉपराइट

.droprightमूल तत्व में जोड़कर तत्वों के दाईं ओर ड्रॉपडाउन मेनू ट्रिगर करें ।

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ड्रॉपलेफ्ट

.dropleftमूल तत्व में जोड़कर तत्वों के बाईं ओर ड्रॉपडाउन मेनू ट्रिगर करें ।

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

ऐतिहासिक रूप से ड्रॉपडाउन मेनू सामग्री को लिंक होना था , लेकिन अब v4 के साथ ऐसा नहीं है। अब आप वैकल्पिक रूप से केवल s <button>के बजाय अपने ड्रॉपडाउन में तत्वों का उपयोग कर सकते हैं।<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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>

आप के साथ गैर-संवादात्मक ड्रॉपडाउन आइटम भी बना सकते हैं .dropdown-item-text। कस्टम सीएसएस या टेक्स्ट यूटिलिटीज के साथ आगे स्टाइल करने के लिए स्वतंत्र महसूस करें।

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

सक्रिय

आइटम को सक्रिय के रूप में स्टाइल करने.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">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

डिफ़ॉल्ट रूप से, एक ड्रॉपडाउन मेनू स्वचालित रूप से ऊपर से 100% और उसके पैरेंट के बाईं ओर स्थित होता है। ड्रॉपडाउन मेनू को दाईं ओर संरेखित करने के .dropdown-menu-rightलिए जोड़ें ।.dropdown-menu

सचेत! ड्रॉपडाउन को पॉपर के लिए धन्यवाद दिया जाता है (सिवाय जब वे एक नेवबार में समाहित हों)।
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>

उत्तरदायी संरेखण

यदि आप प्रतिक्रियाशील संरेखण का उपयोग करना चाहते हैं, तो विशेषता जोड़कर गतिशील स्थिति को अक्षम data-display="static"करें और प्रतिक्रियाशील विविधता वर्गों का उपयोग करें।

ड्रॉपडाउन मेनू को दिए गए ब्रेकपॉइंट या बड़े के साथ दाईं ओर संरेखित करने के लिए, जोड़ें .dropdown-menu{-sm|-md|-lg|-xl}-right

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

ड्रॉपडाउन मेनू को दिए गए ब्रेकपॉइंट या बड़े के साथ संरेखित करने के लिए, जोड़ें .dropdown-menu-rightऔर .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

ध्यान दें कि आपको नेवबार में ड्रॉपडाउन बटन में एक विशेषता जोड़ने की आवश्यकता नहीं है data-display="static", क्योंकि पॉपर का उपयोग नेवबार में नहीं किया जाता है।

हेडर

किसी भी ड्रॉपडाउन मेनू में क्रियाओं के अनुभागों को लेबल करने के लिए एक शीर्षलेख जोड़ें।

<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 p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

ड्रॉपडाउन के स्थान का उपयोग करें data-offsetया बदलें।data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <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>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <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>
</div>

प्रयोग

.showडेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से, ड्रॉपडाउन प्लगइन पैरेंट पर कक्षा को टॉगल करके छिपी हुई सामग्री (ड्रॉपडाउन मेनू) को टॉगल करता है .dropdown-menudata-toggle="dropdown"एप्लिकेशन स्तर पर ड्रॉपडाउन मेनू बंद करने के लिए विशेषता पर भरोसा किया जाता है, इसलिए इसका हमेशा उपयोग करना एक अच्छा विचार है ।

टच-सक्षम डिवाइस पर, ड्रॉपडाउन खोलने से तत्व के तत्काल बच्चों में खाली ( $.noop) हैंडलर जुड़ जाते हैं। आईओएस के इवेंट प्रतिनिधिमंडल में एक विचित्रता के आसपास काम करने के लिए यह स्वीकार्य रूप से बदसूरत हैक आवश्यक है , जो अन्यथा ड्रॉपडाउन के बाहर कहीं भी एक टैप को ड्रॉपडाउन को बंद करने वाले कोड को ट्रिगर करने से रोक देगा। ड्रॉपडाउन बंद होने के बाद, ये अतिरिक्त खाली हैंडलर हटा दिए जाते हैं। mouseover<body>mouseover

डेटा विशेषताओं के माध्यम से

data-toggle="dropdown"किसी ड्रॉपडाउन को चालू करने के लिए लिंक या बटन में जोड़ें ।

<div class="dropdown">
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

जावास्क्रिप्ट के माध्यम से

जावास्क्रिप्ट के माध्यम से ड्रॉपडाउन को कॉल करें:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"अभी भी आवश्यक

भले ही आप अपने ड्रॉपडाउन को जावास्क्रिप्ट के माध्यम से कॉल करें या इसके बजाय डेटा-एपीआई का उपयोग करें, data-toggle="dropdown"ड्रॉपडाउन के ट्रिगर तत्व पर हमेशा उपस्थित होना आवश्यक है।

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-offset=""

नाम टाइप चूक विवरण
ओफ़्सेट संख्या | स्ट्रिंग | समारोह 0

अपने लक्ष्य के सापेक्ष ड्रॉपडाउन की भरपाई।

जब किसी फ़ंक्शन का उपयोग ऑफ़सेट को निर्धारित करने के लिए किया जाता है, तो उसे ऑब्जेक्ट के साथ ऑफ़सेट डेटा को इसके पहले तर्क के रूप में कहा जाता है। फ़ंक्शन को किसी ऑब्जेक्ट को उसी संरचना के साथ वापस करना होगा। ट्रिगरिंग तत्व DOM नोड को दूसरे तर्क के रूप में पास किया जाता है।

अधिक जानकारी के लिए पॉपर ऑफ़सेट डॉक्स देखें ।

पलटना बूलियन सच संदर्भ तत्व पर अतिव्यापी होने की स्थिति में ड्रॉपडाउन को फ़्लिप करने दें। अधिक जानकारी के लिए पॉपर के फ्लिप डॉक्स देखें ।
सीमा स्ट्रिंग | तत्व 'स्क्रॉल पेरेंट' ड्रॉपडाउन मेनू की अतिप्रवाह बाधा सीमा। 'viewport', 'window', 'scrollParent', या HTMLElement संदर्भ (केवल जावास्क्रिप्ट) के मानों को स्वीकार करता है । अधिक जानकारी के लिए पॉपर के रोकथाम ओवरफ्लो दस्तावेज़ देखें ।
संदर्भ स्ट्रिंग | तत्व 'टॉगल' ड्रॉपडाउन मेनू का संदर्भ तत्व। 'toggle', 'parent', या HTMLElement संदर्भ के मानों को स्वीकार करता है । अधिक जानकारी के लिए पॉपर के संदर्भ ऑब्जेक्ट दस्तावेज़ देखें ।
दिखाना डोरी 'गतिशील' डिफ़ॉल्ट रूप से, हम गतिशील स्थिति निर्धारण के लिए पॉपर का उपयोग करते हैं। इसके साथ अक्षम करें static
पॉपपर कॉन्फिग शून्य | वस्तु शून्य बूटस्ट्रैप के डिफ़ॉल्ट पॉपर कॉन्फिगरेशन को बदलने के लिए, पॉपर का कॉन्फिगरेशन देखें

नोट करें कि जब boundaryके अलावा किसी अन्य मान पर सेट किया जाता है 'scrollParent', तो शैली कंटेनर position: staticपर लागू होती है ।.dropdown

तरीकों

तरीका विवरण
$().dropdown('toggle') किसी दिए गए नेवबार या टैब्ड नेविगेशन के ड्रॉपडाउन मेनू को टॉगल करता है।
$().dropdown('show') किसी दिए गए नेवबार या टैब्ड नेविगेशन का ड्रॉपडाउन मेनू दिखाता है।
$().dropdown('hide') किसी दिए गए नेवबार या टैब्ड नेविगेशन के ड्रॉपडाउन मेनू को छुपाता है।
$().dropdown('update') किसी तत्व के ड्रॉपडाउन की स्थिति को अपडेट करता है।
$().dropdown('dispose') किसी तत्व के ड्रॉपडाउन को नष्ट कर देता है।

आयोजन

सभी ड्रॉपडाउन घटनाओं को .dropdown-menuमूल तत्व पर निकाल दिया जाता है और एक relatedTargetसंपत्ति होती है, जिसका मूल्य टॉगलिंग एंकर तत्व होता है। hide.bs.dropdownऔर hidden.bs.dropdownईवेंट में एक clickEventप्रॉपर्टी होती है (केवल जब मूल ईवेंट प्रकार होता है click) जिसमें क्लिक ईवेंट के लिए ईवेंट ऑब्जेक्ट होता है।

आयोजन विवरण
show.bs.dropdown जब शो इंस्टेंस विधि कहा जाता है तो यह घटना तुरंत सक्रिय हो जाती है।
shown.bs.dropdown यह घटना तब सक्रिय होती है जब उपयोगकर्ता को ड्रॉपडाउन दिखाई देता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।
hide.bs.dropdown जब छुपा इंस्टेंस विधि कहा जाता है तो इस घटना को तुरंत निकाल दिया जाता है।
hidden.bs.dropdown यह घटना तब सक्रिय होती है जब ड्रॉपडाउन उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})