ड्रपडाउनहरू

बुटस्ट्र्याप ड्रपडाउन प्लगइनको साथ लिङ्कहरूको सूची र थप प्रदर्शन गर्नको लागि प्रासंगिक ओभरलेहरू टगल गर्नुहोस्।

अवलोकन

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

ड्रपडाउनहरू तेस्रो पक्षको पुस्तकालय, Popper.js मा बनाइएका छन् , जसले गतिशील स्थिति र भ्यूपोर्ट पत्ता लगाउने सुविधा प्रदान गर्दछ। Bootstrap को JavaScript अघि popper.min.js समावेश गर्न निश्चित हुनुहोस् वा प्रयोग गर्नुहोस् bootstrap.bundle.min.js/ bootstrap.bundle.jsजसमा Popper.js समावेश छ। Popper.js लाई navbars मा ड्रपडाउन राख्न को लागी प्रयोग गरिदैन यद्यपि गतिशील स्थिति आवश्यक छैन।

यदि तपाइँ स्रोतबाट हाम्रो जाभास्क्रिप्ट निर्माण गर्दै हुनुहुन्छ भने, यो आवश्यक छutil.js ।

पहुँच

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

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

तपाईले गैर-अन्तर्क्रियात्मक ड्रपडाउन वस्तुहरू पनि सिर्जना गर्न सक्नुहुन्छ .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-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>

उत्तरदायी पङ्क्तिबद्धता

यदि तपाइँ उत्तरदायी पङ्क्तिबद्धता प्रयोग गर्न चाहनुहुन्छ भने, विशेषता थपेर गतिशील स्थिति असक्षम 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 मा ड्रपडाउन बटनहरूमा विशेषता थप्न आवश्यक छैन 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>

प्रयोग

डेटा विशेषताहरू वा JavaScript मार्फत, ड्रपडाउन प्लगइनले .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"`अझै आवश्यक छ

तपाईले आफ्नो ड्रपडाउनलाई JavaScript मार्फत कल गर्नुभएता पनि वा डेटा-एपीआई प्रयोग data-toggle="dropdown"गर्नु भए पनि, ड्रपडाउनको ट्रिगर तत्वमा सधैं उपस्थित हुन आवश्यक छ।

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-offset=""।

नाम	टाइप गर्नुहोस्	पूर्वनिर्धारित	विवरण
अफसेट	नम्बर \| स्ट्रिङ \| समारोह	०	यसको लक्ष्य सापेक्ष ड्रपडाउन को अफसेट। जब एक प्रकार्य अफसेट निर्धारण गर्न प्रयोग गरिन्छ, यसलाई पहिलो तर्कको रूपमा अफसेट डेटा समावेश गरिएको वस्तुसँग बोलाइन्छ। प्रकार्यले एउटै संरचना भएको वस्तु फिर्ता गर्नुपर्छ। ट्रिगर गर्ने तत्व DOM नोड दोस्रो तर्कको रूपमा पारित गरिएको छ। थप जानकारीको लागि Popper.js अफसेट कागजातहरू हेर्नुहोस् ।
फ्लिप	बुलियन	सत्य	सन्दर्भ तत्वमा ओभरल्यापिङको अवस्थामा ड्रपडाउनलाई फ्लिप गर्न अनुमति दिनुहोस्। थप जानकारीको लागि Popper.js को फ्लिप कागजातहरू हेर्नुहोस् ।
सीमा	स्ट्रिङ \| तत्व	'स्क्रोल अभिभावक'	ड्रपडाउन मेनुको ओभरफ्लो अवरोध सीमा। `'viewport'`, `'window'`, `'scrollParent'`, वा HTMLElement सन्दर्भ (जाभास्क्रिप्ट मात्र) को मानहरू स्वीकार गर्दछ । थप जानकारीको लागि Popper.js को preventOverflow कागजातहरू हेर्नुहोस् ।
सन्दर्भ	स्ट्रिङ \| तत्व	'टगल'	ड्रपडाउन मेनुको सन्दर्भ तत्व। `'toggle'`, `'parent'`वा HTMLElement सन्दर्भ को मानहरू स्वीकार गर्दछ । थप जानकारीको लागि Popper.js को सन्दर्भ वस्तु कागजातहरू हेर्नुहोस् ।
प्रदर्शन	तार	'गतिशील'	पूर्वनिर्धारित रूपमा, हामी गतिशील स्थितिको लागि Popper.js प्रयोग गर्छौं। यसलाई असक्षम पार्नुहोस् `static`।
popperConfig	शून्य \| वस्तु	खाली	Bootstrap को पूर्वनिर्धारित Popper.js कन्फिगरेसन परिवर्तन गर्न, Popper.js को कन्फिगरेसन हेर्नुहोस्

नोट गर्नुहोस् जब boundaryबाहेक कुनै पनि मानमा सेट गरिन्छ 'scrollParent', शैली कन्टेनरमा position: staticलागू हुन्छ ।.dropdown

विधिहरू

विधि	विवरण
`$().dropdown('toggle')`	दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनको ड्रपडाउन मेनुलाई टगल गर्दछ।
`$().dropdown('show')`	दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनको ड्रपडाउन मेनु देखाउँछ।
`$().dropdown('hide')`	दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनको ड्रपडाउन मेनु लुकाउँछ।
`$().dropdown('update')`	तत्वको ड्रपडाउनको स्थिति अपडेट गर्दछ।
`$().dropdown('dispose')`	तत्वको ड्रपडाउन नष्ट गर्दछ।

घटनाहरू

सबै ड्रपडाउन घटनाहरू .dropdown-menu'पैरेन्ट एलिमेन्ट' मा फायर गरिएका छन् र एउटा relatedTargetगुण छ, जसको मान टगलिङ एङ्कर एलिमेन्ट हो। hide.bs.dropdownर hidden.bs.dropdownघटनाहरूमा एउटा clickEventगुण हुन्छ (जब मूल घटना प्रकार हुन्छ click) जसमा क्लिक घटनाको लागि घटना वस्तु समावेश हुन्छ।

घटना	विवरण
`show.bs.dropdown`	शो उदाहरण विधि कल गर्दा यो घटना तुरुन्तै सक्रिय हुन्छ।
`shown.bs.dropdown`	ड्रपडाउन प्रयोगकर्ताको लागि दृश्यात्मक बनाइएपछि यो घटना निकालिन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
`hide.bs.dropdown`	लुकाउने उदाहरण विधि कल गर्दा यो घटना तुरुन्तै निकालिन्छ।
`hidden.bs.dropdown`	ड्रपडाउन प्रयोगकर्ताबाट लुकेको समाप्त भएपछि यो घटना निकालिन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।

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