©
このドキュメントでは、 php中国語ネットマニュアル リリース
切换上下文覆盖,以显示链接列表和更多与引导下拉插件。
下拉菜单是可切换的,用于显示链接列表等的上下文覆盖。它们与包含的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">