下拉菜单 Dropdown

使用 Bootstrap 下拉菜单插件切换上下文遮罩层以显示链接列表等。

内容提要

概览

下拉菜单是可切换的上下文遮罩层，用于显示链接列表等。它们使用下拉菜单 JavaScript 插件进行交互。它们是通过单击而不是悬停来切换的；这是有意的设计决策。

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

无障碍

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

而 Bootstrap 的下拉菜单被设计得很通用，适用于各种情况和标记结构。例如，可以创建包含输入框和其他表单控件的下拉菜单，例如搜索框或登录表单。因此，Bootstrap 不期望（也不会自动添加）真正 ARIA 菜单所需的任何 role 和 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="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>

拆分按钮(Split button)

同样，使用与单个按钮下拉菜单几乎相同的标记创建拆分按钮下拉菜单，但添加了 .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>

大小

所有适用于按钮的大小(Sizing)，也适用于下拉菜单按钮，包括默认和拆分下拉菜单按钮。

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

方向(Directions)

RTL

在 RTL 中使用 Bootstrap 时方向是镜像的，这意味着 .dropstart 将出现在右侧。

向上显示菜单(Dropup)

通过将 .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>

向右显示菜单(Dropright)

通过将 .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>

向左显示菜单(Dropleft)

通过将 .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>

您可以使用 <a> 或 <button> 元素作为下拉菜单项。

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

将 .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">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

默认情况下，下拉菜单会自动 100% 定位在其父级的顶部和左侧。您可以使用定向 .drop* 类来更改它，但您也可以使用其他修饰符类来控制它们。

将 .dropdown-menu-end 添加到 .dropdown-menu 以右对齐下拉菜单。在 RTL 中使用 Bootstrap 时方向是镜像的，这意味着 .dropdown-menu-end 效果将是左侧对齐。

注意！ 下拉菜单的位置设置要归功于 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>

要将下拉菜单与给定及更大的断点左对齐，请添加 .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>

请注意，您不需要在导航栏中的下拉按钮中添加 data-bs-display="static" 属性，因为在导航栏中不使用 Popper。

对齐选项

应用上面讲述的大部分选项，这里有一个演示，在一个地方展示了各种下拉对齐选项。

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

头(Headers)

添加标题以标记下拉菜单中的操作部分。

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

文本

将任何自由格式文本放在带有文本的下拉菜单中，并使用间距实用程序。请注意，您可能需要额外的尺寸样式来限制菜单宽度。

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

表单

将表单放在下拉菜单中，然后使用 margin 或 padding 实用程序为您提供所需的负空间。

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

自动关闭行为

默认情况下，在下拉菜单内部或外部单击时，下拉菜单会关闭。您可以使用 autoClose 选项来更改下拉菜单的这种行为。

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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 class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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 class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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 class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

Sass

变量

下拉菜单的变量：

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

深色下拉菜单的变量：

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

指示下拉菜单交互性的基于 CSS 的图标的变量：

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Mixins

Mixins 用于生成基于 CSS 的图标，可以在 scss/mixins/_caret.scss 中找到。

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

用法

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

在支持触摸的设备上，打开下拉菜单会将空的 mouseover 处理程序添加到 <body> 元素的直接子元素。这个公认的解决 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 调用下拉菜单还是使用 data-api，data-bs-toggle="dropdown" 始终需要出现在下拉菜单的触发元素上。

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-bs-，如 data-bs-offset=""。通过数据属性传递选项时，请确保将选项名称的大小写类型从 camelCase 更改为 kebab-case。例如，不要使用 data-bs-autoClose="false"，而是使用 data-bs-auto-close="false"。

名称	类型	默认值	描述
`boundary`	string \| element	`'clippingParents'`	下拉菜单的溢出约束边界（仅适用于 Popper 的 preventOverflow 修饰符）。默认情况下它是 `'clippingParents'` 并且可以接受 HTMLElement 引用（仅通过 JavaScript）。有关详细信息，请参阅 Popper 的 detectOverflow 文档。
`reference`	string \| element \| object	`'toggle'`	下拉菜单的引用元素。接受 `'toggle'`、`'parent'`、HTMLElement 引用或提供 `getBoundingClientRect` 的对象的值。有关详细信息，请参阅 Popper 的构造函数文档和虚拟元素文档。
`display`	string	`'dynamic'`	默认情况下，我们使用 Popper 进行动态定位。使用 `static` 禁用它。
`offset`	array \| string \| function	`[0, 2]`	下拉菜单相对于其目标的偏移量。您可以使用逗号分隔值在数据属性中传递字符串，例如：`data-bs-offset="10,20"` 当一个函数用于确定偏移量时，调用它时会使用一个包含 popper 位置、引用和 popper rects 作为其第一个参数的对象。触发元素 DOM 节点作为第二个参数传递。该函数必须返回一个包含两个数字的数组：`[skidding, distance]`。有关详细信息，请参阅 Popper 的偏移文档。
`autoClose`	boolean \| string	`true`	配置下拉菜单的自动关闭行为： `true` - 下拉菜单将通过单击下拉菜单的外部或内部来关闭。 `false` - 单击切换按钮并手动调用 `hide` 或 `toggle` 方法将关闭下拉菜单。（也不会按`esc`键关闭） `'inside'` - 仅当单击下拉菜单内部，关闭下拉菜单。 `'outside'` - 下拉菜单将（仅）通过单击下拉菜单外部关闭。
`popperConfig`	null \| object \| function	`null`	要更改 Bootstrap 的默认 Popper 配置，请参阅 Popper 的配置。当一个函数用于创建 Popper 配置时，它会被一个包含 Bootstrap 的默认 Popper 配置的对象调用。它可以帮助您使用默认设置并将其与您自己的配置合并。该函数必须为 Popper 返回一个配置对象。

使用带有 `popperConfig` 的函数

var dropdown = new bootstrap.Dropdown(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

方法

方法	描述
`toggle`	切换给定导航栏或选项卡式导航的下拉菜单。
`show`	显示给定导航栏或选项卡式导航的下拉菜单。
`hide`	隐藏给定导航栏或选项卡式导航的下拉菜单。
`update`	更新元素下拉菜单的位置。
`dispose`	销毁元素的下拉菜单。（删除 DOM 元素上存储的数据）
`getInstance`	允许您获取与 DOM 元素关联的下拉实例的静态方法，您可以像这样使用它：`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	静态方法，它返回与 DOM 元素关联的下拉实例，或者在未初始化的情况下创建一个新实例。你可以像这样使用它：`bootstrap.Dropdown.getOrCreateInstance(element)`

事件

所有下拉事件都在切换元素上触发，然后冒泡。所以你也可以在 .dropdown-menu 的父元素上添加事件监听器。 hide.bs.dropdown 和 hidden.bs.dropdown 事件具有 clickEvent 属性（仅当原始事件类型为 click)，其中包含单击事件的事件对象。

事件	描述
`show.bs.dropdown`	调用 show 实例方法时立即触发。
`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...
})

下拉菜单 Dropdown

概览

无障碍

示例

单按钮

拆分按钮(Split button)

大小

深色下拉菜单

方向(Directions)

RTL

向上显示菜单(Dropup)

向右显示菜单(Dropright)

向左显示菜单(Dropleft)

菜单项

激活(Active)

禁用

菜单对齐

响应式对齐

对齐选项

菜单内容

头(Headers)

分隔线

文本

表单

自动关闭行为

Sass

变量

Mixins

用法

通过数据属性

通过 JavaScript

仍然需要 `data-bs-toggle="dropdown"`

选项

使用带有 `popperConfig` 的函数

方法

事件

下拉菜单 Dropdown

概览

无障碍

示例

单按钮

拆分按钮(Split button)

大小

深色下拉菜单

方向(Directions)

RTL

向上显示菜单(Dropup)

向右显示菜单(Dropright)

向左显示菜单(Dropleft)

菜单项

激活(Active)

禁用

菜单对齐

响应式对齐

对齐选项

菜单内容

头(Headers)

Dropdown header

分隔线

文本

表单

下拉菜单选项

自动关闭行为

Sass

变量

Mixins

用法

通过数据属性

通过 JavaScript

仍然需要 data-bs-toggle="dropdown"

选项

使用带有 popperConfig 的函数

方法

事件

仍然需要 `data-bs-toggle="dropdown"`

使用带有 `popperConfig` 的函数