دابەزینەکان

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

لەسەر ئامێرە چالاککراوەکانی دەست لێدان، کردنەوەی دابەزینێک مامەڵەکاری بەتاڵ ( $.noop) زیاد دەکات mouseoverبۆ منداڵە دەستبەجێیەکانی <body>توخمەکە. ئەم هاکە ناشرینە پێویستە بۆ کارکردن لە دەوری quirk لە iOS' event delegation , کە ئەگەرنا ڕێگری دەکات لە لێدانێک لە هەر شوێنێک لە دەرەوەی دابەزینەکە لە دەستپێکردنی کۆدەکە کە دابەزینەکە دادەخات. کاتێک کە درۆپداونەکە دادەخرێت، ئەم mouseoverمامەڵەکارە بەتاڵانەی زیادە لا دەبرێن.

لە ڕێگەی تایبەتمەندییەکانی داتا

زیادکردن data-toggle="dropdown"بۆ بەستەرێک یان دوگمەیەک بۆ گۆڕینی دابەزینێک.

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

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە درۆپداونەکانەوە بکە:

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

`data-toggle="dropdown"`هێشتا پێویستە

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-offset="".

ناو	جۆر	بنەڕەتی	وەسف
ئۆفسێت	ژمارە \| ڕستە \| کردار	0. 0	ئۆفسێتی دابەزینەکە بە بەراورد بە ئامانجەکەی. کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی ئۆفسێتەکە، بە ئۆبجێکتیک کە داتاکانی ئۆفسێتەکەی تێدایە وەک یەکەم ئارگومێنتەکەی بانگ دەکرێت. فەنکشنەکە دەبێت ئۆبجێکتیک بگەڕێنێتەوە کە هەمان پێکهاتەی هەبێت. گرێی DOM ی توخمە دەستپێکەر وەک ئارگومێنتی دووەم دەگوازرێتەوە. بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی Popper.js بکە .
وەرگەڕاندن	boolean	ڕاست	ڕێگە بدە Dropdown بگۆڕێت لە ئەگەری سەریەککەوتن لەسەر توخمە ئاماژەکە. بۆ زانیاری زیاتر سەردانی Flip docs ی Popper.js بکە .
سنوور	ڕستە \| پێکهاتە	'scrollParent'	سنووری سنووردارکردنی ڕژانی مینیوی دابەزین. بەهاکانی `'viewport'`, `'window'`, `'scrollParent'`, یان ئاماژەیەکی HTMLElement قبوڵ دەکات (تەنها جاڤاسکڕێپت). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی preventOverflow ی Popper.js بکە .
سەرچاوە	ڕستە \| پێکهاتە	'تۆگڵ'	توخمە ئاماژەییەکەی مینیوی دابەزین. بەهاکانی `'toggle'`, `'parent'`, یان ئاماژەیەکی HTMLElement قبوڵ دەکات. بۆ زانیاری زیاتر سەردانی referenceObject docs ی Popper.js بکە .
پیشاندان	ڕستە	'داینامیک'	بە شێوەیەكی بنەڕەتی، ئێمە Popper.js بەکاردەهێنین بۆ جێگیرکردنی داینامیکی. ئەمە لەکاربخە بە `static`.
popperConfig	پووچ \| شت	هیچ	بۆ گۆڕینی ڕێکخستنی پێشوەختەی Popper.js ی Bootstrap، سەیری ڕێکخستنی Popper.js بکە

تێبینی کاتێک boundaryلەسەر هەر بەهایەک دانراوە جگە لە 'scrollParent', ستایلەکە position: staticبۆ .dropdownکۆنتێنەرەکە جێبەجێ دەکرێت.

شێوازەکان

ڕێگا	وەسف
`$().dropdown('toggle')`	مینیوی دابەزینی ناوبارێکی دیاریکراو یان گەشتێکی تابکراو دەگۆڕێت.
`$().dropdown('show')`	مینیوی دابەزینی ناوبارێکی دیاریکراو یان گەشتێکی تابکراو پیشان دەدات.
`$().dropdown('hide')`	مینیوی دابەزینی ناوبارێکی دیاریکراو یان گەشتێکی تابکراو دەشارێتەوە.
`$().dropdown('update')`	شوێنی دابەزینی توخمێک نوێ دەکاتەوە.
`$().dropdown('dispose')`	درۆپداونی توخمێک لەناو دەبات.

ڕووداوەکان

هەموو ڕووداوەکانی دابەزین لە .dropdown-menuتوخمە باوکەکەی 's تەقە دەکرێن و relatedTargetتایبەتمەندییەکیان هەیە، کە بەهاکەی توخمە ئەنکرەکەی دەگۆڕێت. hide.bs.dropdownو hidden.bs.dropdownڕووداوەکان clickEventتایبەتمەندییەکیان هەیە (تەنها کاتێک جۆری ڕووداوی ڕەسەن click) کە Event Object بۆ ڕووداوی کلیک لەخۆدەگرێت.

پێشهات	وەسف
`show.bs.dropdown`	ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک شێوازی show instance بانگ دەکرێت.
`shown.bs.dropdown`	ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە دابەزینەکە بۆ بەکارهێنەر دیار بێت (چاوەڕێی گواستنەوەکانی CSS دەکات، بۆ تەواوبوون).
`hide.bs.dropdown`	ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک شێوازی hide instance بانگ کراوە.
`hidden.bs.dropdown`	ئەم ڕووداوە کاتێک تەقە دەکرێت کە دابەزینەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕوانی گواستنەوەکانی CSS دەکات، بۆ تەواوبوون).

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