ड्रॉपडाउन

बूटस्ट्रॅप ड्रॉपडाउन प्लगइनसह लिंक्स आणि अधिकच्या सूची प्रदर्शित करण्यासाठी संदर्भित आच्छादन टॉगल करा.

आढावा

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

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

जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहेutil.js .

प्रवेशयोग्यता

WAI ARIA मानक वास्तविक role="menu"विजेट परिभाषित करते , परंतु हे ऍप्लिकेशन सारख्या मेनूसाठी विशिष्ट आहे जे क्रिया किंवा कार्ये ट्रिगर करतात. 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>

सर्वोत्कृष्ट भाग म्हणजे तुम्ही हे कोणत्याही बटण प्रकारासह देखील करू शकता:

<!-- 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-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">
  <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डेटा विशेषता किंवा JavaScript द्वारे, ड्रॉपडाउन प्लगइन लपलेली सामग्री (ड्रॉपडाउन मेनू) पालक सूची आयटमवर वर्ग टॉगल करून टॉगल करते . data-toggle="dropdown"अॅप्लिकेशन स्तरावर ड्रॉपडाउन मेनू बंद करण्यासाठी विशेषता अवलंबून असते, म्हणून ती नेहमी वापरणे चांगली कल्पना आहे .

टच-सक्षम डिव्‍हाइसेसवर, ड्रॉपडाउन उघडल्‍याने घटकाच्या तात्काळ मुलांसाठी रिक्त ( $.noop) हँडलर जोडले जातात. iOS च्या इव्हेंट डेलिगेशन मधील क्विर्कवर कार्य करण्यासाठी हे मान्यपणे कुरूप हॅक आवश्यक आहे , जे अन्यथा ड्रॉपडाउन बंद करणार्‍या कोडला ट्रिगर करण्यापासून ड्रॉपडाउनच्या बाहेर कुठेही टॅप करण्यास प्रतिबंधित करेल. ड्रॉपडाउन बंद केल्यावर, हे अतिरिक्त रिकामे हँडलर काढले जातात.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>

JavaScript द्वारे

JavaScript द्वारे ड्रॉपडाउन कॉल करा:

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

`data-toggle="dropdown"`अजूनही आवश्यक आहे

तुम्ही तुमच्या ड्रॉपडाउनला JavaScript द्वारे कॉल करत असलात किंवा त्याऐवजी डेटा-एपीआय वापरत असलात तरीही, data-toggle="dropdown"ड्रॉपडाउनच्या ट्रिगर घटकावर नेहमी उपस्थित असणे आवश्यक आहे.

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-offset="".

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

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

पद्धती

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

कार्यक्रम

सर्व ड्रॉपडाउन इव्हेंट्सच्या .dropdown-menuमूळ घटकावर फायर केले जातात आणि त्यांच्याकडे एक relatedTargetगुणधर्म आहे, ज्याचे मूल्य टॉगलिंग अँकर घटक आहे.

कार्यक्रम	वर्णन
`show.bs.dropdown`	जेव्हा शो उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो.
`shown.bs.dropdown`	जेव्हा ड्रॉपडाउन वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
`hide.bs.dropdown`	जेव्हा लपवा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो.
`hidden.bs.dropdown`	जेव्हा ड्रॉपडाउन वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).

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

ड्रॉपडाउन

आढावा

प्रवेशयोग्यता

उदाहरणे

सिंगल बटण ड्रॉपडाउन

स्प्लिट बटण ड्रॉपडाउन

आकारमान

ड्रॉपअप भिन्नता

ड्रॉपराइट भिन्नता

ड्रॉपलेफ्ट भिन्नता

मेनू आयटम

मेनू संरेखन

मेनू शीर्षलेख

मेनू विभाजक

मेनू फॉर्म

सक्रिय मेनू आयटम

अक्षम केलेले मेनू आयटम

वापर

डेटा विशेषतांद्वारे

JavaScript द्वारे

`data-toggle="dropdown"`अजूनही आवश्यक आहे

पर्याय

पद्धती

कार्यक्रम

ड्रॉपडाउन

आढावा

प्रवेशयोग्यता

उदाहरणे

सिंगल बटण ड्रॉपडाउन

स्प्लिट बटण ड्रॉपडाउन

आकारमान

ड्रॉपअप भिन्नता

ड्रॉपराइट भिन्नता

ड्रॉपलेफ्ट भिन्नता

मेनू आयटम

मेनू संरेखन

मेनू शीर्षलेख

ड्रॉपडाउन शीर्षलेख

मेनू विभाजक

मेनू फॉर्म

सक्रिय मेनू आयटम

अक्षम केलेले मेनू आयटम

वापर

डेटा विशेषतांद्वारे

JavaScript द्वारे

data-toggle="dropdown"अजूनही आवश्यक आहे

पर्याय

पद्धती

कार्यक्रम

`data-toggle="dropdown"`अजूनही आवश्यक आहे