【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>

页面展示效果：