Source

ड्रॉपडाउन हो गइल बा

बूटस्ट्रैप ड्रॉपडाउन प्लगइन के साथ लिंक सभ के लिस्ट आ अउरी बहुत कुछ देखावे खातिर संदर्भ ओवरले सभ के टॉगल करीं।

अवलोकन कइल जाव

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

ड्रॉपडाउन सभ के थर्ड पार्टी लाइब्रेरी, 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>इहाँ बतावल गइल बा कि रउआँ इनहन के कौनों भी तत्व के साथ कइसे काम में लगा सकत बानी :

Action Another action Something else here 
<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>तत्वन के साथे:

Action Another action Something else here 
<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>

सबसे बढ़िया बात ई बा कि रउआँ ई काम कवनो बटन वेरिएंट के साथ भी कर सकत बानी:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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नियमित बटन ड्रॉपडाउन खातिर जवन जोड़ल गईल बा ओकरा के हटावे खातिर। ऊ अतिरिक्त बदलाव कैरेट के स्प्लिट बटन में केंद्रित रखेला आ मुख्य बटन के बगल में अधिका उपयुक्त आकार के हिट एरिया देला।

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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मूल तत्व में जोड़ के तत्व सभ के ऊपर ड्रॉपडाउन मेनू सभ के ट्रिगर करीं ।

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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मूल तत्व में जोड़ के तत्व सभ के दाहिने ओर ड्रॉपडाउन मेनू सभ के ट्रिगर करीं ।

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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मूल तत्व में जोड़ के तत्व सभ के बाईं ओर ड्रॉपडाउन मेनू सभ के ट्रिगर करीं ।

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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> एगो quirk के आसपास काम करे खातिर जरूरी बा , जवन अन्यथा ड्रॉपडाउन के बाहर कहीं भी एगो टैप के ड्रॉपडाउन बंद करे वाला कोड के ट्रिगर करे से रोक दिही। एक बेर ड्रॉपडाउन बंद हो गइला के बाद ई अतिरिक्त खाली हैंडलर हटा दिहल जाला।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=""।

नांव किसिम बाकी बिबरन
ऑफसेट हो गइल बा नंबर के बा | तार के बा | परोजन 0 के बा अपना लक्ष्य के सापेक्ष ड्रॉपडाउन के ऑफसेट। अधिक जानकारी खातिर Popper.js के ऑफसेट डॉक्स देखल जाय ।
पलटी बूलियन के बा सच संदर्भ तत्व पर ओवरलैपिंग के स्थिति में ड्रॉपडाउन के फ्लिप करे के अनुमति दीं। अधिक जानकारी खातिर Popper.js के फ्लिप डॉक्स देखल जाव ।
सीमा के बा तार के बा | तत्त्व 'स्क्रॉलपैरेंट' के बा। ड्रॉपडाउन मेनू के ओवरफ्लो बाधा सीमा। 'viewport', 'window', 'scrollParent', या कौनों HTMLElement संदर्भ (केवल जावास्क्रिप्ट) के मान स्वीकार करे ला । अधिक जानकारी खातिर Popper.js के preventOverflow डॉक्स देखल जाय ।

ध्यान दीं जब , के 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 ई इवेंट तुरंत फायर हो जाला जब हिड इंस्टेंस मेथड के कॉल हो जाला।
hidden.bs.dropdown ई इवेंट तब फायर कइल जाला जब ड्रॉपडाउन के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण के इंतजार करी, पूरा होखे खातिर)। 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})