ښکته کول

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

کتنه

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

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

که تاسو زموږ جاوا سکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js .

لاسرسی

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

له بلې خوا د بوټسټریپ ډراپ ډاونونه د دې لپاره ډیزاین شوي چې عمومي وي او په مختلف حالتونو او مارک اپ جوړښتونو کې پلي کیږي. د مثال په توګه، دا ممکنه ده چې ډراپ ډاونونه رامینځته کړئ چې اضافي داخلې او فارم کنټرولونه ولري، لکه د لټون ساحې یا د ننوتلو فورمې. د دې دلیل لپاره، بوټسټریپ د ریښتیني ARIA مینو لپاره د اړتیا roleوړ ځانګړتیاو څخه (نه په اتوماتيک ډول اضافه کول) تمه نه کوي . لیکوالان باید دا نور ځانګړي ځانګړتیاوې پخپله پکې شامل کړي.aria-

په هرصورت، بوټسټریپ د ډیری معیاري کیبورډ مینو تعاملاتو لپاره جوړ شوی ملاتړ اضافه کوي ، لکه .dropdown-itemد کرسر کیلي په کارولو سره د انفرادي عناصرو له لارې حرکت کولو وړتیا او مینو د ESCکیلي سره وتړئ.

مثالونه

د ډراپ ډاون ټګل (ستاسو تڼۍ یا لینک) او د ډراپ ډاون مینو دننه وتړئ .dropdown، یا بل عنصر چې اعلان کوي position: relative;. ډراپ ډاونونه ستاسو د احتمالي اړتیاو سره د ښه سمون لپاره له عناصرو <a>یا عناصرو څخه رامینځته کیدی شي.<button>

د واحد تڼۍ ښکته کول

هر یو .btnد ځینې مارک اپ بدلونونو سره په ډراپ ډاون ټګل کې بدل کیدی شي. دلته دا دی چې تاسو څنګه کولی شئ دوی د کوم <button>عناصرو سره کار کولو ته اړ کړئ:

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

او د <a>عناصرو سره:

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

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

غوره برخه دا ده چې تاسو دا د هر ډول تڼۍ ډول سره هم کولی شئ:

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

د ویشلو تڼۍ ډراپ ډاون

په ورته ډول، د واحد تڼۍ ډراپ ډاونونو په څیر د ورته مارک اپ سره د سپلیټ بټن ډراپ ډاونونه رامینځته کړئ ، مګر .dropdown-toggle-splitد ډراپ ډاون کیریټ شاوخوا د مناسب واټن لپاره اضافه کولو سره.

موږ د دې اضافي ټولګي څخه کار اخلو ترڅو د غالۍ paddingپه دواړو اړخونو کې افقی 25٪ کم کړو او margin-leftد منظم تڼۍ ډراپ ډاونونو لپاره اضافه شوي لرې کړئ. دا اضافي بدلونونه د سپلایټ تڼۍ کې کیریټ مرکز ساتي او د اصلي تڼۍ تر څنګ د مناسب اندازې هټ ساحه چمتو کوي.

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

اندازه کول

د تڼۍ ډراپ ډاونونه د ټولو اندازو بټونو سره کار کوي، په شمول د ډیفالټ او سپلیټ ډراپ ډاون بټونو.

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

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

د ډراپ اپ توپیر

.dropupد اصلي عنصر په اضافه کولو سره پورته عناصرو ته د ډراپ ډاون مینو محرک کړئ .

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

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

د ډراپرایټ توپیر

.droprightد اصلي عنصر په اضافه کولو سره د عناصرو په ښي خوا کې د ډراپ ډاون مینو محرک کړئ .

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

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

د غورځیدو توپیر

.dropleftد اصلي عنصر په اضافه کولو سره د عناصرو په ښي خوا کې د ډراپ ډاون مینو محرک کړئ .

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

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

په تاریخي ډول د ډراپ ډاون مینو مینځپانګې باید لینکونه وي ، مګر دا نور د v4 سره قضیه نده. اوس تاسو کولی شئ په اختیاري توګه د s <button>پرځای په خپلو ډراپ ډاونونو کې عناصر وکاروئ .<a>

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

په ډیفالټ ډول ، د ډراپ ډاون مینو په اوتومات ډول د پورتنۍ برخې څخه 100٪ او د هغې د مور او پلار کیڼ اړخ ته موقعیت لري. په ښي خوا کې د ډراپ ډاون مینو سره سمون کې .dropdown-menu-rightاضافه کړئ ..dropdown-menu

پورته شه! ډراپ ډاونونه د Popper.js څخه مننه موقعیت لري (پرته له دې چې دوی په نیوبار کې موجود وي).

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

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

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

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

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

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

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

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

په ډراپ ډاون کې توکي اضافه کړئ .activeترڅو دوی د فعال په توګه سټایل کړئ .

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

په ډراپ ډاون کې توکي اضافه کړئ .disabledترڅو دوی د معلول په توګه سټایل کړئ .

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

کارول

د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې، د ډراپ ډاون پلگ ان .showد اصلي لیست توکي کې د ټولګي په بدلولو سره پټ مینځپانګې (ډراپ ډاون مینو) ته بدلون ورکوي. خاصیت د data-toggle="dropdown"غوښتنلیک په کچه د ډراپ ډاون مینو بندولو لپاره تکیه کوي ، نو دا ښه نظر دی چې تل یې وکاروئ.

په ټچ فعال شوي وسیلو کې ، د ډراپ ډاون خلاصول د عنصر سمدستي ماشومانو ته خالي ( $.noop) هینډلرونه اضافه کوي. دا منل شوی بد هیک اړین دی چې د iOS د پیښې پلاوي کې د نرۍ په شاوخوا کې کار وکړي ، کوم چې په بل ډول به د ډراپ ډاون څخه بهر هرچیرې د نل د کوډ له رامینځته کولو څخه مخنیوی وکړي چې ډراپ ډاون بندوي. یوځل چې ډراپ ډاون وتړل شي ، دا اضافي خالي هینډلرونه لرې کیږي.mouseover<body>mouseover

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

data-toggle="dropdown"د ډراپ ډاون بدلولو لپاره لینک یا تڼۍ کې اضافه کړئ .

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

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

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

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

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

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-offset="".

نوم	ډول	ډیفالټ	تفصیل
بندول	شمیره \| تار \| فعالیت	0	د خپل هدف په پرتله د ښکته کیدو آفسیټ. د لا زیاتو معلوماتو لپاره د Popper.js offset docs ته مراجعه وکړئ .
فلپ	بولین	ریښتیا	ډراپ ډاون ته اجازه ورکړئ چې د حوالې عنصر باندې د ډیروالي په صورت کې فلیپ شي. د نورو معلوماتو لپاره د Popper.js فلیپ اسنادو ته مراجعه وکړئ .
سرحد	تار \| عنصر	'سکرول والدین'	د ډراپ ډاون مینو د اوور فلو محدودیت حد. د `'viewport'`, `'window'`, `'scrollParent'`, یا د HTMLElement حواله (یوازې جاواسکریپټ) ارزښتونه مني. د لا زیاتو معلوماتو لپاره Popper.js's preventOverflow docs ته مراجعه وکړئ .

په یاد ولرئ کله چې boundaryد پرته بل کوم ارزښت ته ټاکل کیږي 'scrollParent'، سټایل په کانټینر کې position: staticپلي کیږي ..dropdown

میتودونه

طریقه	تفصیل
`$().dropdown('toggle')`	د ورکړل شوي نوبار یا ټب شوي نیویګیشن د ډراپ ډاون مینو بدلوي.
`$().dropdown('update')`	د عنصر د ښکته کیدو موقعیت تازه کوي.
`$().dropdown('dispose')`	د یو عنصر ډراپ ډاؤن ویجاړوي.

پیښې

ټولې ډراپ ډاؤن پیښې په .dropdown-menuاصلي عنصر کې ویشل شوي او relatedTargetملکیت لري، چې ارزښت یې د ټګلینګ اینکر عنصر دی.

پیښه	تفصیل
`show.bs.dropdown`	دا پیښه سمدلاسه ډزې کوي کله چې د ښودلو مثال میتود ویل کیږي.
`shown.bs.dropdown`	دا پیښه له مینځه وړل کیږي کله چې ډراپ ډاون کارونکي ته ښکاره شي (د بشپړیدو لپاره به د CSS لیږد انتظار وکړي).
`hide.bs.dropdown`	دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د پټولو مثال میتود بلل شوی وي.
`hidden.bs.dropdown`	دا پیښه له مینځه وړل کیږي کله چې ډراپ ډاون د کارونکي څخه پټ شوی وي (د بشپړیدو لپاره به د CSS لیږد ته انتظار وباسي).

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

ښکته کول

کتنه

لاسرسی

مثالونه

د واحد تڼۍ ښکته کول

د ویشلو تڼۍ ډراپ ډاون

اندازه کول

د ډراپ اپ توپیر

د ډراپرایټ توپیر

د غورځیدو توپیر

د مینو توکي

د مینو ترتیب

د مینو سرلیکونه

د مینو ویشونکي

د مینو بڼې

فعال مینو توکي

غیر فعال مینو توکي

کارول

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

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

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

اختیارونه

میتودونه

پیښې

ښکته کول

کتنه

لاسرسی

مثالونه

د واحد تڼۍ ښکته کول

د ویشلو تڼۍ ډراپ ډاون

اندازه کول

د ډراپ اپ توپیر

د ډراپرایټ توپیر

د غورځیدو توپیر

د مینو توکي

د مینو ترتیب

د مینو سرلیکونه

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

د مینو ویشونکي

د مینو بڼې

فعال مینو توکي

غیر فعال مینو توکي

کارول

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

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

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

اختیارونه

میتودونه

پیښې

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