ड्रॉपडावन करतात

बूटस्ट्रॅप ड्रॉपडावन प्लगइनान दुव्यांची वळेरी आनी हेर दाखोवपाखातीर संदर्भ आच्छादन टॉगल करात.

नियाळ

ड्रॉपडावन टॉगल करपाक येतात, दुव्यांची वळेरी दाखोवपा खातीर संदर्भ आच्छादन आनी हेर. समाविष्ट केल्ल्या बूटस्ट्रॅप ड्रॉपडावन जावास्क्रिप्ट प्लगइनान ते परस्पर संवादात्मक केल्यात. ते क्लिक करून टॉगल करतात, होवर करून न्हय; हो एक हेतून डिझायन निर्णय .

ड्रॉपडावन तिसऱ्या पक्षाच्या लायब्ररीचेर तयार केल्ले आसात, Popper.js , जे डायनॅमिक पोझिशनिंग आनी व्यूपोर्ट डिटेक्शन पुरवण करता. Bootstrap च्या JavaScript पयलीं popper.min.js समाविष्ट करपाची खात्री करात वा bootstrap.bundle.min.js/ वापरात bootstrap.bundle.jsजातूंत Popper.js आसा. Popper.js नावबारांत ड्रॉपडावन स्थिती करपाक वापरना जरी डायनॅमिक पोझिशनिंगाची गरज ना.

तुमी आमची जावास्क्रिप्ट स्त्रोतांतल्यान तयार करतात जाल्यार, ताका जायutil.js .

सुलभताय

WAI ARIA मानक प्रत्यक्ष role="menu"विजेट व्याख्या करता , पूण हें ऍप्लिकेशन-सारकें मेनू विशिश्ट आसा जे कृती वा कार्यां सुरू करतात. ARIA मेनूंत फकत मेनू आयटम, चेकबॉक्स मेनू आयटम, रेडिओ बटण मेनू आयटम, रेडिओ बटण गट, आनी उप-मेनू आसूं येतात.

दुसरे वटेन बूटस्ट्रॅपाचे ड्रॉपडावन सामान्य आनी विंगड विंगड परिस्थितींक आनी मार्कअप संरचनेंक लागू करपाक तयार केल्ले आसात. देखीक, सोद क्षेत्रां वा लॉगीन फॉर्म अशे अतिरिक्त इनपुट आनी फॉर्म नियंत्रण आशिल्ले ड्रॉपडावन तयार करप शक्य आसा. ह्या कारणाखातीर, बूटस्ट्रॅप खऱ्या ARIA मेनूखातीर जाय आशिल्ल्या खंयच्याच roleआनी गुणधर्मांची अपेक्षा करीना (वा आपसूक जोडना). लेखकांक स्वता ह्या चड विशिश्ट गुणधर्मांचो आस्पाव करचो पडटलो.aria-

पूण, Bootstrap चडशा मानक कीबोर्ड मेनू परस्पर संवादांक अंतर्निहित आदार जोडटा, जशे की .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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

पूर्वनिर्धारीतपणान, एक ड्रॉपडावन मेनू आपोआप वयल्यान आनी ताच्या पालकाच्या उजव्या वटेन 100% स्थापन जाता. .dropdown-menu-righta कडेन जोडात ते .dropdown-menuउजवे वटेन ड्रॉपडावन मेनू संरेखित करात.

तकली वयर काडटा! ड्रॉपडावन Popper.js च्या उपकाराक लागून स्थितींत आसतात (जेन्ना ते navbar त आसतात सोडल्यार).

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

प्रतिसाद दिवपी संरेखण

तुमकां प्रतिसाद दिवपी संरेखण वापरपाची आसल्यार, 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-haspopup="true" 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-haspopup="true" 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>

लक्षांत दवरात की तुमकां navbars च्या ड्रॉपडावन बटणांक गुणधर्म जोडपाची गरज ना data-display="static", कारण Popper.js navbars मदीं वापरना.

शीर्षकां

खंयच्याय ड्रॉपडावन मेनूंत कृतीच्या विभागांक लेबल करपाक शीर्षक जोडात.

<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" 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>

वापर

.showडेटा गुणधर्म वा जावास्क्रिप्ट वरवीं, ड्रॉपडावन प्लगइन पालक यादी आयटमाचेर वर्ग टॉगल करून लिपिल्ली सामुग्री (ड्रॉपडावन मेनू) टॉगल करता . data-toggle="dropdown"ऍप्लिकेशन पातळेचेर ड्रॉपडावन मेनू बंद करपाखातीर गुणधर्माचेर आदारीत आसा, देखून तो सदांच वापरप ही एक बरी कल्पना .

स्पर्श-सक्षम साधनांचेर, ड्रॉपडावन उगडप घटकाच्या लागींच्या भुरग्यांक रिकामे ( $.noop) हॅन्डलर जोडटा. This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , जे हेर तरेन ड्रॉपडावन भायर खंयच्याय सुवातेर टॅप ड्रॉपडावन बंद करपी कोड ट्रिगर करपाक आडायतलें. एकदां ड्रॉपडावन बंद जाले उपरांत, हे अतिरिक्त रिते हॅन्डलर काडून उडयतात.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"`अजूनय गरज आसा

तुमी तुमच्या ड्रॉपडावनाक जावास्क्रिप्ट वरवीं कॉल करतात वा ताचे बदला डेटा-api वापरतात हाची पर्वा करिनासतना, data-toggle="dropdown"ड्रॉपडावनाच्या ट्रिगर घटकाचेर सदांच हाजीर आसप गरजेचें आसा.

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-offset="".

नांव	प्रकार	डिफॉल्ट	वर्णन
ऑफसेट करप	संख्या \| तार \| कार्य	० आनी ०	ताच्या लक्ष्याच्या सापेक्ष ड्रॉपडावनाचें ऑफसेट. ऑफसेट थारावपाखातीर फंक्शन वापरतात तेन्ना ऑफसेट डेटा आशिल्ल्या वस्तूक ताचो पयलो आर्ग्युमेंट म्हणून कॉल करतात. फंक्शनान तीच रचणूक आशिल्ली वस्तू परत करपाक जाय. ट्रिगर करपी घटक DOM नोड दुसरो आर्ग्युमेंट म्हणून पास जाता. चड म्हायती खातीर Popper.js च्या ऑफसेट डॉक्स पळयात .
टिचकी	बूलियन हें नांव	खरें	संदर्भ घटकाचेर आडखळ जाल्यार ड्रॉपडावन फ्लिप करपाक परवानगी दिवची. चड म्हायती खातीर पळयात Popper.js च्या flip docs .
शिमेचेर आसता	तार \| घटक	'स्क्रॉलपॅरेंट'.	ड्रॉपडावन मेनूची ओव्हरफ्लो बंधन मर्यादा. `'viewport'`, `'window'`, `'scrollParent'`, वा HTMLElement संदर्भ (फकत जावास्क्रिप्ट) ची मोलां स्वीकारता . चड म्हायती खातीर Popper.js च्या preventOverflow docs पळयात .
संदर्भ	तार \| घटक	'टॉगल करप'.	ड्रॉपडावन मेनूचो संदर्भ घटक. `'toggle'`, `'parent'`, वा HTMLElement संदर्भाचीं मोलां स्वीकारता . चड म्हायती खातीर Popper.js च्या referenceObject docs पळयात .
प्रदर्शन	माळ	'गतिशील'.	पूर्वनिर्धारीतपणान, आमी डायनॅमिक पोझिशनिंग खातीर Popper.js वापरतात. हें अक्षम करचें `static`.
popperConfig हें नांव	शून्य \| ऑब्जॅक्ट	शुन्य	Bootstrap ची मुलभूत Popper.js संरचना बदलपाक, Popper.js ची संरचना पळयात

लक्षांत दवरात जेन्ना , boundaryसोडून हेर खंयच्याय मोलाचेर सेट केला 'scrollParent', शैली कंटेनराक position: staticलागू जाता ..dropdown

पद्दती

पद्दत	वर्णन
`$().dropdown('toggle')`	दिल्ल्या नवबार वा टॅब केल्ल्या नेव्हिगेशनाचे ड्रॉपडावन मेनू टॉगल करता.
`$().dropdown('show')`	दिल्ल्या नवबार वा टॅब केल्ल्या नेव्हिगेशनाचे ड्रॉपडावन मेनू दाखयता.
`$().dropdown('hide')`	दिल्ल्या नवबार वा टॅब केल्ल्या नेव्हिगेशनाचे ड्रॉपडावन मेनू लिपयता.
`$().dropdown('update')`	घटकाच्या ड्रॉपडावनाची सुवात अद्ययावत करता.
`$().dropdown('dispose')`	एका घटकाचें ड्रॉपडावन नश्ट करता.

घडणुको

सगळ्यो ड्रॉपडावन घडणुको .dropdown-menu's पालक घटकाचेर फायर करतात आनी तांकां एक relatedTargetगुणधर्म आसता, जाचें मोल टॉगलिंग एंकर घटक आसा. hide.bs.dropdownआनी hidden.bs.dropdownघडणुकांक एक clickEventगुणधर्म आसता (फकत जेन्ना मूळ घडणुकेचो प्रकार click) आसता जातूंत क्लिक घडणुकेखातीर एक घडणूक वस्तू आसता.

प्रसंग	वर्णन
`show.bs.dropdown`	शो दृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता.
`shown.bs.dropdown`	वापरप्याक ड्रॉपडावन दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमणांची वाट पळयतले, पुराय जावपाक).
`hide.bs.dropdown`	ही घडणूक रोखडीच फायर जाता जेन्ना hide instance पद्दत कॉल केल्या.
`hidden.bs.dropdown`	वापरप्या कडल्यान लिपोवपाचें ड्रॉपडावन सोंपतकच ही घडणूक फायर जाता (CSS संक्रमणांची वाट पळयतले, पुराय जावपाक).

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

ड्रॉपडावन करतात

नियाळ

सुलभताय

उदाहरणां

एकूच बटण

विभाजीत करचें बटण

आकारमान करप

दिका दिवप

ड्रॉपअप करप

ड्रॉपराइट हें नांव

ड्रॉपलेफ्ट हें नांव

मेनू आयटम

सक्रीय

निश्क्रीय

मेनू संरेखण

प्रतिसाद दिवपी संरेखण

मेनू आशय

शीर्षकां

विभाजक करतात

लिखीत

रूपां

वापर

डेटा गुणधर्मां वरवीं

जावास्क्रिप्ट वरवीं

`data-toggle="dropdown"`अजूनय गरज आसा

पर्याय आसात

पद्दती

घडणुको

ड्रॉपडावन करतात

नियाळ

सुलभताय

उदाहरणां

एकूच बटण

विभाजीत करचें बटण

आकारमान करप

दिका दिवप

ड्रॉपअप करप

ड्रॉपराइट हें नांव

ड्रॉपलेफ्ट हें नांव

मेनू आयटम

सक्रीय

निश्क्रीय

मेनू संरेखण

प्रतिसाद दिवपी संरेखण

मेनू आशय

शीर्षकां

ड्रॉपडावन हेडर

विभाजक करतात

लिखीत

रूपां

ड्रॉपडावन पर्याय

वापर

डेटा गुणधर्मां वरवीं

जावास्क्रिप्ट वरवीं

data-toggle="dropdown"अजूनय गरज आसा

पर्याय आसात

पद्दती

घडणुको

`data-toggle="dropdown"`अजूनय गरज आसा