مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
Check
in English

ڊراپ ڊائونز

بوٽ اسٽريپ ڊراپ ڊائون پلگ ان سان لنڪن جي لسٽن ۽ وڌيڪ ڏيکارڻ لاءِ لاڳاپيل اوورليز کي ٽوگل ڪريو.

هن صفحي تي

اوسر

ڊراپ ڊائونز ٽوگليبل، ڳنڍين جي فهرستن ۽ وڌيڪ ڏيکارڻ لاءِ لاڳاپيل اوورليز آهن. اهي شامل ڪيل بوٽ اسٽريپ ڊراپ ڊائون جاوا اسڪرپٽ پلگ ان سان متعامل ڪيا ويا آهن. اهي ڪلڪ ڪرڻ سان ٽوگل ڪيا ويا آهن، نه هوور ڪرڻ سان؛ هي هڪ ارادي ڊيزائن جو فيصلو آهي.

ڊراپ ڊائونز هڪ ٽئين پارٽي لائبريري تي ٺهيل آهن، پوپر ، جيڪا متحرڪ پوزيشن ۽ ڏيک پورٽ جي سڃاڻپ مهيا ڪري ٿي. Bootstrap جي JavaScript کان اڳ popper.min.js شامل ڪرڻ جي پڪ ڪريو يا استعمال ڪريو bootstrap.bundle.min.js/ bootstrap.bundle.jsجنهن ۾ Popper شامل آهي. پوپر نيوبارز ۾ ڊراپ ڊائونز کي پوزيشن ڪرڻ لاءِ استعمال نه ڪيو ويو آهي جيتوڻيڪ متحرڪ پوزيشن جي ضرورت ناهي.

پهچ

WAI ARIA معيار هڪ حقيقي role="menu"ويجيٽ جي وضاحت ڪري ٿو ، پر اهو مخصوص آهي ايپليڪيشن-جهڙي مينيو لاءِ جيڪو عملن يا ڪمن کي متحرڪ ڪري ٿو. ARIA مينيو صرف مينيو شيون، چيڪ باڪس مينيو شيون، ريڊيو بٽڻ مينيو شيون، ريڊيو بٽڻ گروپ، ۽ ذيلي مينيو شامل ڪري سگھن ٿا.

بوٽ اسٽريپ جا ڊراپ ڊائونز، ٻئي طرف، عام طور تي ٺهيل آهن ۽ مختلف حالتن ۽ مارڪ اپ ساختن تي لاڳو ٿين ٿيون. مثال طور، اهو ممڪن آهي ڊراپ ڊائونز ٺاهڻ جنهن ۾ اضافي ان پٽ ۽ فارم ڪنٽرول شامل هجن، جهڙوڪ سرچ فيلڊز يا لاگ ان فارم. انهي سبب لاء، بوٽ اسٽريپ جي توقع نه آهي (نه ئي خودڪار طور تي شامل ڪريو) ڪنهن به role۽ خاصيتن جي حقيقي ARIA مينيو aria-لاء گهربل . ليکڪ کي پاڻ ۾ اهي وڌيڪ مخصوص خاصيتون شامل ڪرڻ گهرجن.

بهرحال، بوٽ اسٽريپ اڪثر معياري ڪيبورڊ مينيو رابطي لاءِ بلٽ ان سپورٽ شامل ڪندو آهي، جيئن ته ڪيبورڊ ڪيبورڊ .dropdown-itemاستعمال ڪندي انفرادي عناصر ذريعي منتقل ڪرڻ جي صلاحيت ۽ مينيو کي ESCڪيئي سان بند ڪرڻ.

مثال

ڊراپ ڊائون جي ٽوگل (توهان جو بٽڻ يا لنڪ) ۽ ڊراپ ڊائون مينيو کي لفاف ڪريو اندر .dropdown، يا ٻيو عنصر جيڪو اعلان ڪري ٿو position: relative;. توهان جي امڪاني ضرورتن کي بهتر طور تي پورو ڪرڻ لاءِ ڊراپ ڊائونز شروع ٿي سگهن ٿا <a>يا عناصر. <button>هتي ڏيکاريل مثالن ۾ سيمينٽڪ <ul>عناصر استعمال ڪن ٿا جتي مناسب هجي، پر ڪسٽم مارڪ اپ سپورٽ ٿيل آهي.

اڪيلو بٽڻ

ڪنهن به هڪ .btnکي ڪجهه مارڪ اپ تبديلين سان ڊراپ ڊائون ٽوگل ۾ تبديل ڪري سگهجي ٿو. هتي اهو آهي ته توهان انهن کي ڪنهن به <button>عناصر سان ڪم ڪرڻ لاء ڪيئن رکي سگهو ٿا:

html 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
  </ul>
</div>

۽ <a>عناصر سان:

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

  <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>
  </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. ڊراپ ڊائون شيون ۾ ڪا به تبديلي جي ضرورت ناهي.

html 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

۽ ان کي نيوبار ۾ استعمال ڪرڻ لاءِ:

html 
<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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 ۾ Bootstrap استعمال ڪرڻ وقت هدايتون نظر اينديون، مطلب .dropstartساڄي پاسي ظاهر ٿيندو.

مرڪزي

ڊراپ ڊائون مينيو کي ٽوگل جي ھيٺان مرڪزي .dropdown-centerعنصر سان ٺاھيو.

html 
<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ڊراپ اپ

ٽريگر ڊراپ ڊائون مينيو مٿين عنصرن کي شامل .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>

ڊراپ اپ مرڪز

ڊراپ اپ مينيو کي ٽوگل جي مٿان مرڪزي .dropup-centerعنصر سان ٺاھيو.

html 
<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </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">
    Dropend
  </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 Dropend</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 dropstart">
  <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>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

توھان استعمال ڪري سگھو ٿا <a>يا <button>عناصر ڊراپ ڊائون شيون طور.

html 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <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 يا ٽيڪسٽ يوٽيلٽيز سان وڌيڪ انداز ۾ آزاد ٿيو.

html 
<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سيٽ ۾ موجوده شيءِ لاءِ.

html 
<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ڊراپ ڊائون ۾ شيون شامل ڪريو انھن کي غير فعال طور انداز ڪرڻ لاء .

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

ڊفالٽ طور، هڪ ڊراپ ڊائون مينيو خود بخود 100٪ مٿي کان مٿي ۽ ان جي والدين جي کاٻي پاسي سان رکيل آهي. توھان ھن کي تبديل ڪري سگھو ٿا هدايتي .drop*طبقن سان، پر توھان انھن کي ڪنٽرول ڪري سگھوٿا اضافي ترميمي ڪلاسن سان.

شامل ڪريو .dropdown-menu-enda .dropdown-menu۾ ساڄي طرف ڊروپ ڊائون مينيو کي ترتيب ڏيو. RTL ۾ Bootstrap استعمال ڪرڻ وقت هدايتون نظر اينديون، مطلب .dropdown-menu-endته کاٻي پاسي ظاهر ٿيندو.

اٿو! ڊراپ ڊائونز پوزيشن ۾ آهن پوپر جي مهرباني کان سواءِ جڏهن اهي نيوبار ۾ شامل آهن.
html 
<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.

html 
<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.

html 
<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>

data-bs-display="static"نوٽ ڪريو ته توھان کي نيوبارز ۾ ڊراپ ڊائون بٽڻن لاءِ خصوصيت شامل ڪرڻ جي ضرورت ناھي، ڇو ته پوپر نيوبارز ۾ استعمال نه ڪيو ويو آھي.

ترتيب ڏيڻ جا اختيار

مٿي ڏيکاريل اختيارن مان گھڻا کڻڻ، ھتي ھڪڙو ننڍڙو باورچی خانه سنڪ ڊيمو آھي مختلف ڊراپ ڊائون الائنمينٽ اختيارن جو ھڪڙو جڳھ ۾.

html 
<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </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">
  <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>

مينيو مواد

مٿو

ڪنهن به ڊراپ ڊائون مينيو ۾ عملن جي سيڪشن کي ليبل ڪرڻ لاءِ هيڊر شامل ڪريو.

html 
<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>

ورهائيندڙ

ورهائيندڙ سان لاڳاپيل مينيو شيون جا الڳ گروپ.

html 
<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>

متن

ڪنهن به فريفارم ٽيڪسٽ کي ڊراپ ڊائون مينيو ۾ متن سان رکو ۽ اسپيسنگ يوٽيلٽيز استعمال ڪريو . نوٽ ڪريو ته توھان کي امڪاني طور تي مينيو جي چوٽي کي محدود ڪرڻ لاءِ اضافي سيزنگ اسلوب جي ضرورت پوندي.

ڪجھ مثالن جو متن جيڪو ڊراپ ڊائون مينيو ۾ آزاد وھندڙ آھي.

۽ هي وڌيڪ مثال متن آهي.

html 
<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>

فارم

هڪ فارم کي ڊراپ ڊائون مينيو ۾ رکو، يا ان کي ڊراپ ڊائون مينيو ۾ ٺاهيو، ۽ مارجن يا پيڊنگ يوٽيلٽيز استعمال ڪريو ان کي ناڪاري جاءِ ڏيڻ لاءِ جيڪا توهان کي گهربل هجي.

هتي جي چوڌاري نئون؟ سائن اپ ڪريو پاسورڊ وساري ويٺا؟
html 
<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>
html 
<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <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>
</div>

استعمال ڪريو data-bs-offsetيا data-bs-referenceڊراپ ڊائون جي جڳھ کي تبديل ڪرڻ لاء.

html 
<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
    </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <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>
</div>

خودڪار بند ڪرڻ وارو عمل

ڊفالٽ طور، ڊراپ ڊائون مينيو بند ڪيو ويندو آهي جڏهن ڪلڪ ڪريو اندر يا ٻاهران ڊراپ ڊائون مينيو. توھان autoCloseھي اختيار استعمال ڪري سگھو ٿا ڊراپ ڊائون جي ھن رويي کي تبديل ڪرڻ لاءِ.

html 
<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </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>

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

بوٽ اسٽريپ جي ترقي ڪندڙ CSS متغير جي نقطي جي حصي جي طور تي، ڊراپ ڊائونز هاڻي مقامي سي ايس ايس متغير استعمال ڪن ٿا .dropdown-menuبهتر حقيقي وقت جي ڪسٽمائيزيشن لاءِ. CSS متغيرن لاءِ قيمتون Sass ذريعي سيٽ ڪيون ويون آهن، تنهن ڪري Sass ڪسٽمائيزيشن اڃا به سپورٽ ٿيل آهي.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

CSS متغيرن ذريعي ڪسٽمائيزيشن کي ڪلاس ۾ ڏسي سگھجي ٿو .dropdown-menu-darkجتي اسان نقل ڪيل CSS چونڊيندڙن کي شامل ڪرڻ کان سواءِ مخصوص قدرن کي اوور رائيڊ ڪندا آهيون.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

سس متغير

سڀني ڊراپ ڊائونز لاءِ متغير:

$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:             var(--#{$prefix}border-color-translucent);
$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($dropdown-link-color, 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-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

اونداهي ڊراپ ڊائون لاءِ متغير :

$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-based carets لاءِ متغيرات جيڪي ظاهر ڪن ٿا ڊراپ ڊائون جي انٽرايڪٽيٽي:

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

ملائيندڙ

Mixins CSS-based carets پيدا ڪرڻ لاءِ استعمال ڪيا ويندا آهن ۽ ڳولهي سگهجن ٿا 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;
    }
  }
}

استعمال

ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ جي ذريعي، ڊراپ ڊائون پلگ ان پوشيده مواد (ڊراپ ڊائون مينيو) کي ٽوگل ڪندي .showڪلاس کي والدين تي ٽوگل ڪري ٿو .dropdown-menu. وصف هڪ ايپليڪيشن سطح تي ڊراپ ڊائون مينيو کي بند ڪرڻ لاءِ انحصار ڪيو data-bs-toggle="dropdown"ويو آهي، تنهنڪري اهو هميشه استعمال ڪرڻ سٺو خيال آهي.

ٽچ-فعال ڊوائيسز تي، هڪ ڊراپ ڊائون کولڻ سان خالي هٿين کي شامل ڪري ٿو عنصر mouseoverجي فوري ٻارن لاءِ . iOS جي ايونٽ ڊيليگيشن ۾ نرالا<body> ڪم ڪرڻ لاءِ هي اعترافي طور تي بدصورت هيڪ ضروري آهي ، جيڪو ٻي صورت ۾ ڊراپ ڊائون کان ٻاهر ڪٿي به ٽيپ کي روڪيندو ان ڪوڊ کي ٽرگر ڪرڻ کان جيڪو ڊراپ ڊائون کي بند ڪري ٿو. هڪ دفعو ڊراپ ڊائون بند ڪيو ويو آهي، اهي اضافي خالي هينڊلر ختم ڪيا ويا آهن. mouseover

ڊيٽا جي خاصيتن جي ذريعي

data-bs-toggle="dropdown"ڊراپ ڊائون کي ٽوگل ڪرڻ لاءِ لنڪ يا بٽڻ شامل ڪريو .

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

جاوا اسڪرپٽ ذريعي

جاوا اسڪرپٽ ذريعي ڊراپ ڊائونز کي ڪال ڪريو:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-toggle="dropdown"اڃا به گهربل

ان کان سواءِ ته توهان پنهنجي ڊراپ ڊائون کي JavaScript ذريعي ڪال ڪريو يا ان جي بدران data-api استعمال ڪريو، data-bs-toggle="dropdown"هميشه لاءِ ضروري آهي ته ڊراپ ڊائون جي ٽرگر عنصر تي موجود هجي.

اختيارن

جيئن ته اختيارن کي ڊيٽا انتساب يا جاوا اسڪرپٽ ذريعي منتقل ڪري سگھجي ٿو، توھان ھڪڙي اختيار جو نالو شامل ڪري سگھو ٿا data-bs-، جيئن data-bs-animation="{value}". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت اختياري جي صورت واري قسم کي تبديل ڪرڻ جي پڪ ڪريو ”ڪيم ڪيس“ مان ” ڪباب ڪيس “. مثال طور، data-bs-custom-class="beautifier"جي بدران استعمال ڪريو data-bs-customClass="beautifier".

Bootstrap 5.2.0 جي طور تي، سڀئي جزا هڪ تجرباتي محفوظ ڪيل ڊيٽا جي خاصيت کي سپورٽ ڪن data-bs-configٿا جيڪي JSON اسٽرنگ جي طور تي سادي جزو جي جوڙجڪ کي گھرائي سگھن ٿا. جڏهن هڪ عنصر آهي data-bs-config='{"delay":0, "title":123}'۽ data-bs-title="456"خاصيتون آهن، حتمي titleقيمت هوندي 456۽ الڳ الڳ ڊيٽا خاصيتون ڏنل قدرن کي ختم ڪري ڇڏيندو data-bs-config. ان کان علاوه، موجوده ڊيٽا جون خاصيتون JSON قدرن کي گھرائڻ جي قابل آھن جھڙوڪ data-bs-delay='{"show":0,"hide":150}'.

نالو قسم ڊفالٽ وصف
autoClose بولن ، تار true ڊراپ ڊائون جي خودڪار بند رويي کي ترتيب ڏيو:
  • true- ڊراپ ڊائون مينيو جي ٻاهران يا اندر ڪلڪ ڪري ڊراپ ڊائون بند ڪيو ويندو.
  • false- ڊراپ ڊائون بند ڪيو ويندو ٽوگل بٽڻ تي ڪلڪ ڪندي ۽ دستي طور تي ڪال ڪرڻ hideيا toggleطريقو. (پڻ کي دٻائڻ سان بند نه ڪيو ويندو esc)
  • 'inside'- ڊراپ ڊائون مينيو اندر ڪلڪ ڪندي (صرف) بند ڪيو ويندو.
  • 'outside'- ڊراپ ڊائون مينيو کان ٻاهر ڪلڪ ڪندي (صرف) بند ڪيو ويندو.
نوٽ: ڊراپ ڊائون هميشه چاٻي سان بند ڪري سگھجي ٿو ESC.
boundary تار ، عنصر 'clippingParents' ڊراپ ڊائون مينيو جي اوور فلو رڪاوٽ جي حد (صرف پوپر جي روڪ اوور فلو موڊيفائر تي لاڳو ٿئي ٿو). ڊفالٽ طور اهو آهي clippingParents۽ هڪ HTMLElement ريفرنس قبول ڪري سگهي ٿو (صرف JavaScript ذريعي). وڌيڪ معلومات لاءِ ڏسو Popper's detectOverflow docs .
display تار 'dynamic' ڊفالٽ طور، اسان پوپر کي متحرڪ پوزيشن لاء استعمال ڪندا آهيون. هن سان غير فعال ڪريو static.
offset صف، تار، فعل [0, 2] ان جي ھدف سان لاڳاپيل ڊراپ ڊائون جو آفسيٽ. توهان ڪاما کان الڳ ڪيل قدرن سان ڊيٽا جي خاصيتن ۾ هڪ اسٽرنگ پاس ڪري سگهو ٿا جهڙوڪ: data-bs-offset="10,20". جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي آفسيٽ کي طئي ڪرڻ لاء، ان کي سڏيو ويندو آهي هڪ اعتراض سان جنهن ۾ پاپپر جي جڳهه، حوالو، ۽ پاپپر ان جي پهرين دليل جي طور تي رد ڪري ٿو. ٽاريندڙ عنصر DOM نوڊ ٻئي دليل طور منظور ڪيو ويو آهي. فنڪشن کي ٻن انگن سان هڪ صف واپس ڪرڻ گهرجي: ڇڪڻ ، فاصلو . وڌيڪ معلومات لاءِ ڏسو Popper's offset docs .
popperConfig خال، اعتراض، فعل null Bootstrap جي ڊفالٽ Popper config کي تبديل ڪرڻ لاء، Popper جي ترتيب کي ڏسو . جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي Popper ترتيب ٺاهڻ لاء، اهو هڪ اعتراض سان سڏيو ويندو آهي جنهن ۾ Bootstrap جي ڊفالٽ Popper ترتيب شامل آهي. اهو توهان کي استعمال ڪرڻ ۽ ڊفالٽ کي توهان جي پنهنجي ترتيب سان ملائڻ ۾ مدد ڪري ٿو. فنڪشن کي پوپر لاءِ هڪ ترتيب واري شئي واپس ڪرڻ گهرجي.
reference تار، عنصر، اعتراض 'toggle' ڊراپ ڊائون مينيو جو حوالو عنصر. 'toggle', 'parent', HTMLElement ريفرنس يا هڪ شئي مهيا ڪرڻ جا قدر قبول ڪري ٿو getBoundingClientRect. وڌيڪ معلومات لاءِ ڏسو پوپر جي تعمير ڪندڙ دستاويزن ۽ ورچوئل عنصر دستاويزن .

فنڪشن سان استعمال ڪنديpopperConfig 

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

طريقا

طريقو وصف
dispose هڪ عنصر جي ڊراپ ڊائون کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو)
getInstance جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ڊراپ ڊائون مثال حاصل ڪرڻ جي اجازت ڏئي ٿو، توهان ان کي هن طرح استعمال ڪري سگهو ٿا: bootstrap.Dropdown.getInstance(element).
getOrCreateInstance جامد طريقو جيڪو DOM عنصر سان لاڳاپيل هڪ ڊراپ ڊائون مثال واپس ڪري ٿو يا هڪ نئون ٺاهيو ان صورت ۾ ان جي شروعات نه ڪئي وئي هئي. توھان ان کي ھن طرح استعمال ڪري سگھو ٿا: bootstrap.Dropdown.getOrCreateInstance(element).
hide ڏنل نيوبار يا ٽيب ٿيل نيويگيشن جي ڊراپ ڊائون مينيو کي لڪايو.
show ڏنل نيوبار يا ٽيب ٿيل نيويگيشن جو ڊراپ ڊائون مينيو ڏيکاري ٿو.
toggle ڏنل نيوبار يا ٽيب ٿيل نيويگيشن جي ڊراپ ڊائون مينيو کي ٽوگل ڪري ٿو.
update هڪ عنصر جي ڊراپ ڊائون جي پوزيشن کي اپڊيٽ ڪري ٿو.

واقعا

سڀئي ڊراپ ڊائون واقعا ٽوگلنگ عنصر تي فائر ڪيا ويا آهن ۽ پوءِ بلبل ٿي ويا آهن. تنهن ڪري توهان پڻ شامل ڪري سگهو ٿا واقعا ٻڌندڙن کي .dropdown-menuجي والدين عنصر تي. hide.bs.dropdown۽ hidden.bs.dropdownواقعن وٽ clickEventملڪيت آھي (صرف جڏھن اصل واقعي جو قسم آھي click) جنھن ۾ ڪلڪ واري واقعي لاءِ ايونٽ اعتراض شامل آھي.

واقعي جو قسم وصف
hide.bs.dropdown فائر فوري طور تي جڏهن مثالي hideطريقي کي سڏيو ويو آهي.
hidden.bs.dropdown فائر ڪيو ويو جڏهن ڊراپ ڊائون ختم ٿي چڪو آهي صارف کان لڪائي رهيو آهي ۽ سي ايس ايس ٽرانسشن مڪمل ٿي چڪو آهي.
show.bs.dropdown فوري طور تي فائر ڪري ٿو جڏهن showمثال جو طريقو سڏيو ويندو آهي.
shown.bs.dropdown فائر ڪيو ويو جڏهن ڊراپ ڊائون صارف کي ڏيکاريو ويو آهي ۽ CSS ٽرانزيڪشن مڪمل ٿي چڪا آهن. 
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})