मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
in English

ड्रपडाउनहरू

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

यस पृष्ठमा

अवलोकन

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

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

पहुँच

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

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

यद्यपि, बुटस्ट्र्यापले धेरै मानक किबोर्ड मेनु अन्तरक्रियाहरूको लागि निर्मित समर्थन थप्छ, जस्तै .dropdown-itemकर्सर कुञ्जीहरू प्रयोग गरेर व्यक्तिगत तत्वहरू मार्फत सार्न सक्ने क्षमता र कुञ्जीसँग मेनु बन्द गर्ने क्षमता ESC।

उदाहरणहरू

ड्रपडाउनको टगल (तपाईंको बटन वा लिङ्क) र ड्रपडाउन मेनु भित्र .dropdown, वा घोषणा गर्ने अर्को तत्वलाई बेर्नुहोस् position: relative;। ड्रपडाउनहरू तपाईंको सम्भावित आवश्यकताहरूलाई अझ राम्रोसँग फिट गर्न तत्वहरूबाट <a>ट्रिगर गर्न सकिन्छ । <button>यहाँ देखाइएका उदाहरणहरूले <ul>उपयुक्त भएमा सिमान्टिक तत्वहरू प्रयोग गर्छन्, तर आफू अनुकूल मार्कअप समर्थित छ।

एकल बटन

कुनै पनि एकललाई .btnकेही मार्कअप परिवर्तनहरूसँग ड्रपडाउन टगलमा परिणत गर्न सकिन्छ। यहाँ तपाइँ कसरी तिनीहरूलाई कुनै <button>तत्वहरूसँग काम गर्न राख्न सक्नुहुन्छ:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

र <a>तत्वहरु संग:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

सबै भन्दा राम्रो भाग तपाईं यो कुनै पनि बटन संस्करण संग गर्न सक्नुहुन्छ, पनि:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

साइजिङ

बटन ड्रपडाउनहरू पूर्वनिर्धारित र विभाजित ड्रपडाउन बटनहरू सहित सबै आकारका बटनहरूसँग काम गर्दछ।

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

गाढा ड्रपडाउनहरू

अवस्थितमा थपेर गाढा नेभबार वा अनुकूलन शैली मिलाउन गाढा ड्रपडाउनहरूमा अप्ट इन .dropdown-menu-darkगर्नुहोस् .dropdown-menu। ड्रपडाउन वस्तुहरूमा कुनै परिवर्तन आवश्यक छैन।

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

र यसलाई navbar मा प्रयोग गर्न राख्दै:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

दिशाहरू

RTL

RTL मा बुटस्ट्र्याप प्रयोग गर्दा दिशाहरू प्रतिबिम्बित हुन्छन्, अर्थ .dropstartदायाँ तिर देखा पर्नेछ।

ड्रपअप

.dropupमूल तत्वमा थपेर तत्वहरू माथिको ड्रपडाउन मेनु ट्रिगर गर्नुहोस् ।

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ड्रपराइट

.dropendमूल तत्वमा थपेर तत्वहरूको दायाँतिर ड्रपडाउन मेनु ट्रिगर गर्नुहोस् ।

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ड्रपलेफ्ट

.dropstartमूल तत्वमा थपेर तत्वहरूको बाँयामा ड्रपडाउन मेनु ट्रिगर गर्नुहोस् ।

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

तपाईं ड्रपडाउन वस्तुहरूको रूपमा प्रयोग <a>वा तत्वहरू प्रयोग गर्न सक्नुहुन्छ।<button>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

तपाईले गैर-अन्तर्क्रियात्मक ड्रपडाउन वस्तुहरू पनि सिर्जना गर्न सक्नुहुन्छ .dropdown-item-text। आफू अनुकूल CSS वा पाठ उपयोगिताहरूको साथ थप स्टाइल गर्न स्वतन्त्र महसुस गर्नुहोस्।

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

सक्रिय

.activeड्रपडाउनमा वस्तुहरूलाई सक्रिय रूपमा स्टाइल गर्न थप्नुहोस् । सक्रिय अवस्थालाई सहायक प्रविधिहरूमा अभिव्यक्त गर्न, aria-currentविशेषता प्रयोग गर्नुहोस् — pageहालको पृष्ठको लागि मान प्रयोग गरेर, वा trueसेटमा हालको वस्तुको लागि।

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

अक्षम

.disabledड्रपडाउनमा वस्तुहरूलाई असक्षम गरिएको रूपमा स्टाइल गर्न थप्नुहोस् ।

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

पूर्वनिर्धारित रूपमा, ड्रपडाउन मेनु स्वचालित रूपमा 100% शीर्षबाट र यसको अभिभावकको बायाँ छेउमा राखिएको छ। तपाइँ यसलाई दिशात्मक .drop*कक्षाहरू मार्फत परिवर्तन गर्न सक्नुहुन्छ, तर तपाइँ तिनीहरूलाई थप परिमार्जक कक्षाहरूबाट पनि नियन्त्रण गर्न सक्नुहुन्छ।

ड्रपडाउन मेनुलाई दायाँ पङ्क्तिबद्ध .dropdown-menu-endगर्न a मा थप्नुहोस् । .dropdown-menuRTL मा बुटस्ट्र्याप प्रयोग गर्दा दिशाहरू प्रतिबिम्बित हुन्छन्, यसको अर्थ .dropdown-menu-endबायाँ छेउमा देखा पर्नेछ।

हेड अप! ड्रपडाउनहरू पोपरलाई धन्यवाद स्थानमा राखिन्छन् जब तिनीहरू नेभबारमा समावेश हुन्छन्। 
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

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

यदि तपाइँ उत्तरदायी पङ्क्तिबद्धता प्रयोग गर्न चाहनुहुन्छ भने, विशेषता थपेर गतिशील स्थिति असक्षम data-bs-display="static"गर्नुहोस् र प्रतिक्रियाशील भिन्नता वर्गहरू प्रयोग गर्नुहोस्।

दिइएको ब्रेकपोइन्ट वा ठूलोसँग ड्रपडाउन मेनुलाई दायाँ पङ्क्तिबद्ध गर्न , थप्नुहोस् .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end।

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

दिइएको ब्रेकपोइन्ट वा ठूलोसँग ड्रपडाउन मेनु बायाँ पङ्क्तिबद्ध गर्न , थप्नुहोस् .dropdown-menu-endर .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start।

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

नोट गर्नुहोस् कि तपाईंले navbars मा ड्रपडाउन बटनहरूमा विशेषता थप्न आवश्यक छैन data-bs-display="static", किनकि Popper navbars मा प्रयोग गरिएको छैन।

पङ्क्तिबद्ध विकल्प

माथि देखाइएका धेरैजसो विकल्पहरू लिएर, यहाँ एकै ठाउँमा विभिन्न ड्रपडाउन पङ्क्तिबद्ध विकल्पहरूको सानो किचन सिङ्क डेमो छ।

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

मेनु सामग्री

हेडरहरू

कुनै पनि ड्रपडाउन मेनुमा कार्यहरूको खण्डहरू लेबल गर्न हेडर थप्नुहोस्।

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

डिभाइडरहरू

डिभाइडरसँग सम्बन्धित मेनु वस्तुहरूको समूह अलग गर्नुहोस्।

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

पाठ

पाठको साथ ड्रपडाउन मेनु भित्र कुनै पनि फ्रीफर्म पाठ राख्नुहोस् र स्पेसिङ उपयोगिताहरू प्रयोग गर्नुहोस् । ध्यान दिनुहोस् कि मेनुको चौडाइलाई सीमित गर्नको लागि तपाईंलाई सम्भवतः अतिरिक्त साइजिङ शैलीहरू चाहिन्छ।

ड्रपडाउन मेनु भित्र नि:शुल्क प्रवाह गर्ने केही उदाहरण पाठ।

र यो थप उदाहरण पाठ हो।

<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="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <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="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <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-bs-offsetवा प्रयोग गर्नुहोस् ।data-bs-reference

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

स्वतः बन्द व्यवहार

पूर्वनिर्धारित रूपमा, ड्रपडाउन मेनु भित्र वा बाहिर क्लिक गर्दा ड्रपडाउन मेनु बन्द हुन्छ। तपाईं autoCloseड्रपडाउन को यो व्यवहार परिवर्तन गर्न विकल्प प्रयोग गर्न सक्नुहुन्छ।

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

सास

चरहरू

सबै ड्रपडाउनहरूको लागि चरहरू:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($gray-900, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

गाढा ड्रपडाउनका लागि चरहरू :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

CSS-आधारित क्यारेटहरूका लागि चलहरू जसले ड्रपडाउनको अन्तरक्रियात्मकतालाई संकेत गर्दछ:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

मिक्सन

मिक्सिनहरू CSS-आधारित क्यारेटहरू उत्पन्न गर्न प्रयोग गरिन्छ र मा फेला पार्न सकिन्छ scss/mixins/_caret.scss।

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

प्रयोग

डेटा विशेषताहरू वा JavaScript मार्फत, ड्रपडाउन प्लगइनले अभिभावकमा .showकक्षा टगल गरेर लुकेको सामग्री (ड्रपडाउन मेनुहरू) टगल गर्दछ .dropdown-menu। data-bs-toggle="dropdown"अनुप्रयोग स्तरमा ड्रपडाउन मेनुहरू बन्द गर्नको लागि विशेषतामा भर परेको छ, त्यसैले यसलाई सधैं प्रयोग गर्नु राम्रो विचार हो ।

टच-सक्षम यन्त्रहरूमा, ड्रपडाउन खोल्दा तत्वको mouseoverतत्काल बच्चाहरूमा खाली ह्यान्डलरहरू थपिन्छ । यो स्वीकार्य रूपमा बदसूरत ह्याक आईओएसको घटना प्रतिनिधिमण्डलमा क्वर्कको<body> वरिपरि काम गर्न आवश्यक छ , जसले अन्यथा ड्रपडाउन बन्द गर्ने कोडलाई ट्रिगर गर्नबाट ड्रपडाउन बाहिर कहिँ पनि ट्याप गर्नबाट रोक्छ। ड्रपडाउन बन्द भएपछि, यी अतिरिक्त खाली ह्यान्डलरहरू हटाइन्छ। mouseover

डाटा विशेषताहरू मार्फत

data-bs-toggle="dropdown"ड्रपडाउन टगल गर्न लिङ्क वा बटनमा थप्नुहोस् ।

<div class="dropdown">
  <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत ड्रपडाउनहरू कल गर्नुहोस्:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"अझै आवश्यक छ

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-bs-, जस्तै मा data-bs-offset=""। डेटा विशेषताहरू मार्फत विकल्पहरू पास गर्दा CamelCase बाट kebab-case मा विकल्प नामको केस प्रकार परिवर्तन गर्न निश्चित गर्नुहोस्। उदाहरणका लागि, प्रयोग गर्नुको सट्टा data-bs-autoClose="false", प्रयोग गर्नुहोस् data-bs-auto-close="false"।

नाम टाइप गर्नुहोस् पूर्वनिर्धारित विवरण
boundary स्ट्रिङ | तत्व 'clippingParents' ड्रपडाउन मेनुको ओभरफ्लो अवरोध सीमा (पोपरको रोकथाम ओभरफ्लो परिमार्जनमा मात्र लागू हुन्छ)। पूर्वनिर्धारित रूपमा यो हो 'clippingParents'र HTMLElement सन्दर्भ स्वीकार गर्न सक्छ (जाभास्क्रिप्ट मार्फत मात्र)। थप जानकारीको लागि Popper's detectOverflow कागजातहरू हेर्नुहोस् ।
reference स्ट्रिङ | तत्व | वस्तु 'toggle' ड्रपडाउन मेनुको सन्दर्भ तत्व। 'toggle', 'parent', HTMLElement सन्दर्भ वा प्रदान गर्ने वस्तुको मानहरू स्वीकार गर्दछ getBoundingClientRect। थप जानकारीको लागि Popper को कन्स्ट्रक्टर कागजातहरू र भर्चुअल तत्व कागजातहरू हेर्नुहोस् ।
display तार 'dynamic' पूर्वनिर्धारित रूपमा, हामी गतिशील स्थितिको लागि Popper प्रयोग गर्छौं। यसलाई असक्षम पार्नुहोस् static।
offset array | स्ट्रिङ | समारोह [0, 2]

यसको लक्ष्य सापेक्ष ड्रपडाउन को अफसेट। तपाईंले अल्पविराम अलग मानहरू जस्तै डेटा विशेषताहरूमा स्ट्रिङ पास गर्न सक्नुहुन्छ:data-bs-offset="10,20"

जब एक प्रकार्य अफसेट निर्धारण गर्न प्रयोग गरिन्छ, यसलाई popper प्लेसमेन्ट, सन्दर्भ, र popper यसको पहिलो तर्कको रूपमा rects भएको वस्तुसँग बोलाइन्छ। ट्रिगर गर्ने तत्व DOM नोड दोस्रो तर्कको रूपमा पारित गरिएको छ। प्रकार्यले दुई संख्याहरू सहितको एरे फर्काउनु पर्छ :।[skidding, distance]

थप जानकारीको लागि Popper अफसेट कागजातहरू हेर्नुहोस् ।
autoClose बुलियन | तार true

ड्रपडाउनको स्वत: बन्द व्यवहार कन्फिगर गर्नुहोस्:

  • true- ड्रपडाउन मेनु बाहिर वा भित्र क्लिक गरेर ड्रपडाउन बन्द हुनेछ।
  • falsehide- ड्रपडाउन टगल बटन क्लिक गरेर र म्यानुअल रूपमा कल वा toggleविधि बन्द हुनेछ । (कुञ्जी थिचेर पनि बन्द हुने छैन esc)
  • 'inside'- ड्रपडाउन मेनु भित्र क्लिक गरेर ड्रपडाउन बन्द हुनेछ (केवल)।
  • 'outside'- ड्रपडाउन मेनु बाहिर क्लिक गरेर ड्रपडाउन बन्द हुनेछ (केवल)।
popperConfig शून्य | वस्तु | समारोह null

Bootstrap को पूर्वनिर्धारित Popper कन्फिगरेसन परिवर्तन गर्न, Popper को कन्फिगरेसन हेर्नुहोस् ।

जब एक प्रकार्य Popper कन्फिगरेसन सिर्जना गर्न प्रयोग गरिन्छ, यसलाई बुटस्ट्र्यापको पूर्वनिर्धारित Popper कन्फिगरेसन समावेश गर्ने वस्तुसँग बोलाइन्छ। यसले तपाइँलाई तपाइँको आफ्नै कन्फिगरेसनको साथ पूर्वनिर्धारित प्रयोग र मर्ज गर्न मद्दत गर्दछ। प्रकार्यले Popper को लागि कन्फिगरेसन वस्तु फिर्ता गर्नुपर्छ।

संग प्रकार्य प्रयोग गर्दैpopperConfig

var dropdown = new bootstrap.Dropdown(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

विधिहरू

विधि विवरण
toggle दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनको ड्रपडाउन मेनुलाई टगल गर्दछ।
show दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनको ड्रपडाउन मेनु देखाउँछ।
hide दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनको ड्रपडाउन मेनु लुकाउँछ।
update तत्वको ड्रपडाउनको स्थिति अपडेट गर्दछ।
dispose तत्वको ड्रपडाउन नष्ट गर्दछ। (DOM तत्वमा भण्डारण गरिएको डाटा हटाउँछ)
getInstance स्थिर विधि जसले तपाइँलाई DOM तत्वसँग सम्बन्धित ड्रपडाउन उदाहरण प्राप्त गर्न अनुमति दिन्छ, तपाइँ यसलाई यसरी प्रयोग गर्न सक्नुहुन्छ:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance स्थिर विधि जसले DOM तत्वसँग सम्बन्धित ड्रपडाउन उदाहरण फिर्ता गर्छ वा यसलाई प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्दछ। तपाईं यसलाई यसरी प्रयोग गर्न सक्नुहुन्छ:bootstrap.Dropdown.getOrCreateInstance(element)

घटनाहरू

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

विधि विवरण
show.bs.dropdown शो उदाहरण विधि कल गर्दा तुरुन्तै फायर हुन्छ।
shown.bs.dropdown ड्रपडाउन प्रयोगकर्तालाई दृश्यात्मक बनाइएपछि र CSS ट्रान्जिसनहरू पूरा भएपछि फायर गरियो।
hide.bs.dropdown लुकाउने उदाहरण विधि बोलाइएको बेला तुरुन्तै आगो।
hidden.bs.dropdown ड्रपडाउन प्रयोगकर्ताबाट लुकाउन सकिएपछि र CSS ट्रान्जिसनहरू पूरा भएपछि निकालियो। 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})