在GitHub上查看

下拉菜单

使用Bootstrap下拉插件，可以切换上下文覆盖，为了显示链接列表和更多内容。

本页导航↓

概述

下拉列表是可切换的上下文覆盖，用于显示链接列表等。它们与包含的Bootstrap下拉JavaScript插件交互。它们是通过点击来切换的，而不是通过悬停来切换的； 这是一个特意的设计决定.

下拉列表建立在第三方库上， Popper,它提供动态定位和视口检测。一定要包括 popper.min.js 在引导JavaScript或使用 bootstrap.bundle.min.js / bootstrap.bundle.js。里面有Popper。Popper不用于定位导航栏中的下拉列表，尽管不需要动态定位。

扩展访问

WAI ARIA 标准定义了一个实际的 role="menu" 小部件，但这是特定于触发动作或功能的应用程序类菜单的。 ARIA菜单只能包含菜单项、复选框菜单项、单选按钮菜单项、单选按钮组和子菜单。

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

但是，Bootstrap确实为大多数标准的键盘菜单交互添加了内置支持，例如使用光标键在单个 .dropdown-item 之间移动并使用 ESC 键关闭菜单的功能。

示例

在 .dropdown 或声明 position: relative;；的另一个元素中包装下拉列表的开关（按钮或链接）和下拉菜单；。下拉菜单可以从 <a> 或 <button> 元素触发，以更好地满足您的潜在需求。这里显示的示例在适当的地方使用语义 <ul> 元素，但支持自定义标记。

单个下拉菜单

任何一个 .btn 都可以通过一些标记更改转换为下拉开关。下面是如何将它们与 <button> 元素一起使用：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

然后带有一个 <a> 元素:

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>

<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

最棒的是，您也可以使用任何按钮变体来执行此操作：

<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

菜单大小

按钮下拉列表适用于所有大小的按钮，包括默认和拆分下拉按钮。

<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>

<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>

深色的下拉菜单

选择较暗的下拉菜单以匹配深色导航栏或自定义样式，方法是将 .dropdown-menu-dark 添加到现有的 .dropdown-menu 上。不需要更改下拉菜单项。

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

把它放在导航栏上

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </a>
      <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</div>
</div>
</nav>

拉动方向

RTL

在RTL中使用引导时，方向会被镜像，这意味着 .dropstart 将出现在右侧。

上拉菜单

通过向父元素添加 .dropup 来触发元素上方的下拉菜单。

<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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 dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>

右拉菜单

通过将 .dropend 添加到父元素，触发元素右侧的下拉菜单。

<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>

左拉菜单

通过向父元素添加 .dropstart 来触发元素左侧的下拉菜单。

<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  <span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
  <!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>

历史上，下拉菜单的内容必须是链接，但v4不再是这种情况。现在您可以选择在下拉列表中使用 <button> 元素，而不仅仅是 <a>。

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>

也可以使用 .dropdown-item-text 创建非交互式下拉项。您可以随意使用自定义CSS或文本实用程序进一步设计样式。

<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

有效的项目

将 .active 添加到下拉列表中的项以将其设置为活动样式。要将活动状态传递给辅助技术，请使用 aria-current 属性-使用 page 的页面值，或使用集合中当前项的 true 。

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

失效的项目

向下拉列表中的项目添加 .disabled 以将其设置为禁用。

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

默认情况下，下拉菜单会自动从其父菜单的顶部和左侧100%定位。Add .dropdown-menu-end 到 .dropdown-menu 右对齐下拉菜单。在RTL中使用Bootstrap时，方向是镜像的，这意味着。下拉菜单结束将出现在左侧。

小心 下拉菜单的位置要归功于Popper（除非它们包含在导航栏中）。 
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>

响应式对齐

如果要使用响应式对齐，请通过添加 data-bs-display="static" 属性禁用动态定位，并使用响应变化类。

要将下拉菜单与给定断点或更大断点右对齐，请添加 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end。

<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>

若要将下拉菜单 left 与给定的断点或更大的点对齐，请添加.dropdown-menu-end 和 .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>

请注意，由于导航栏中未使用Popper，因此您无需向导航栏中的下拉按钮添加 data-bs-display="static" 属性。

对齐选项

使用上面显示的大多数选项，它在一处展示了各种下拉对齐选项。

<div class="btn-group">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
          </div>
          
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Right-aligned menu
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
          </div>
          
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
              Left-aligned, right-aligned lg
            </button>
            <ul class="dropdown-menu dropdown-menu-lg-end">
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
          </div>
          
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
              Right-aligned, left-aligned lg
            </button>
            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
          </div>
          
          <div class="btn-group dropstart">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Dropstart
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
          </div>
          
          <div class="btn-group dropend">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Dropend
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
          </div>
          
          <div class="btn-group dropup">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Dropup
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
              <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
          </div>

菜单内容

标题

在任何下拉菜单中添加标题以标记操作的各个部分。

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

分频器

用分隔符将相关菜单项分组。

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

文本

在带有文本的下拉菜单中放置任意形式的文本，并使用 间距工具 。请注意，您可能需要其他大小调整样式来限制菜单宽度。

Some example text that's free-flowing within the dropdown menu.

And this is more example text. 

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>

表单

将表单放入下拉菜单中，或使其成为下拉菜单，然后使用边距或填充实用工具 为其提供所需的负空间。

New around here? Sign up Forgot password? 
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
  <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="mb-3">
  <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
  <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck">
    <label class="form-check-label" for="dropdownCheck">
      Remember me
    </label>
  </div>
</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="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="dropdownCheck2">
  <label class="form-check-label" for="dropdownCheck2">
    Remember me
  </label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>

使用 data-bs-offset 或 data-bs-reference 更改下拉列表的位置。

<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
  Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
  <span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

用法

通过数据属性或者JavaScript,下拉插件通过切换parent .dropdown-menu 上的 .show 类来切换隐藏内容（下拉菜单）。 data-bs-toggle="dropdown" 属性依赖于在应用程序级别关闭下拉菜单，因此最好始终使用它。

在支持触摸的设备上，打开下拉列表会将空 mouseover 处理程序添加到 <body> 元素的直接子级。这一公认的丑陋的黑客行为对于解决iOS事件iOS事件委托中的一个怪癖是必要的，否则会阻止在下拉列表之外的任何地方点击触发关闭下拉列表的代码。关闭下拉列表后，将删除这些额外的空 mouseover 处理程序。

通过数据属性

添加 data-bs-toggle="dropdown"添加到链接或下列切换按钮

<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>

通过JavaScript

通过JavaScript调用下拉列表：

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown" 仍然时必须的

不管您是通过JavaScript调用dropdown还是使用dataapi， data-bs-toggle="dropdown" 始终需要出现在dropdown的触发器元素上。

选项

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到 data-bs-，如 data-bs-offset="" 中所示。

名字 类型 默认值 描述
flip boolean true 允许Dropdown在引用元素重叠的情况下翻转。有关更多信息，请参阅Popper的 flip文档。
boundary string | element 'scrollParent' 下拉菜单的溢出约束边界。默认情况下，它是 'clippingParents' ，可以接受HTMLElement引用（仅限于JavaScript）。有关更多信息，请参阅Popper的文档。
reference string | element 'toggle' 下拉菜单的引用元素。接受 'toggle', 'parent' 或HTMLElement引用的值。有关更多信息，请参阅Popper的 构造文档。
display string 'dynamic' 默认情况下，我们使用Popper进行动态定位。用static禁用它。
popperConfig null | object null 要更改引导程序的默认Popper配置，请参阅Popper的配置

注意当 boundary 设置为 'scrollParent' 以外的任何值时，样式为 position: static 将应用于 .dropdown 容器。

方法

方法 描述
toggle 切换给定导航栏或选项卡式导航的下拉菜单。
show 显示给定导航栏或选项卡式导航的下拉菜单。
hide 隐藏给定导航栏或选项卡式导航的下拉菜单。
update 更新元素下拉列表的位置。
dispose 销毁元素的下拉列表。（删除DOM元素上存储的数据）
getInstance 静态方法，该方法允许您获取与DOM元素关联的dropdown实例。

事件

所有下拉事件都在 .dropdown-menu 的父元素上激发，并具有 relatedTarget 属性，其值为toggling anchor元素。hide.bs.dropdown 以及 hidden.bs.dropdown 事件具有 clickEvent 属性（仅当原始事件类型为 click 时），该属性包含点击事件的事件对象。

方法 描述
show.bs.dropdown 调用show instance方法时立即激发。
shown.bs.dropdown 当下拉列表对用户可见并且CSS转换完成时激发。
hide.bs.dropdown 调用hide实例方法后立即激发。
hidden.bs.dropdown 当下拉列表完成对用户隐藏并且CSS转换完成时激发。 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})