دابەزینەکان

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

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

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

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

ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بەutil.js .

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

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

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

بەڵام Bootstrap پشتگیرییەکی ناوەکی بۆ زۆربەی کارلێکەکانی مینیوی کیبۆرد ستاندارد زیاد دەکات، وەک توانای جووڵەکردن بەناو تاکە .dropdown-itemتوخمەکاندا بە بەکارهێنانی کلیلەکانی ئاماژەدەر و داخستنی مینیوەکە بە ESCکلیلەکە.

نموونە

گۆڕینی دابەزینەکە (دوگمە یان بەستەرەکەت) و مینیوی دابەزینەکە لەناو .dropdown, یان توخمێکی تر کە ڕایدەگەیەنێت، بپێچە position: relative;. دەتوانرێت دابەزاندنەکان لە <a>یان <button>توخمەکانەوە دەستپێبکرێت بۆ ئەوەی باشتر لەگەڵ پێداویستییە ئەگەرییەکانتدا بگونجێت.

تاکە دوگمە

هەر تاکە گۆرانییەک .btnدەتوانرێت بکرێتە وەرچەرخانێکی دابەزین بە هەندێک گۆڕانکاری مارکاپ. <button>لێرەدا چۆن دەتوانیت بە هەریەکێک لە توخمەکان بیانخەیتە کار :

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

وە لەگەڵ <a>توخمەکان:

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

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

باشترین بەش ئەوەیە کە دەتوانیت ئەمە بکەیت بە هەر جۆرێکی دوگمە، هەروەها:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

دوگمەی دابەشکردن

بە هەمان شێوە، درووستکردنی دوگمەی دابەشکراو دروست بکە بە هەمان نیشانە وەک دابەزینی تاکە دوگمە، بەڵام لەگەڵ زیادکردنی .dropdown-toggle-splitبۆ دوورییەکی دروست لە دەوری کارێتی دابەزین.

ئێمە ئەم پۆلە زیادەیە بەکاردەهێنین بۆ کەمکردنەوەی ئاسۆیی paddingلە هەردوو لای کارێتەکە بە ڕێژەی 25% و لابردنی margin-leftکە زیادکراوە بۆ دابەزینی دوگمەی ئاسایی. ئەو گۆڕانکارییە زیادانە کارێتەکە لە دوگمەی دابەشکردنەکەدا لە ناوەڕاستدا دەهێڵنەوە و ناوچەیەکی لێدان بە قەبارەیەکی گونجاوتر لە تەنیشت دوگمەی سەرەکیدا دابین دەکەن.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

قەبارەدانان

درۆپداونەکانی دوگمە لەگەڵ دوگمەکانی هەموو قەبارەکان کاردەکەن، لەوانەش دوگمەکانی پێشوەختە و سپلیت.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

ئاراستەکان

درۆپ ئاپ

مینیوەکانی سەرەوەی توخمەکان بە زیادکردنی .dropupبۆ توخمە باوکەکە دەستپێبکە.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

درۆپڕایت

مینیوەکانی دابەزین لە لای ڕاستی توخمەکان بە زیادکردن .droprightبۆ توخمە باوکەکە دەستپێبکە.

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

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

درۆپلێفت

مینیوەکانی دابەزین لە لای چەپی توخمەکان بە زیادکردن .dropleftبۆ توخمە باوکەکە دەستپێبکە.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

لە ڕووی مێژووییەوە ناوەڕۆکی مینیوی دابەزین دەبوو بەستەر بن، بەڵام چیتر ئەوە لە v4دا نییە. ئێستا دەتوانیت بە ئیختیاری <button>توخمەکان لە درۆپداونەکانتدا بەکاربهێنیت لەبری تەنها <a>s.

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

هەروەها دەتوانیت بە .dropdown-item-text. ئازادانە زیاتر ستایل بکە بە سوودمەندی CSS یان دەقی تایبەتمەند.

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

چالاک

زیاد بکە .activeبۆ شتەکان لە درۆپ داونەکەدا بۆ ئەوەی وەک چالاک ستایلیان بکەیت .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

کەم ئەندام

زیاد بکە .disabledبۆ شتەکان لە درۆپ داونەکەدا بۆ ئەوەی وەک لەکارخراو ستایلیان بکەیت .

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

بە شێوازی پێشوەختە، مینیویەکی دابەزین بە شێوەیەکی ئۆتۆماتیکی لە سەرەوە و بە درێژایی لای چەپی دایک و باوکەکەی 100% دادەنرێت. زیادکردن .dropdown-menu-rightبۆ a .dropdown-menuبۆ ڕاست ڕێکخستنی مینیوی دابەزین.

سەرەکان بەرز دەکەنەوە! درۆپداونەکان بەهۆی Popper.js ەوە جێگیر دەکرێن (جگە لەو کاتانەی کە لە ناو بارێکدا هەن).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

ڕێکخستنی وەڵامدەرەوە

ئەگەر دەتەوێت ڕێکخستنی وەڵامدەرەوە بەکاربهێنیت، شوێنی داینامیکی لەکاربخە بە زیادکردنی data-display="static"تایبەتمەندییەکە و پۆلەکانی گۆڕانی وەڵامدەرەوە بەکاربهێنە.

بۆ ڕێکخستنی مینیوی دابەزینەکە بە ڕاست.dropdown-menu{-sm|-md|-lg|-xl}-right لەگەڵ خاڵی شکاندنی پێدراو یان گەورەتر، زیاد بکە .

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

بۆ ڕێکخستنی مینیوی چەپ.dropdown-menu-right لەگەڵ خاڵی شکاندنی پێدراو یان گەورەتر، زیاد بکە و .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

تێبینی بکە کە پێویست ناکات data-display="static"تایبەتمەندییەک زیاد بکەیت بۆ دوگمەکانی دابەزین لە navbars، بەو پێیەی Popper.js لە navbars بەکارناهێنرێت.

سەردێڕەکان

سەردێڕێک زیاد بکە بۆ ناونانی بەشەکانی کردارەکان لە هەر مینیویەکی دابەزین.

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

دابەشکەرەکان

گروپەکانی بابەتە پەیوەندیدارەکانی مینیو بە دابەشکەرێک جیا بکەرەوە.

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

دەق

هەر دەقێکی فۆڕمی ئازاد لەناو مینیویەکی دابەزین لەگەڵ دەق دابنێ و سوودمەندییەکانی دووری بەکاربهێنە . تێبینی بکە کە بە ئەگەرێکی زۆرەوە پێویستت بە شێوازی قەبارەدانانی زیادە دەبێت بۆ سنووردارکردنی پانایی مینیوەکە.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

فۆڕمەکان

فۆڕمێک لەناو مینیویەکی دابەزین دابنێ، یان بیکە بە مینیوی دابەزین، و سوودمەندییەکانی پەراوێز یان پادکردن بەکاربهێنە بۆ ئەوەی ئەو شوێنە نەرێنییەی پێ بدەیت کە پێویستتە.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

data-offsetیان بەکاربهێنە data-referenceبۆ گۆڕینی شوێنی دابەزینەکە.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

بەکارهێنان

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

On touch-enabled devices, opening a dropdown adds empty ($.noop) mouseover handlers to the immediate children of the <body> element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover handlers are removed.

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

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

Via JavaScript

Call the dropdowns via JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"` still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown’s trigger element.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name	Type	Default	Description
offset	number \| string \| function	0	Offset of the dropdown relative to its target. When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument. For more information refer to Popper.js's offset docs.
flip	boolean	true	Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.
boundary	string \| element	'scrollParent'	Overflow constraint boundary of the dropdown menu. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
reference	string \| element	'toggle'	Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
display	string	'dynamic'	By default, we use Popper.js for dynamic positioning. Disable this with `static`.

Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.

Methods

Method	Description
`$().dropdown('toggle')`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('show')`	Shows the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('hide')`	Hides the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('update')`	Updates the position of an element’s dropdown.
`$().dropdown('dispose')`	Destroys an element’s dropdown.

Events

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original event type is click) that contains an Event Object for the click event.

Event	Description
`show.bs.dropdown`	This event fires immediately when the show instance method is called.
`shown.bs.dropdown`	This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
`hide.bs.dropdown`	ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک شێوازی hide instance بانگ کراوە.
`hidden.bs.dropdown`	ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە درۆپداونەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێی گواستنەوەکانی CSS دەکات، بۆ تەواوبوون).

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