باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
Check
in English

دابەزینەکان

گۆڕینی سەرپۆشی ناوەڕۆک بۆ پیشاندانی لیستەکانی بەستەرەکان و زۆر شتی تر بە پێوەکراوەکەی Bootstrap.

لەم پەیجەدا

تێڕوانینێکی گشتی

دابەزینەکان دەتوانرێت بگۆڕدرێن، سەرپۆشی ناوەڕۆکن بۆ پیشاندانی لیستەکانی بەستەرەکان و زۆر شتی تر. ئەوان بە پێوەکراوەکەی جاڤاسکڕێپتی Bootstrap کە لەگەڵیدا هاتووە کارلێککارانە دەکرێن. ئەوان بە کلیککردن دەگۆڕدرێن نەک بە هۆڤەرکردن؛ ئەمە بڕیارێکی دیزاینی بە مەبەستە .

درۆپداونەکان لەسەر کتێبخانەی لایەنی سێیەم دروستکراون، Popper , کە شوێنی داینامیکی و دیاریکردنی دەرچەی بینین دابین دەکات. دڵنیابە پێش جاڤاسکڕێپتی Bootstrap popper.min.js دابنێ یان bootstrap.bundle.min.js/ بەکاربهێنە bootstrap.bundle.jsکە Popper لەخۆدەگرێت. پۆپەر بەکارناهێنرێت بۆ جێگیرکردنی دابەزینەکان لە navbars هەرچەندە وەک جێگیرکردنی داینامیکی پێویست نییە.

دەستڕاگەیشتن

ستانداردی WAI ARIArole="menu" ویجتێکی ڕاستەقینە پێناسە دەکات ، بەڵام ئەمە تایبەتە بە مینیوەکانی هاوشێوەی بەرنامە کە کردارەکان یان ئەرکەکان دەستپێدەکات. مینیوەکانی ARIA تەنها دەتوانن بابەتی مینیو، بابەتی مینیوی سندوقی هەڵبژاردن، بابەتی مینیوی دوگمەی ڕادیۆیی، گروپەکانی دوگمەی ڕادیۆیی و مینیوی لاوەکی لەخۆ بگرن.

لە بەرامبەردا، درۆپداونەکانی بووتستراپ بە شێوەیەک داڕێژراون کە گشتی بن و بۆ چەندین بارودۆخ و پێکهاتەی مارکاپ بەکاربهێنرێن. بۆ نموونە دەتوانرێت درۆپداونەکان دروست بکرێت کە زانیارییەکانی ناوەوە و کۆنترۆڵی فۆڕمی زیادە لەخۆ بگرن، وەک بواری گەڕان یان فۆڕمی چوونەژوورەوە. هەر لەبەر ئەم هۆکارە، Bootstrap چاوەڕوانی هیچ کام لە تایبەتمەندییە roleو aria-پێویستەکان بۆ مینیوەکانی ARIA ڕاستەقینە ناکات (نە بە شێوەیەکی ئۆتۆماتیکی زیاد دەکات). نووسەران دەبێت خۆیان ئەم سیفەتە تایبەتترانە لەخۆ بگرن.

بەڵام Bootstrap پشتگیرییەکی ناوەکی بۆ زۆربەی کارلێکەکانی مینیوی کیبۆرد ستاندارد زیاد دەکات، وەک توانای جووڵەکردن بەناو تاکە .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

ڕێنماییەکان لە کاتی بەکارهێنانی Bootstrap لە RTL ئاوێنە دەبن، واتە .dropstartلە لای ڕاست دەردەکەوێت.

ناوەندی

مینیوی دابەزینەکە بکە بە ناوەندی لە خوارەوەی toggle with .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>

درۆپ ئاپ سەنتەری

مینیوی دابەزینەکە لە ناوەڕاستی سەرەوەی toggle لەگەڵ .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-endبۆ a .dropdown-menuبۆ ڕاست ڕێکخستنی مینیوی دابەزین. ڕێنماییەکان ئاوێنە دەکرێن لەکاتی بەکارهێنانی Bootstrap لە RTL، واتە .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"تایبەتمەندییەک زیاد بکەیت بۆ دوگمەکانی دابەزین لە navbarsدا، بەو پێیەی Popper لە navbars بەکارناهێنرێت.

هەڵبژاردەکانی ڕێکخستن

بە وەرگرتنی زۆربەی ئەو بژاردانەی کە لە سەرەوە نیشان دراون، لێرەدا دیمۆیەکی بچووکی سینکی چێشتخانە لە بژاردەی جۆراوجۆری ڕێکخستنی دابەزین لە یەک شوێن.

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>

CSS

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS پەرەسەندووەکانی Bootstrap، ئێستا دابەزینەکان گۆڕاوە ناوخۆییەکانی 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;

گۆڕاوەکان بۆ carets لەسەر بنەمای 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;
    }
  }
}

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە، پێوەکراوەکە ناوەڕۆکی شاراوە (مینیوەکانی دابەزین) دەگۆڕێت بە گۆڕینی .showپۆلەکە لەسەر باوک .dropdown-menu. تایبەتمەندییەکە data-bs-toggle="dropdown"پشتی پێدەبەسترێت بۆ داخستنی مینیوەکانی دابەزین لە ئاستی بەرنامەیەکدا، بۆیە بیرۆکەیەکی باشە هەمیشە بەکاری بهێنیت.

لەسەر ئامێرە چالاککراوەکانی دەست لێدان، کردنەوەی درۆپداونێک mouseoverمامەڵەکاری بەتاڵ زیاد دەکات بۆ منداڵە دەستبەجێیەکانی <body>توخمەکە. ئەم هاکە ناشرینە پێویستە بۆ کارکردن لە دەوری quirk لە iOS' event delegation , کە ئەگەرنا ڕێگری دەکات لە لێدانێک لە هەر شوێنێک لە دەرەوەی دابەزینەکە لە دەستپێکردنی کۆدەکە کە دابەزینەکە دادەخات. کاتێک کە درۆپداونەکە دادەخرێت، ئەم 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"هێشتا پێویستە

بەبێ گوێدانە ئەوەی کە ئایا لە ڕێگەی جاڤاسکڕێپتەوە بانگی دابەزینەکەت دەکەیت یان لەبری ئەوە data-api بەکاردەهێنیت، data-bs-toggle="dropdown"هەمیشە پێویستە لەسەر توخمە دەستپێکەری دابەزینەکە ئامادە بیت.

بژاردەکان

بەو پێیەی دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت، دەتوانیت ناوی هەڵبژاردنێک زیاد بکەیت بۆ data-bs-, وەک لە data-bs-animation="{value}". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە “ camelCase ” بۆ “ kebab-case ” لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە 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 boolean، ڕستە true هەڵسوکەوتی داخستنی ئۆتۆماتیکی درۆپداونەکە ڕێکبخە:
  • true- بە کرتەکردن لە دەرەوە یان ناوەوەی مینیوی دابەزینەکە دادەخرێت.
  • false- درۆپداونەکە بە کرتەکردن لەسەر دوگمەی toggle و بە دەستی بانگکردن hideیان toggleشێوازەکە دادەخرێت. esc(هەروەها بە فشاردان لەسەر کلیل داناخرێت )
  • 'inside'- دابەزینەکە دادەخرێت (تەنها) بە کرتەکردن لەناو مینیوی دابەزینەکەدا.
  • 'outside'- دابەزینەکە دادەخرێت (تەنها) بە کرتەکردن لە دەرەوەی مینیوی دابەزینەکە.
تێبینی: دەتوانرێت هەمیشە بە ESCکلیلەکە دابخرێت.
boundary ڕستە، توخم 'clippingParents' سنووری سنووردارکردنی Overflow ی مینیوی دابەزین (تەنها بۆ دەستکاریکەری preventOverflow ی Popper دەگونجێت). بە شێوازی پێشوەختە clippingParentsئاماژەی HTMLElement یە و دەتوانێت قبوڵ بکات (تەنها لە ڕێگەی جاڤاسکڕێپتەوە). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی detectOverflow ی Popper بکە .
display ڕستە 'dynamic' بە شێوازی پێشوەختە، ئێمە Popper بەکاردەهێنین بۆ جێگیرکردنی داینامیکی. ئەمە لەکاربخە بە static.
offset ڕیزبەندی، ڕستە، فەنکشن [0, 2] ئۆفسێتی دابەزینەکە بە بەراورد بە ئامانجەکەی. دەتوانیت ڕستەیەک لە تایبەتمەندییەکانی داتادا بە بەها جیاکراوەکانی کۆما وەک: data-bs-offset="10,20". کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی ئۆفسێتەکە، بە ئۆبجێکتیک بانگ دەکرێت کە شوێنی پۆپەر و ئاماژە و پۆپەر rects وەک یەکەم ئارگومێنتی تێدایە. گرێی DOM ی توخمە دەستپێکەر وەک ئارگومێنتی دووەم دەگوازرێتەوە. فەنکشنەکە دەبێت ڕیزبەندییەک بگەڕێنێتەوە بە دوو ژمارەی: skidding , distance . بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی پۆپەر بکە .
popperConfig null، ئۆبجێکتی، فەنکشن null بۆ گۆڕینی ڕێکخستنی پێشوەختەی Popper ی Bootstrap، سەیری ڕێکخستنی Popper بکە . کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دروستکردنی ڕێکخستنی 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 درۆپداونی توخمێک لەناو دەبات. (زانیاری هەڵگیراو لەسەر توخمەکەی DOM لا دەبات)
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 کاتێک کە درۆپداونەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر و گواستنەوەکانی CSS تەواو بوون، ئاگر دەکرێتەوە.
show.bs.dropdown یەکسەر ئاگر دەکاتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
shown.bs.dropdown کاتێک کە درۆپداونەکە بۆ بەکارهێنەر دیار بووە و گواستنەوەکانی CSS تەواو بوون، تەقێنراوە. 
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})