©
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
切换上下文覆盖,以显示链接列表和更多与引导下拉插件。
下拉菜单是可切换的,用于显示链接列表等的上下文覆盖。它们与包含的Bootstrap下拉式JavaScript插件交互。他们通过点击而不是通过盘旋来切换; 这是一个有意的设计决定。
下拉菜单建立在第三方库Popper.js上,该库提供动态定位和视口检测。一定要包括popper.min.js引导的JavaScript或使用前bootstrap.bundle.min.js
/ bootstrap.bundle.js
包含Popper.js。
如果你从源代码构建我们的JS,它需要util.js
。
所述WAI ARIA标准定义了实际role="menu"
插件,但是这是特定于该触发动作或功能应用类菜单。ARIA菜单只能包含菜单项,复选框菜单项,单选按钮菜单项,单选按钮组和子菜单。
另一方面,Bootstrap的下拉菜单设计为通用的,适用于各种情况和标记结构。例如,可以创建包含其他输入和表单控件的下拉列表,例如搜索字段或登录表单。出于这个原因,引导不指望(也没有自动添加)任何role
与aria-
真正ARIA的菜单需要的属性。作者必须自己包含这些更具体的属性。
但是,Bootstrap确实为大多数标准键盘菜单交互添加了内置支持,例如.dropdown-item
使用光标键移动单个元素的能力以及使用ESC键关闭菜单的能力。
将下拉的切换(您的按钮或链接)和下拉菜单.dropdown
或其他声明的元素封装在一起position: relative;
。可以通过下拉菜单<a>
或<button>
元素来更好地满足潜在需求。
任何单个.btn
可以变成下拉切换与一些标记更改。以下是您可以如何将它们与任何<button>
元素配合使用的方法:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div></div>
与<a>
要素:
<div class="dropdown 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 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 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">Dropup</button> <button type="button" class="btn btn-secondary dropdown-toggle" 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><!-- 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" 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>
历史上的下拉菜单内容必须是链接,但v4不再是这种情况。现在,您可以选择<button>
在下拉列表中使用元素,而不仅仅是<a>
s。
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div></div>
默认情况下,下拉菜单自动从父级的顶部和左侧定位100%。添加.dropdown-menu-right
到.dropdown-menu
右侧对齐下拉菜单。
抬头!Dropper的位置得益于Popper.js(除非它们包含在导航栏中)。
<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> This dropdown's menu is right-aligned </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@example.com"> </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"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> 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@example.com"> </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"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Sign in</button></form>
添加.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>
通过数据属性或JavaScript,下拉插件通过切换.show
父列表项上的类来切换隐藏内容(下拉菜单)。该data-toggle="dropdown"
属性依赖于在应用程序级别关闭下拉菜单,所以始终使用它是个好主意。
添加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>
通过JavaScript调用下拉菜单:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
仍需无论您是通过JavaScript调用下拉列表还是使用data-api,data-toggle="dropdown"
总是需要在下拉的触发器元素中出现。
选项可以通过数据属性或JavaScript传递。对于数据属性,请将选项名称附加到data-
,如data-offset=""
。
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
offset | number | string | function | 0 | 下拉相对于其目标的偏移量。有关更多信息,请参阅Popper.js的偏移文档。 |
flip | boolean | true | 允许下拉菜单在参考元素重叠的情况下翻转。有关更多信息,请参阅Popper.js的翻转文档。 |
方法 | 描述 |
---|---|
$().dropdown('toggle') | 切换给定导航栏或标签导航的下拉菜单。 |
$().dropdown('update') | 更新元素下拉列表的位置。 |
$().dropdown('dispose') | 销毁元素的下拉菜单。 |
所有下拉事件都在.dropdown-menu
父元素上触发,并有一个relatedTarget
属性,其值是切换锚点元素。
事件 | 描述 |
---|---|
show.bs.dropdown | 当show instance方法被调用时,此事件立即触发。 |
shown.bs.dropdown | 当下拉菜单对用户可见时会触发此事件(等待CSS转换完成)。 |
hide.bs.dropdown | 当调用隐藏实例方法时立即触发此事件。 |
hidden.bs.dropdown | 当下拉菜单完成对用户隐藏时会触发此事件(等待CSS转换完成)。 |
$('#myDropdown').on('show.bs.dropdown', function () { // do something…})