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

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

नियाळ

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

ड्रॉपडावन तिसऱ्या पक्षाच्या लायब्ररीचेर तयार केल्ले आसात, 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-

पूण, 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 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>

सगळ्यांत बरो भाग म्हणल्यार तुमी खंयच्याय बटण वेरिएंटानय हें करूंक शकतात:

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

पूर्वनिर्धारीतपणान, एक ड्रॉपडावन मेनू आपोआप वयल्यान आनी ताच्या पालकाच्या उजव्या बाजूक 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>

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

<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) हॅन्डलर जोडटा. 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="".

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

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

पद्दती

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

घडणुको

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

प्रसंग	वर्णन
`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"`अजूनय गरज आसा