اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
in English

ښکته کول

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

کتنه

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

ډراپ ډاونونه د دریمې ډلې په کتابتون کې جوړ شوي، پاپپر ، کوم چې متحرک موقعیت او د لید پورټ کشف چمتو کوي. ډاډ ترلاسه کړئ چې د بوټسټریپ جاوا سکریپټ دمخه 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>عناصرو سره کار کولو ته اړ کړئ:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>عناصرو سره:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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. د ښکته کولو توکو کې هیڅ بدلون ته اړتیا نشته.

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

او په نوبار کې د کارولو لپاره یې ایښودل:

<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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به په ښي خوا کې ښکاره شي.

ډراپ اپ

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

ډراپرایټ

.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">
    Dropright
  </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 Dropright</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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

تاسو کولی شئ <a>یا <button>عناصر د غورځولو توکو په توګه وکاروئ.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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 یا متن اسانتیاوو سره نور سټایل کولو لپاره وړیا احساس وکړئ.

<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په یوه سیټ کې د اوسني توکي لپاره.

<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ترڅو دوی د معلول په توګه سټایل کړئ .

<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به په ښي خوا کې ښکاره شي.

پورته شه! ډراپ ډاونونه د پوپر څخه مننه موقعیت لري پرته لدې چې دوی په نیوبار کې موجود وي.
<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 .

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

<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"په نیوبارونو کې د ډراپ ډاون بټونو لپاره ځانګړتیا اضافه کړئ ، ځکه چې پوپر په نیوبارونو کې نه کارول کیږي.

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

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

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

سرلیکونه

په هر ډراپ ډاون مینو کې د عملونو برخو لیبل کولو لپاره سرلیک اضافه کړئ.

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

ویشونکي

د ویشونکي سره د اړوندو مینو توکو جلا ګروپونه.

<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 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="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>
<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>

data-bs-offsetد ډراپ ډاون ځای بدلولو یا بدلولو لپاره وکاروئ data-bs-reference.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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اختیار وکاروئ چې د ډراپ ډاون دا چلند بدل کړئ.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

ساس

متغیرات

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

$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:             rgba($black, .15);
$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:           $dropdown-padding-y $dropdown-item-padding-x;

د تیاره ډراپ ډاؤن لپاره تغیرات :

$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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

د جاواسکریپټ له لارې ډراپ ډاون ته زنګ ووهئ:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"لا هم اړتیا ده

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-bs-، لکه څنګه چې په کې data-bs-offset="". ډاډ ترلاسه کړئ چې د اختیار نوم د قضیې ډول د CamelCase څخه کباب-کیس ته بدل کړئ کله چې اختیارونه د ډیټا ځانګړتیاو له لارې تیریږي. د مثال په توګه، د کارولو پرځای data-bs-autoClose="false"، وکاروئ data-bs-auto-close="false".

نوم ډول ډیفالټ تفصیل
boundary تار | عنصر 'clippingParents' د ډراپ ډاون مینو د اوور فلو محدودیت حد (یوازې د پوپر د مخنیوي اوور فلو ترمیم کونکي باندې پلي کیږي). په ډیفالټ دا دی 'clippingParents'او کولی شي د HTMLElement حواله ومني (یوازې د جاواسکریپټ له لارې). د نورو معلوماتو لپاره د Popper's detectOverflow اسنادو ته مراجعه وکړئ .
reference تار | عنصر | اعتراض 'toggle' د ډراپ ډاون مینو حواله عنصر. 'toggle'د , 'parent', د HTMLElement حواله یا یو شی چې چمتو کوي ارزښتونه مني getBoundingClientRect. د لا زیاتو معلوماتو لپاره د پاپر جوړونکي اسناد او مجازی عنصر اسنادو ته مراجعه وکړئ .
display تار 'dynamic' د ډیفالټ په واسطه، موږ د متحرک موقعیت لپاره پوپر کاروو. دا سره غیر فعال کړئ static.
offset صف | تار | فعالیت [0, 2]

د خپل هدف په پرتله د ښکته کیدو آفسیټ. تاسو کولی شئ د کوما جلا شوي ارزښتونو سره د ډیټا ځانګړتیاو کې تار تیر کړئ لکه:data-bs-offset="10,20"

کله چې یو فنکشن د آفسیټ ټاکلو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د پاپر ځای پرځای کول، حواله، او پاپر د لومړي دلیل په توګه بیاکتنه کوي. د محرک عنصر DOM نوډ د دوهم دلیل په توګه تیریږي. فنکشن باید د دوه شمیرو سره یو صف بیرته راولي: .[skidding, distance]

د لا زیاتو معلوماتو لپاره د Popper's offset docs ته مراجعه وکړئ .

autoClose بولین | تار true

د ډراپ ډاون اتومات بند چلند تنظیم کړئ:

  • true- ډراپ ډاون به د ډراپ ډاون مینو څخه بهر یا دننه کلیک کولو سره وتړل شي.
  • false- ډراپ ډاون به د ټګل تڼۍ په کلیک کولو او په لاسي ډول زنګ وهلو hideیا toggleمیتود سره وتړل شي. (همدارنګه به د کیلي په فشارولو سره بند نشي esc)
  • 'inside'- ډراپ ډاون به وتړل شي (یوازې) د ډراپ ډاون مینو کې دننه کلیک کولو سره.
  • 'outside'- ډراپ ډاون به وتړل شي (یوازې) د ډراپ ډاون مینو څخه بهر په کلیک کولو سره.
popperConfig null | څيز | فعالیت null

د بوټسټریپ ډیفالټ پوپر ترتیب بدلولو لپاره ، د پوپر ترتیب وګورئ .

کله چې یو فنکشن د پوپر ترتیب رامینځته کولو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د بوټسټریپ ډیفالټ پاپر ترتیب لري. دا تاسو سره مرسته کوي چې ستاسو د خپل ترتیب سره ډیفالټ وکاروئ او یوځای کړئ. فنکشن باید د پوپر لپاره د ترتیب کولو څیز بیرته راولي.

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

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

میتودونه

طریقه تفصیل
toggle د ورکړل شوي نیوبار یا ټب شوي نیویګیشن د ډراپ ډاون مینو بدلوي.
show د ورکړل شوي نیوبار یا ټب شوي نیویګیشن ډراپ ډاون مینو ښیې.
hide د ورکړل شوي نیوبار یا ټب شوي نیویګیشن ډراپ ډاون مینو پټوي.
update د عنصر د ښکته کیدو موقعیت تازه کوي.
dispose د یو عنصر ډراپ ډاؤن ویجاړوي. (د DOM عنصر کې زیرمه شوي معلومات لرې کوي)
getInstance جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر پورې اړوند د ډراپ ډاؤن مثال ترلاسه کړئ ، تاسو کولی شئ دا د دې په څیر وکاروئ:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance جامد میتود چې د DOM عنصر پورې اړوند د ډراپ ډاؤن مثال بیرته راګرځوي یا یو نوی رامینځته کړي که چیرې دا پیل نه وي. تاسو کولی شئ دا په لاندې ډول وکاروئ:bootstrap.Dropdown.getOrCreateInstance(element)

پیښې

ټولې ډراپ ډاؤن پیښې په توګلینګ عنصر کې ډزې کیږي او بیا بلبل کیږي. نو تاسو کولی شئ په .dropdown-menuاصلي عنصر کې د پیښې اوریدونکي هم اضافه کړئ. hide.bs.dropdownاو hidden.bs.dropdownپیښې یو clickEventملکیت لري (یوازې کله چې د اصلي پیښې ډول وي click) چې د کلیک پیښې لپاره د پیښې توکي لري.

طریقه تفصیل
show.bs.dropdown سمدلاسه اور اچوي کله چې د ښودلو مثال میتود ویل کیږي.
shown.bs.dropdown ډراپ شوی کله چې ډراپ ډاون کارونکي ته ښکاره شوی وي او د CSS لیږد بشپړ شوی وي.
hide.bs.dropdown سمدلاسه اور اچوي کله چې د پټولو مثال میتود بلل شوی وي.
hidden.bs.dropdown ډزې شوې کله چې ډراپ ډاون د کارونکي څخه پټ پاتې شو او د CSS لیږد بشپړ شو.
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})