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>इत्थै एह् दिक्खेआ गेआ ऐ जे तुस उनेंगी कुसै बी तत्व कन्नै कम्म करने आस्तै किस चाल्ली ला सकदे ओ :

<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) हैंडलर जोड़ेआ जंदा ऐ। एह् स्वीकार कीता गेआ ऐ जे बदसूरत हैक आईओएस दे इवेंट डेलिगेशन च इक quirk दे आसपास कम्म करने लेई जरूरी ऐ , जेह् ड़ा नेईं ते ड्रॉपडाउन दे बाहर कुतै बी इक नल गी ड्रॉपडाउन बंद करने आह् ले कोड गी ट्रिगर करने थमां रोकग। इक बारी ड्रॉपडाउन बंद होने पर एह् अतिरिक्त खाली हैंडलर हटाई दित्ते जंदे न।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 दे फ्लिप डॉक्स दिक्खो .
सीमा तार | तत्व 'स्क्रॉलपैरेंट' ऐ। ड्रॉपडाउन मेनू दी ओवरफ्लो बाधा सीमा। '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…
})