ड्रॉपडाउन

बूटस्ट्रैप ड्रॉपडाउन प्लगइन कें साथ लिंक आ बेसि कें सूची प्रदर्शित करय कें लेल संदर्भ ओवरले कें टॉगल करूं.

अवलोकन

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

ड्रॉपडाउन एकटा थर्ड पार्टी लाइब्रेरी, Popper.js , पर निर्मित छै, जे डायनामिक पोजीशनिंग आ व्यूपोर्ट डिटेक्शन प्रदान करयत छै. बूटस्ट्रैप क' जावास्क्रिप्ट सँ पहिने popper.min.js केँ अवश्य शामिल करू अथवा bootstrap.bundle.min.js/ केर प्रयोग करू bootstrap.bundle.jsजाहि मे Popper.js अछि. Popper.js क॑ नवबार म॑ ड्रॉपडाउन क॑ पोजीशन दै लेली प्रयोग नै करलऽ जाय छै हालांकि डायनामिक पोजीशनिंग केरऽ आवश्यकता नै छै ।

यदि अहाँ हमर जावास्क्रिप्ट स्रोत सँ बना रहल छी, त' एकरा आवश्यकताutil.js अछि .

सुलभता

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

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

चाहे अहां जावास्क्रिप्ट कें माध्यम सं अपन ड्रॉपडाउन कें कॉल करूं या एकर बजाय डाटा-एपीआई कें उपयोग करूं, 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`	ई घटना तखन फायर कएल जाइत अछि जखन ड्रॉपडाउन उपयोगकर्ताक लेल दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमणक प्रतीक्षा करत, पूरा करबाक लेल)।
`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"`एखनो आवश्यक अछि