【Bootstrap V4系列】学习入门教程之 组件-下拉菜单（Dropdowns）

下拉菜单（Dropdowns）

使用Bootstrap下拉插件切换上下文覆盖以显示链接列表等。

一、Overview 概述

下拉菜单是可切换的，上下文覆盖用于显示链接列表等。它们与附带的Bootstrap下拉JavaScript插件进行了交互。它们是通过点击而不是悬停来切换的；这是一个有意的设计决策。

下拉菜单基于第三方库Popper构建，该库提供动态定位和视口检测。请确保在Bootstrap的JavaScript之前包含popper.min.js，或者使用包含popper的bootstrap.bundle.min.js/bootstrap.bundle.js。Popper不用于定位导航栏中的下拉菜单，因为不需要动态定位。

二、Accessibility 可访问性

ARIA菜单只能包含菜单项、复选框菜单项、单选按钮菜单项、按钮组和子菜单。

另一方面，Bootstrap的下拉菜单被设计为通用的，适用于各种情况和标记结构。例如，可以创建包含其他输入和表单控件的下拉菜单，如搜索字段或登录表单。因此，Bootstrap不期望（也不自动添加）真正的aria菜单所需的任何角色和aria属性。作者必须自己包含这些更具体的属性。

然而，Bootstrap确实为大多数标准键盘菜单交互添加了内置支持，例如使用光标键移动单个下拉项元素并使用ESC键关闭菜单的能力。

三、Examples

将下拉菜单的切换（按钮或链接）和下拉菜单包裹在.dropdown或另一个声明position: relative位置的元素中。下拉菜单可以从<a>或<button>元素触发，以更好地满足您的潜在需求。

3.1 Single button 单按钮

任何一个.btn都可以通过一些标记更改变成下拉切换。以下是如何将它们与<button>元素一起使用的方法：

<!--Examples-->
<!--with <button> elements:-->
<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown button</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>
</div>

页面展示效果：

点击展开下拉菜单，页面展示效果

对于<a>元素：

<!--And with <a> elements:-->
<div class="dropdown"><a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">Dropdown link</a><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>
</div>

页面展示效果：

最棒的是，你也可以用任何按钮变体来实现这一点：

<div class="btn-example"><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button><div class="dropdown-menu" style=""><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><!-- /btn-group --><div class="btn-group"><button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Secondary</button><div class="dropdown-menu" style=""><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><!-- /btn-group --><div class="btn-group"><button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button><div class="dropdown-menu" style=""><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><!-- /btn-group --><div class="btn-group"><button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button><div class="dropdown-menu" style=""><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><!-- /btn-group --><div class="btn-group"><button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</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><!-- /btn-group --><div class="btn-group"><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</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><!-- /btn-group -->
</div>

页面展示效果：

3.2 Split button 分割按钮

<!-- Example split danger button -->
<div class="btn-group"><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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-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-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-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-expanded="false"><span class="sr-only">Toggle Dropdown</span></button><div class="dropdown-menu">...</div>
</div>

页面展示效果：