ښکته کول

د بوټسټریپ ډراپ ډاون پلگ ان سره د لینکونو لیست او نور ډیر څه ښودلو لپاره متناسب پوښښ ټګول کړئ.

په دې پاڼه کې

کتنه

ډراپ ډاونونه د بدلون وړ دي ، د لینکونو لیستونو ښودلو لپاره متناسب پوښښ او نور ډیر څه. دوی د شامل شوي بوټسټریپ ډراپ ډاون جاواسکریپټ پلگ ان سره متقابل شوي دي. دوی په کلیک کولو سره بدلیږي، نه د هوور کولو له لارې؛ دا یو قصدي ډیزاین پریکړه ده.

ډراپ ډاونونه د دریمې ډلې په کتابتون کې جوړ شوي، پاپپر ، کوم چې متحرک موقعیت او د لید پورټ کشف چمتو کوي. ډاډ ترلاسه کړئ چې د بوټسټریپ جاوا سکریپټ دمخه popper.min.jsbootstrap.bundle.min.js شامل کړئ یا / bootstrap.bundle.jsکوم چې پوپر لري. پوپر په نیوبارونو کې د ډراپ ډاونونو موقعیت لپاره نه کارول کیږي پداسې حال کې چې متحرک موقعیت ته اړتیا نلري.

لاسرسی

د WAI ARIA معیار یو ریښتینی role="menu"ویجټ تعریفوي ، مګر دا د غوښتنلیک په څیر مینو ته ځانګړی دی کوم چې کړنې یا افعال محرک کوي. د ARIA مینو کې یوازې د مینو توکي، د چک بکس مینو توکي، د راډیو تڼۍ مینو توکي، د راډیو بټن ګروپونه، او فرعي مینو شامل دي.

له بلې خوا د بوټسټریپ ډراپ ډاونونه د دې لپاره ډیزاین شوي چې عمومي وي او په مختلف حالتونو او مارک اپ جوړښتونو کې پلي کیږي. د مثال په توګه، دا ممکنه ده چې ډراپ ډاونونه رامینځته کړئ چې اضافي داخلې او فارم کنټرولونه ولري، لکه د لټون ساحې یا د ننوتلو فورمې. د دې دلیل لپاره، بوټسټریپ د ریښتیني ARIA مینو لپاره د اړتیا roleوړ ځانګړتیاو څخه (نه په اتوماتيک ډول اضافه کول) تمه نه کوي . لیکوالان باید دا نور ځانګړي ځانګړتیاوې پخپله پکې شامل کړي.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 کې بوټسټریپ کاروئ، معنی .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-endاضافه کړئ . .dropdown-menuلارښوونې منعکس کیږي کله چې په 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"په نیوبارونو کې د ډراپ ډاون بټونو لپاره ځانګړتیا اضافه کړئ ، ځکه چې پوپر په نیوبارونو کې نه کارول کیږي.

د سمون انتخابونه

د پورته ښودل شوي ډیری اختیارونو په پام کې نیولو سره ، دلته په یو ځای کې د مختلف ډراپ ډاون سینګ اختیارونو کوچني پخلنځي سنک ډیمو دی.

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 متغیر تګلارې د یوې برخې په توګه ، ډراپ ډاون اوس ځایی 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};

د Sass متغیرات

د ټولو ښکته کیدو لپاره تغیرات:

$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;

مکسین

مکسین د 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>دا منل شوی بد هیک اړین دی چې د iOS د پیښې پلاوي کې د نرۍ په شاوخوا کې کار وکړي ، کوم چې په بل ډول به د ډراپ ډاون څخه بهر هرچیرې د نل د کوډ له رامینځته کولو څخه مخنیوی وکړي چې ډراپ ډاون بندوي. یوځل چې ډراپ ډاون وتړل شي ، دا اضافي خالي 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"`لاهم اړتیا ده

پرته لدې چې تاسو د جاواسکریپټ له لارې خپل ډراپ ډاون ته زنګ ووهئ یا د دې پرځای د ډیټا-Api وکاروئ ، data-bs-toggle="dropdown"تل اړین دي چې د ډراپ ډاون محرک عنصر کې شتون ولري.

اختیارونه

لکه څنګه چې اختیارونه د ډیټا ځانګړتیاو یا جاوا سکریپټ له لارې لیږدول کیدی شي، تاسو کولی شئ د اختیار نوم په کې ضمیمه کړئ data-bs-، لکه څنګه چې په کې data-bs-animation="{value}". ډاډ ترلاسه کړئ چې د اختیار نوم د قضیې ډول د " camelCase " څخه " کباب-کیس " ته بدل کړئ کله چې د ډیټا ځانګړتیاو له لارې اختیارونه تیریږي. د مثال په توګه، د data-bs-custom-class="beautifier"ځای پرځای وکاروئ data-bs-customClass="beautifier".

د بوټسټریپ 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 حواله ومني (یوازې د جاواسکریپټ له لارې). د نورو معلوماتو لپاره د Popper's detectOverflow اسنادو ته مراجعه وکړئ .
`display`	تار	`'dynamic'`	د ډیفالټ په واسطه، موږ د متحرک موقعیت لپاره پوپر کاروو. دا سره غیر فعال کړئ `static`.
`offset`	صف، تار، فنکشن	`[0, 2]`	د خپل هدف په پرتله د ښکته کیدو آفسیټ. تاسو کولی شئ د کوما جلا شوي ارزښتونو سره د ډیټا ځانګړتیاو کې تار تیر کړئ لکه: `data-bs-offset="10,20"`. کله چې یو فنکشن د آفسیټ ټاکلو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د پاپر ځای پرځای کول، حواله، او پاپر د لومړي دلیل په توګه بیاکتنه کوي. د محرک عنصر DOM نوډ د دوهم دلیل په توګه تیریږي. فنکشن باید د دوه شمیرو سره یو صف بیرته راولي: skidding , दूरी . د لا زیاتو معلوماتو لپاره د Popper's offset docs ته مراجعه وکړئ .
`popperConfig`	null, object, function	`null`	د بوټسټریپ ډیفالټ پوپر ترتیب بدلولو لپاره ، د پوپر ترتیب وګورئ . کله چې یو فنکشن د پوپر ترتیب رامینځته کولو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د بوټسټریپ ډیفالټ پاپر ترتیب لري. دا تاسو سره مرسته کوي چې ستاسو د خپل ترتیب سره ډیفالټ وکاروئ او یوځای کړئ. فنکشن باید د پوپر لپاره د ترتیب کولو څیز بیرته راولي.
`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...
})

ښکته کول

کتنه

لاسرسی

مثالونه

واحد تڼۍ

د ویش تڼۍ

اندازه کول

تیاره ښکته کول

لارښوونې

RTL

مرکز شوی

ډراپ اپ

ډراپ اپ مرکز شوی

ډراپ

ډراپسټارټ

د مینو توکي

فعاله

معلول

د مینو ترتیب

ځواب ویونکی سمون

د سمون انتخابونه

د مینو منځپانګې

سرلیکونه

ویشونکي

متن

فورمې

د اتومات تړلو چلند

سی ایس ایس

متغیرات

د Sass متغیرات

مکسین

کارول

د معلوماتو ځانګړتیاو له لارې

د جاواسکریپټ له لارې

`data-bs-toggle="dropdown"`لاهم اړتیا ده

اختیارونه

سره د فنکشن کارول`popperConfig`

میتودونه

پیښې

ښکته کول

کتنه

لاسرسی

مثالونه

واحد تڼۍ

د ویش تڼۍ

اندازه کول

تیاره ښکته کول

لارښوونې

RTL

مرکز شوی

ډراپ اپ

ډراپ اپ مرکز شوی

ډراپ

ډراپسټارټ

د مینو توکي

فعاله

معلول

د مینو ترتیب

ځواب ویونکی سمون

د سمون انتخابونه

د مینو منځپانګې

سرلیکونه

ډراپ ډاون سرلیک

ویشونکي

متن

فورمې

د ښکته کولو اختیارونه

د اتومات تړلو چلند

سی ایس ایس

متغیرات

د Sass متغیرات

مکسین

کارول

د معلوماتو ځانګړتیاو له لارې

د جاواسکریپټ له لارې

data-bs-toggle="dropdown"لاهم اړتیا ده

اختیارونه

سره د فنکشن کارولpopperConfig

میتودونه

پیښې

`data-bs-toggle="dropdown"`لاهم اړتیا ده

سره د فنکشن کارول`popperConfig`