Getting startedAccessibility（无障碍）Browsers and devices（浏览器和设备）Build tools（构建工具）Contents（内容）Download（下载）JavaScriptTheming Bootstrap（主题Bootstrap）WebpackComponents: AlertsAlerts（警报）Components: BadgesBadges（徽章）Components: BreadcrumbBreadcrumbComponents: Button groupButton group（按钮组）Components: ButtonsButtons（按钮）Components: CardsComponents: CarouselCards（卡）Carousel（圆盘传送带）Components: CollapseCollapse（折叠）Components: DropdownsDropdowns（下拉菜单）Components: FormsForms（表单）Components: Input groupInput group（输入群组）Components: Input groupJumbotron（广告大屏幕）Components: List groupList group（列表组）Components: ModalModal（互动视窗）Components: NavbarNavbar（导航栏）Components: NavsNavs（导航栏）Components: PaginationPagination（分页）Components: PopoversPopovers（弹出框）Components: ProgressProgress（进度条）Components: ScrollspyScrollspy（滚动监听）Components: TooltipsTooltips（提示工具）ContentCode（代码）Figures（图片区）Images（图片）Reboot（重置）Tables（表格）Typography（排版）LayoutGrid（网格）Layout（布局）Media object（多媒体对象）Utilities for layout（排版通用类别）MigrationMigrating to v4（迁移到v4）UtilitiesBorders（边框）Clearfix（清除浮动）Close icon（关闭图标）Colors（颜色）Display property（显示属性）Embeds（内嵌）Flex（弹性）Float（浮动）Image replacement（图像替换）Position（位置）Screenreaders（荧幕阅读器）Sizing（尺寸）Spacing（间隔）Text（文本）Vertical alignment（垂直对齐）Visibility（能见度）
©
本文档使用
php.cn手册 发布
文字
切换上下文覆盖，以显示链接列表和更多与引导下拉插件。
概述
下拉菜单是可切换的，用于显示链接列表等的上下文覆盖。它们与包含的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>
Sizing
按钮下拉菜单可以处理各种尺寸的按钮，包括默认和分割下拉按钮。
<!-- 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
通过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…})