ښکته کول
د بوټسټریپ ډراپ ډاون پلگ ان سره د لینکونو لیستونو او نور ډیر څه ښودلو لپاره متناسب پوښښ بدل کړئ.
کتنه
ډراپ ډاونونه د بدلون وړ دي ، د لینکونو لیستونو ښودلو لپاره متناسب پوښښ او نور ډیر څه. دوی د شامل شوي بوټسټریپ ډراپ ډاون جاواسکریپټ پلگ ان سره متقابل شوي دي. دوی په کلیک کولو سره بدلیږي، نه د هوور کولو له لارې؛ دا یو قصدي ډیزاین پریکړه ده.
ډراپ ډاونونه د دریمې ډلې په کتابتون کې جوړ شوي، پاپپر ، کوم چې متحرک موقعیت او د لید پورټ کشف چمتو کوي. ډاډ ترلاسه کړئ چې د بوټسټریپ جاوا سکریپټ دمخه 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] |
د خپل هدف په پرتله د ښکته کیدو آفسیټ. تاسو کولی شئ د کوما جلا شوي ارزښتونو سره د ډیټا ځانګړتیاو کې تار تیر کړئ لکه: کله چې یو فنکشن د آفسیټ ټاکلو لپاره کارول کیږي، دا د هغه څیز سره ویل کیږي چې د پاپر ځای پرځای کول، حواله، او پاپر د لومړي دلیل په توګه بیاکتنه کوي. د محرک عنصر DOM نوډ د دوهم دلیل په توګه تیریږي. فنکشن باید د دوه شمیرو سره یو صف بیرته راولي: . د لا زیاتو معلوماتو لپاره د Popper's offset docs ته مراجعه وکړئ . |
autoClose |
بولین | تار | true |
د ډراپ ډاون اتومات بند چلند تنظیم کړئ:
|
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...
})