ड्रॉपडाउन्स्

Bootstrap ड्रॉप्डाउन प्लगिन् इत्यनेन सह लिङ्क्-सूचीनां प्रदर्शयितुं सन्दर्भ-ओवरलेस् टॉग्ल् कुर्वन्तु ।

अवलोकनम्

ड्रॉपडाउन्स् टॉग्लेबलाः सन्ति, लिङ्क्-सूचीनां प्रदर्शनार्थं सन्दर्भात्मक-ओवरलेस् इत्यादीनि च । ते समाविष्टेन Bootstrap ड्रॉपडाउन JavaScript प्लगिन् इत्यनेन सह अन्तरक्रियाशीलाः कृताः सन्ति । ते क्लिक् कृत्वा टोग्ल् भवन्ति, न तु होवरिंग् इत्यनेन; एषः एकः इच्छितः डिजाइननिर्णयः अस्ति .

ड्रॉपडाउन्स् तृतीयपक्षपुस्तकालयस्य उपरि निर्मिताः सन्ति, Popper.js , यत् गतिशीलं स्थितिं दृश्यपोर्टपरिचयं च प्रदाति । Bootstrap इत्यस्य JavaScript इत्यस्मात् पूर्वं popper.min.js इत्येतत् अवश्यमेव समाविष्टं कुर्वन्तु अथवा bootstrap.bundle.min.js/ इत्यस्य उपयोगं कुर्वन्तु bootstrap.bundle.jsयस्मिन् Popper.js अस्ति । Popper.js इत्यस्य उपयोगः navbars मध्ये dropdowns इत्यस्य स्थितिं कर्तुं न भवति यद्यपि गतिशीलस्थापनस्य आवश्यकता नास्ति।

यदि भवान् अस्माकं जावास्क्रिप्ट् स्रोततः निर्माति तर्हि तस्य आवश्यकताutil.js अस्ति .

सुलभता

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

बूटस्ट्रैप् इत्यस्य ड्रॉप्डाउन्स् तु सामान्यरूपेण विविधपरिस्थितिषु मार्कअपसंरचनेषु च प्रयोज्यरूपेण परिकल्पिताः सन्ति । यथा, अन्वेषणक्षेत्राणि अथवा प्रवेशप्रपत्राणि इत्यादीनि अतिरिक्तनिवेशानि तथा रूपनियन्त्रणानि च समाविष्टानि ड्रॉपडाउन्स् निर्मातुं शक्यते । अस्य कारणात्, Bootstrap सत्यानां ARIA मेनूनां कृते आवश्यकानां roleand विशेषतानां कस्यापि अपेक्षां न करोति (न च स्वयमेव योजयति) । लेखकैः एतानि अधिकविशिष्टानि विशेषतानि स्वयमेव समावेशितव्यानि भविष्यन्ति।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">
  <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>इत्यस्य स्थाने स्वस्य dropdowns मध्ये elements इत्यस्य उपयोगं कर्तुं शक्नोति ।<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>

इत्यनेन सह अ-अन्तर्क्रियाशील-ड्रॉप्-डाउन-वस्तूनि अपि निर्मातुं शक्नुवन्ति .dropdown-item-text। कस्टम् CSS अथवा पाठ-उपयोगिताभिः सह अधिकं शैलीं कर्तुं निःशङ्कं भवन्तु ।

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

सक्रियं

सक्रियरूपेण शैलीं.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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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>

प्रतिक्रियाशील संरेखण

यदि भवान् प्रतिक्रियाशीलसंरेखणस्य उपयोगं कर्तुम् इच्छति तर्हि विशेषतां योजयित्वा गतिशीलस्थाननिर्धारणं निष्क्रियं data-display="static"कुर्वन्तु तथा च प्रतिक्रियाशीलविविधतावर्गाणां उपयोगं कुर्वन्तु ।

दत्तेन ब्रेकपॉइण्ट् अथवा बृहत्तरेण सह ड्रॉप्डाउन मेनू दक्षिणतः संरेखयितुं , योजयन्तु .dropdown-menu{-sm|-md|-lg|-xl}-right।

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

दत्तविरामबिन्दुना वा बृहत्तरेण वा वामभागे ड्रॉपडाउनमेनू संरेखयितुं , योजयन्तु .dropdown-menu-rightतथा च .dropdown-menu{-sm|-md|-lg|-xl}-left।

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

ध्यानं कुर्वन्तु यत् navbars मध्ये dropdown बटन् मध्ये विशेषतां योजयितुं आवश्यकता नास्ति data-display="static", यतः Popper.js navbars मध्ये न उपयुज्यते ।

शीर्षकाणि

कस्मिन् अपि ड्रॉप् डाउन मेन्यू मध्ये क्रियाणां विभागानां लेबलं कर्तुं शीर्षकं योजयन्तु ।

<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 p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

ड्रॉप् डाउन इत्यस्य स्थानं परिवर्तयितुं data-offsetवा इत्यस्य उपयोगं कुर्वन्तु ।data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</div>

प्रयोगः

.showdata attributes अथवा JavaScript इत्यस्य माध्यमेन, ड्रॉप् डाउन प्लगिन् मातापितृसूची मदस्य उपरि वर्गं टॉगल कृत्वा गुप्तसामग्री (ड्रॉपडाउन मेनू) टॉगलं करोति । अनुप्रयोगस्तरस्य ड्रॉपडाउन मेनू 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"`अद्यापि आवश्यकम्

भवान् जावास्क्रिप्ट् मार्गेण स्वस्य ड्रॉप्डाउन् आह्वयति वा तस्य स्थाने data-api इत्यस्य उपयोगं करोति वा इति न data-toggle="dropdown"कृत्वा, ड्रॉप्डाउन् इत्यस्य ट्रिगर एलिमेण्ट् इत्यत्र सर्वदा उपस्थितः भवितुम् आवश्यकम् अस्ति ।

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset=""।

नामः	प्रकारः	मूलभूतम्‌	वर्णनम्‌
offset इति	संख्या \| तार \| नियोग	०	तस्य लक्ष्यस्य सापेक्षं ड्रॉपडाउनस्य आफ्सेट् । अधिकविवरणार्थं Popper.js इत्यस्य offset docs पश्यन्तु ।
पर्यस्	बूलियन इति	सत्यम्‌	सन्दर्भतत्त्वे ओवरलैपिंग् भवति चेत् Dropdown इत्यस्य फ्लिप् कर्तुं अनुमन्यताम् । अधिकविवरणार्थं Popper.js इत्यस्य flip docs पश्यन्तु ।
सीमा	तार \| तत्व	'scrollParent' इति ।	ड्रॉपडाउन मेनू की ओवरफ्लो बाध्यता सीमा। `'viewport'`, `'window'`, `'scrollParent'`, अथवा HTMLElement सन्दर्भस्य मूल्यानि स्वीकुर्वति (केवलं JavaScript) । अधिकसूचनार्थं Popper.js इत्यस्य preventOverflow docs पश्यन्तु ।
सन्दर्भः	तार \| तत्व	'टॉगल' इति ।	ड्रॉपडाउन मेनू का सन्दर्भ तत्व। `'toggle'`, `'parent'`, अथवा HTMLElement सन्दर्भस्य मूल्यानि स्वीकुर्वति । अधिकविवरणार्थं Popper.js इत्यस्य referenceObject docs पश्यन्तु ।
प्रदर्शन	सूत्र	'गतिशील' इति ।	पूर्वनिर्धारितरूपेण, वयं गतिशीलस्थापनार्थं Popper.js इत्यस्य उपयोगं कुर्मः । इत्यनेन एतत् निष्क्रियं कुर्वन्तु `static`।

ध्यानं कुर्वन्तु यदा , boundaryइत्यस्मात् परं किमपि मूल्यं सेट् भवति तदा 'scrollParent'शैली पात्रे position: staticप्रयुक्ता भवति ।.dropdown

विधियाँ

प्रक्रिया	वर्णनम्‌
`$().dropdown('toggle')`	दत्तस्य नवबारस्य अथवा ट्याब्ड् नेविगेशनस्य ड्रॉप्डाउन मेनू टॉग्ल् करोति ।
`$().dropdown('show')`	दत्तस्य नवबारस्य अथवा ट्याब्ड् नेविगेशनस्य ड्रॉप्डाउन मेनू दर्शयति ।
`$().dropdown('hide')`	दत्तस्य नवबारस्य अथवा ट्याब्ड् नेविगेशनस्य ड्रॉप्डाउन मेनू गोपयति ।
`$().dropdown('update')`	कस्यचित् एलिमेण्ट् इत्यस्य ड्रॉप्डाउन् इत्यस्य स्थितिं अद्यतनं करोति ।
`$().dropdown('dispose')`	कस्यचित् तत्त्वस्य पतनं नष्टं करोति ।

घटनाः

.dropdown-menuसर्वे ड्रॉपडाउन इवेण्ट् 's parent एलिमेण्ट् इत्यत्र प्रज्वलिताः भवन्ति तथा च एकः relatedTargetगुणः भवति, यस्य मूल्यं टॉग्लिंग् एङ्कर् एलिमेण्ट् अस्ति । hide.bs.dropdownतथा च hidden.bs.dropdownइवेण्ट्स् मध्ये एकः clickEventगुणः भवति (केवलं यदा मूल इवेण्ट् प्रकारः अस्ति click) यस्मिन् क्लिक् इवेण्ट् कृते Event Object भवति ।

घटना	वर्णनम्‌
`show.bs.dropdown`	show instance मेथड् आह्वयते चेत् एषा इवेण्ट् तत्क्षणमेव प्रज्वलति ।
`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"`अद्यापि आवश्यकम्