ड्रपडाउनहरू

बुटस्ट्र्याप ड्रपडाउन प्लगइनको साथ लिङ्कहरूको सूची र थप प्रदर्शन गर्नको लागि प्रासंगिक ओभरलेहरू टगल गर्नुहोस्।

अवलोकन

ड्रपडाउनहरू टगल गर्न मिल्ने, लिङ्कहरूको सूची र थप कुराहरू देखाउनका लागि प्रासंगिक ओभरलेहरू छन्। तिनीहरू समावेश बुटस्ट्र्याप ड्रपडाउन JavaScript प्लगइनसँग अन्तरक्रियात्मक बनाइएका छन्। तिनीहरू क्लिक गरेर टगल गरिएका छन्, होभर गरेर होइन; यो एक जानाजानी डिजाइन निर्णय हो।

ड्रपडाउनहरू तेस्रो पक्षको पुस्तकालय, Popper.js मा बनाइएका छन् , जसले गतिशील स्थिति र भ्यूपोर्ट पत्ता लगाउने सुविधा प्रदान गर्दछ। Bootstrap को JavaScript अघि popper.min.js समावेश गर्न निश्चित हुनुहोस् वा Popper.js समावेश भएको bootstrap.bundle.min.js/ प्रयोग bootstrap.bundle.jsगर्नुहोस्। Popper.js लाई navbars मा ड्रपडाउन राख्न को लागी प्रयोग गरिदैन यद्यपि गतिशील स्थिति आवश्यक छैन।

यदि तपाइँ स्रोतबाट हाम्रो जाभास्क्रिप्ट निर्माण गर्दै हुनुहुन्छ भने, यसलाई आवश्यक छutil.js ।

पहुँच

WAI ARIA मानकले वास्तविक role="menu"विजेट परिभाषित गर्दछ , तर यो कार्य वा कार्यहरू ट्रिगर गर्ने अनुप्रयोग-जस्तै मेनुहरूमा विशिष्ट छ। ARIA मेनुमा मेनु वस्तुहरू, चेकबक्स मेनु वस्तुहरू, रेडियो बटन मेनु वस्तुहरू, रेडियो बटन समूहहरू, र उप-मेनुहरू मात्र समावेश हुन सक्छन्।

अर्कोतर्फ, बुटस्ट्र्यापको ड्रपडाउनहरू जेनेरिक र विभिन्न परिस्थिति र मार्कअप संरचनाहरूमा लागू हुने गरी डिजाइन गरिएका छन्। उदाहरणका लागि, ड्रपडाउनहरू सिर्जना गर्न सम्भव छ जसमा अतिरिक्त इनपुटहरू र फारम नियन्त्रणहरू छन्, जस्तै खोज क्षेत्रहरू वा लगइन फारमहरू। यस कारणका लागि, बुटस्ट्र्यापले साँचो ARIArole मेनुहरूको लागि आवश्यक कुनै पनि र विशेषताहरूको अपेक्षा गर्दैन (न स्वतः थप्नुहोस्) । लेखकहरूले यी थप विशिष्ट विशेषताहरू आफैं समावेश गर्नुपर्नेछ।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">
  <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>

सबै भन्दा राम्रो भाग तपाईं यो कुनै पनि बटन संस्करण संग गर्न सक्नुहुन्छ, पनि:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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" 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>

तपाईले गैर-अन्तर्क्रियात्मक ड्रपडाउन वस्तुहरू पनि सिर्जना गर्न सक्नुहुन्छ .dropdown-item-text। आफू अनुकूल CSS वा पाठ उपयोगिताहरूको साथ थप स्टाइल गर्न स्वतन्त्र महसुस गर्नुहोस्।

<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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

पूर्वनिर्धारित रूपमा, ड्रपडाउन मेनु स्वचालित रूपमा 100% शीर्षबाट र यसको अभिभावकको बायाँ छेउमा राखिएको छ। ड्रपडाउन मेनुलाई दायाँ पङ्क्तिबद्ध .dropdown-menu-rightगर्न a मा थप्नुहोस् ।.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 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-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>

ड्रपडाउनको स्थान परिवर्तन गर्न data-offsetवा प्रयोग गर्नुहोस् ।data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>

प्रयोग

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

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

डाटा विशेषताहरू मार्फत

data-toggle="dropdown"ड्रपडाउन टगल गर्न लिङ्क वा बटनमा थप्नुहोस् ।

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

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत ड्रपडाउनहरू कल गर्नुहोस्:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`अझै आवश्यक छ

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-offset=""।

नाम	टाइप गर्नुहोस्	पूर्वनिर्धारित	विवरण
अफसेट	नम्बर \| स्ट्रिङ \| समारोह	०	यसको लक्ष्य सापेक्ष ड्रपडाउन को अफसेट। थप जानकारीको लागि Popper.js अफसेट कागजातहरू हेर्नुहोस् ।
फ्लिप	बुलियन	सत्य	सन्दर्भ तत्वमा ओभरल्यापिङको अवस्थामा ड्रपडाउनलाई फ्लिप गर्न अनुमति दिनुहोस्। थप जानकारीको लागि Popper.js को फ्लिप कागजातहरू हेर्नुहोस् ।
सीमा	स्ट्रिङ \| तत्व	'स्क्रोल अभिभावक'	ड्रपडाउन मेनुको ओभरफ्लो अवरोध सीमा। `'viewport'`, `'window'`, `'scrollParent'`, वा HTMLElement सन्दर्भ (जाभास्क्रिप्ट मात्र) को मानहरू स्वीकार गर्दछ । थप जानकारीको लागि Popper.js को preventOverflow कागजातहरू हेर्नुहोस् ।
सन्दर्भ	स्ट्रिङ \| तत्व	'टगल'	ड्रपडाउन मेनुको सन्दर्भ तत्व। `'toggle'`, `'parent'`वा HTMLElement सन्दर्भको मानहरू स्वीकार गर्दछ । थप जानकारीको लागि Popper.js को सन्दर्भ वस्तु कागजातहरू हेर्नुहोस् ।
प्रदर्शन	तार	'गतिशील'	पूर्वनिर्धारित रूपमा, हामी गतिशील स्थितिको लागि Popper.js प्रयोग गर्छौं। यसलाई असक्षम पार्नुहोस् `static`।

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

विधिहरू

विधि	विवरण
`$().dropdown('toggle')`	दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनको ड्रपडाउन मेनुलाई टगल गर्दछ।
`$().dropdown('update')`	तत्वको ड्रपडाउनको स्थिति अपडेट गर्दछ।
`$().dropdown('dispose')`	तत्वको ड्रपडाउन नष्ट गर्दछ।

घटनाहरू

सबै ड्रपडाउन घटनाहरू .dropdown-menu'पैरेन्ट एलिमेन्ट' मा फायर गरिएका छन् र एउटा relatedTargetगुण छ, जसको मान टगलिङ एङ्कर एलिमेन्ट हो। hide.bs.dropdownर hidden.bs.dropdownघटनाहरूमा एउटा clickEventगुण हुन्छ (मूल घटना प्रकारमा मात्र click) जसमा क्लिक घटनाको लागि घटना वस्तु समावेश हुन्छ।

घटना	विवरण
`show.bs.dropdown`	शो उदाहरण विधि कल गर्दा यो घटना तुरुन्तै सक्रिय हुन्छ।
`shown.bs.dropdown`	ड्रपडाउन प्रयोगकर्ताको लागि दृश्यात्मक बनाइएपछि यो घटना निकालिन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
`hide.bs.dropdown`	लुकाउने उदाहरण विधि कल गर्दा यो घटना तुरुन्तै निकालिन्छ।
`hidden.bs.dropdown`	ड्रपडाउन प्रयोगकर्ताबाट लुकेको समाप्त भएपछि यो घटना निकालिन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})