Dropdowns下拉菜单

~~Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.~~使用Bootstrap下拉插件切换上下文覆盖以显示链接列表等。

~~On this page~~本页内容

Overview概述

~~Dropdowns are toggleable, contextual overlays for displaying lists of links and more.~~ 下拉列表是可切换的上下文覆盖，用于显示链接列表等。~~They’re made interactive with the included Bootstrap dropdown JavaScript plugin.~~ 它们与附带的Bootstrap下拉JavaScript插件交互。~~They’re toggled by clicking, not by hovering; this is an intentional design decision.~~它们通过点击而不是悬停来切换；这是一个有意的设计决策。

~~Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection.~~ 下拉列表建立在第三方库Popper上，该库提供动态定位和视口检测。~~Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.~~ 确保在Bootstrap的JavaScript之前包含popper.min.js，或者使用包含popper的bootstrap.bundle.min.js / bootstrap.bundle.js。~~Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.~~Popper不用于定位导航栏中的下拉列表，但不需要动态定位。

Accessibility可访问性

~~The WAI ARIA standard defines an actual role="menu" widget, but this is specific to application-like menus which trigger actions or functions.~~ WAI ARIA标准定义了一个实际role="menu"小部件，但这是特定于触发动作或功能的类似应用程序的菜单。ARIA ~~menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.~~菜单只能包含菜单项、复选框菜单项、单选按钮菜单项、无线按钮组和子菜单。

~~Bootstrap’s dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures.~~ 另一方面，Bootstrap的下拉列表设计为通用的，适用于各种情况和标记结构。~~For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms.~~ 例如，可以创建包含其他输入和表单控件（如搜索字段或登录表单）的下拉列表。~~For this reason, Bootstrap does not expect (nor automatically add) any of the role and aria- attributes required for true ARIA menus.~~ 因此，Bootstrap不期望（也不会自动添加）真正的aria菜单所需的任何role和aria-属性。~~Authors will have to include these more specific attributes themselves.~~作者必须包括这些更具体的属性。

However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual .dropdown-item elements using the cursor keys and close the menu with the ESC key.但是，Bootstrap确实为大多数标准键盘菜单交互添加了内置支持，例如使用光标键移动单个.dropdown-item元素并使用ESC键关闭菜单的功能。

Examples例子

~~Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;.~~ 将下拉菜单的切换（按钮或链接）和下拉菜单包装在.dropdown中，或另一个声明了position: relative;的元素中。~~Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.~~ 下拉菜单可以从<a>或<button>元素触发，以更好地满足您的潜在需求。~~The examples shown here use semantic <ul> elements where appropriate, but custom markup is supported.~~这里显示的示例在适当的情况下使用语义<ul>元素，但支持自定义标记。

Single button单键

~~Any single .btn can be turned into a dropdown toggle with some markup changes.~~ 任何单个.btn都可以通过一些标记更改转换为下拉切换。~~Here’s how you can put them to work with either <button> elements:~~以下是您如何让他们与其中一个<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>

~~And with <a> elements:~~使用<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>

~~The best part is you can do this with any button variant, too:~~最好的一点是，您也可以使用任何按钮变体：

<!-- 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拆分按钮

~~Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.~~类似地，使用与单个按钮下拉列表几乎相同的标记创建拆分按钮下拉列表，但添加了.dropdown-toggle-split，以便在下拉插入符号周围保持适当的间距。

~~We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that’s added for regular button dropdowns.~~ 我们使用这个额外的类将插入符号两边的水平padding减少25%，并删除为常规按钮下拉添加的margin-left。~~Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.~~这些额外的更改将插入符号保持在拆分按钮的中心，并在主按钮旁边提供更合适大小的命中区域。

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

~~Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.~~按钮下拉菜单适用于所有大小的按钮，包括默认和拆分下拉按钮。

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

Dark dropdowns深色下拉列表

~~Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark onto an existing .dropdown-menu.~~ 通过在现有.dropdown-menu中添加.dropdown-menu-dark，选择较暗的下拉菜单以匹配深色导航栏或自定义样式。~~No changes are required to the dropdown items.~~不需要对下拉项进行更改。

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

~~And putting it to use in a navbar:~~并将其用于导航栏：

<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

~~Directions are mirrored when using Bootstrap in RTL, meaning .dropstart will appear on the right side.~~在RTL中使用Bootstrap时会镜像方向，这意味着.dropstart将出现在右侧。

Dropup

~~Trigger dropdown menus above elements by adding .dropup to the parent element.~~通过将.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

~~Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.~~通过向父元素添加.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

~~Trigger dropdown menus at the left of the elements by adding .dropstart to the parent element.~~通过向父元素添加.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>

~~You can use <a> or <button> elements as dropdown items.~~您可以使用<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>

~~You can also create non-interactive dropdown items with .dropdown-item-text.~~ 您还可以使用.dropdown-item-text创建非交互式下拉项。~~Feel free to style further with custom CSS or text utilities.~~您可以使用自定义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活动的

~~Add .active to items in the dropdown to style them as active.~~ 向下拉列表中的项目添加.active以将其设置为活动项。~~To convey the active state to assistive technologies, use the aria-current attribute — using the page value for the current page, or true for the current item in a set.~~要将活动状态传递给辅助技术，请使用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禁用的

~~Add .disabled to items in the dropdown to style them as disabled.~~将下拉列表中对项目添加.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>

~~By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.~~ 默认情况下，下拉菜单将自动位于父菜单左侧的顶部100%的位置。~~You can change this with the directional .drop* classes, but you can also control them with additional modifier classes.~~您可以使用方向.drop*类来更改这一点，但也可以使用其他修饰符类来控制它们。

~~Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu.~~ 将.dropdown-menu-end添加到.dropdown-menu以右对齐下拉菜单。~~Directions are mirrored when using Bootstrap in RTL, meaning .dropdown-menu-end will appear on the left side.~~在RTL中使用Bootstrap时，方向是镜像的，这意味着.dropdown-menu-end将出现在左侧。

~~Heads up!~~抬头！ ~~Dropdowns are positioned thanks to Popper except when they are contained in a navbar.~~下拉菜单由于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>

Responsive alignment响应式对齐

~~If you want to use responsive alignment, disable dynamic positioning by adding the data-bs-display="static" attribute and use the responsive variation classes.~~如果您想使用响应对齐，则通过添加数data-bs-display="static"属性并使用响应变体类来禁用动态定位。

~~To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.~~要使下拉菜单与给定的断点或更大的断点对齐，请添加.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>

~~To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.~~要使下拉菜单左侧与给定的断点或更大的断点对齐，请添.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>

~~Note that you don’t need to add a data-bs-display="static" attribute to dropdown buttons in navbars, since Popper isn’t used in navbars.~~注意，在导航栏中，您不需要给下拉按钮添加data-bs-display="static"属性，因为导航栏中不使用Popper。

Alignment options对齐选项

~~Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place.~~利用上面显示的大多数选项，这里是一个小型厨房水槽演示，展示了一个地方的各种下拉对齐选项。

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

~~Add a header to label sections of actions in any dropdown menu.~~在任何下拉菜单中添加标题以标记操作部分。

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

Dividers分隔器

~~Separate groups of related menu items with a divider.~~用分隔符分隔相关菜单项的组。

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

Text文本

~~Place any freeform text within a dropdown menu with text and use spacing utilities.~~ 在带有文本的下拉菜单中放置任意自由形式的文本，并使用间距实用程序。~~Note that you’ll likely need additional sizing styles to constrain the menu width.~~请注意，您可能需要其他大小调整样式来约束菜单宽度。

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

Forms表单

~~Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.~~将表单放入下拉菜单，或将其放入下拉菜单中，并使用边距或填充实用程序为其提供所需的负空间。

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

~~Use data-bs-offset or data-bs-reference to change the location of the dropdown.~~使用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>

Auto close behavior自动关闭行为

~~By default, the dropdown menu is closed when clicking inside or outside the dropdown menu.~~ 默认情况下，单击下拉菜单内部或外部时，下拉菜单将关闭。~~You can use the autoClose option to change this behavior of the dropdown.~~您可以使用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

Variables变量

~~Variables for all dropdowns:~~所有下拉列表的变量：

$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($gray-900, 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;

~~Variables for the dark dropdown:~~深色下拉菜单的变量：

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

~~Variables for the CSS-based carets that indicate a dropdown’s interactivity:~~用于指示下拉列表交互性的基于CSS的插入符号的变量：

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

Mixins

~~Mixins are used to generate the CSS-based carets and can be found in scss/mixins/_caret.scss.~~混合符号用于生成基于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;
}
}
}

Usage用法

~~Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent .dropdown-menu.~~ 通过数据属性或JavaScript，下拉插件通过切换父.dropdown-menu上的.show类来切换隐藏内容（下拉菜单）。~~The data-bs-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.~~data-bs-toggle="dropdown"属性用于在应用程序级别关闭下拉菜单，所以始终使用它是一个好主意。

~~On touch-enabled devices, opening a dropdown adds empty mouseover handlers to the immediate children of the <body> element.~~ 在支持触摸的设备上，打开下拉列表会将空的mouseover处理程序添加到<body>元素的直接子级。This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. 这种公认的丑陋的黑客是解决iOS事件委派中的一个怪癖所必需的，否则，点击下拉列表之外的任何地方都会阻止触发关闭下拉列表的代码。~~Once the dropdown is closed, these additional empty mouseover handlers are removed.~~关闭下拉列表后，将删除这些额外的空mouseover处理程序。

Via data attributes通过数据属性

~~Add data-bs-toggle="dropdown" to a link or button to toggle a dropdown.~~添加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>

Via JavaScript

~~Call the dropdowns via 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"` still required仍然需要

~~Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-bs-toggle="dropdown" is always required to be present on the dropdown’s trigger element.~~无论您是通过JavaScript调用下拉列表还是使用数据api，data-bs-toggle="dropdown"始终需要出现在下拉列表的触发器元素上。

Options选项

~~Options can be passed via data attributes or JavaScript.~~ 选项可以通过数据属性或JavaScript传递。~~For data attributes, append the option name to data-bs-, as in data-bs-offset="".~~ 对于数据属性，将选项名称附加到data-bs-，如data-bs-offset=""。~~Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes.~~ 通过数据属性传递选项时，确保将选项名称的大小写类型从camelCase更改为kebab case。~~For example, instead of using data-bs-autoClose="false", use data-bs-auto-close="false".~~例如，代替使用data-bs-autoClose="false"，使用data-bs-auto-close="false"。

~~Name~~名称	~~Type~~类型	~~Default~~默认值	~~Description~~描述
`boundary`	string \| element	`'clippingParents'`	~~Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier).~~ 下拉菜单的溢出约束边界（仅适用于Popper的preventOverflow修饰符）。~~By default it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only).~~ 默认情况下，它是`'clippingParents'`，可以接受HTMLElement引用（仅通过JavaScript）。~~For more information refer to Popper's detectOverflow docs.~~有关更多信息，请参阅Popper的detectOverflow文档。
`reference`	string \| element \| object	`'toggle'`	~~Reference element of the dropdown menu.~~ 下拉菜单的参考元素。~~Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`.~~ 接受`'toggle'`、`'parent'`、HTMLElement引用或提供`getBoundingClientRect`的对象的值。~~For more information refer to Popper's constructor docs and virtual element docs.~~有关更多信息，请参阅Popper的构造函数文档和虚拟元素文档。
`display`	string	`'dynamic'`	~~By default, we use Popper for dynamic positioning.~~ 默认情况下，我们使用Popper进行动态定位。~~Disable this with `static`.~~使用`static`禁用此功能。
`offset`	array \| string \| function	`[0, 2]`	~~Offset of the dropdown relative to its target.~~ 下拉列表相对于其目标的偏移。~~You can pass a string in data attributes with comma separated values like:~~ 可以使用逗号分隔的值在数据属性中传递字符串，例如：`data-bs-offset="10,20"` ~~When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument.~~ 当函数用于确定偏移量时，将使用包含popper放置、引用和popper矩形的对象作为其第一个参数来调用该函数。~~The triggering element DOM node is passed as the second argument.~~ 触发元素DOM节点作为第二个参数传递。~~The function must return an array with two numbers:~~ 函数必须返回包含两个数字的数组：`[skidding, distance]`. ~~For more information refer to Popper's offset docs.~~有关更多信息，请参阅Popper的偏移文档。
`autoClose`	boolean \| string	`true`	~~Configure the auto close behavior of the dropdown:~~配置下拉菜单的自动关闭行为： `true` - ~~the dropdown will be closed by clicking outside or inside the dropdown menu.~~通过单击下拉菜单的外部或内部，将关闭下拉菜单。 `false` - ~~the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method.~~ 通过单击切换按钮并手动调用`hide`或`toggle`方法，将关闭下拉列表。~~(Also will not be closed by pressing `esc` key)~~（按下`esc`键也不会关闭） `'inside'` - ~~the dropdown will be closed (only) by clicking inside the dropdown menu.~~在下拉菜单中单击将关闭下拉菜单。 `'outside'` - ~~the dropdown will be closed (only) by clicking outside the dropdown menu.~~在下拉菜单外单击将关闭下拉菜单。
`popperConfig`	null \| object \| function	`null`	~~To change Bootstrap's default Popper config, see Popper's configuration.~~要更改Bootstrap的默认Popper配置，请参阅Popper的配置。 ~~When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration.~~ 当一个函数用于创建Popper配置时，会使用包含Bootstrap默认Popper配置的对象调用该函数。~~It helps you use and merge the default with your own configuration.~~ 它帮助您使用默认值并将其与自己的配置合并。~~The function must return a configuration object for Popper.~~该函数必须返回Popper的配置对象。

Using function with `popperConfig`将函数与`popperConfig`一起使用

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

Methods方法

~~Method~~方法	~~Description~~描述
`toggle`	~~Toggles the dropdown menu of a given navbar or tabbed navigation.~~切换给定导航栏或选项卡导航的下拉菜单。
`show`	~~Shows the dropdown menu of a given navbar or tabbed navigation.~~显示给定导航栏或选项卡导航的下拉菜单。
`hide`	~~Hides the dropdown menu of a given navbar or tabbed navigation.~~隐藏给定导航栏或选项卡导航的下拉菜单。
`update`	~~Updates the position of an element's dropdown.~~更新元素下拉列表的位置。
`dispose`	~~Destroys an element's dropdown.~~ 销毁元素的下拉列表。~~(Removes stored data on the DOM element)~~（删除DOM元素上存储的数据）
`getInstance`	~~Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this:~~ 静态方法允许您获取与DOM元素关联的下拉列表实例，您可以这样使用它：`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	~~Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialised.~~静态方法，返回与DOM元素关联的下拉列表实例，或者在未初始化的情况下创建一个新实例。 ~~You can use it like this:~~ 您可以这样使用：`bootstrap.Dropdown.getOrCreateInstance(element)`

Events事件

~~All dropdown events are fired at the toggling element and then bubbled up.~~ 所有下拉事件都在切换元素处触发，然后弹出。So you can also add event listeners on the .dropdown-menu’s parent element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original Event type is click) that contains an Event Object for the click event.因此，您还可以在.dropdown-menu的父元素上添加事件侦听器。hide.bs.dropdown和hidden.bs.dropdown事件具有clickEvent属性（仅当原始事件类型为click时），该属性包含单击事件的事件对象。

~~Method~~方法	~~Description~~描述
`show.bs.dropdown`	~~Fires immediately when the show instance method is called.~~调用show实例方法时立即激发。
`shown.bs.dropdown`	~~Fired when the dropdown has been made visible to the user and CSS transitions have completed.~~当下拉列表对用户可见且CSS转换完成时激发。
`hide.bs.dropdown`	~~Fires immediately when the hide instance method has been called.~~调用隐藏实例方法后立即激发。
`hidden.bs.dropdown`	~~Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.~~当下拉列表完成对用户隐藏并且CSS转换完成时激发。

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})

Dropdowns下拉菜单

Overview概述

Accessibility可访问性

Examples例子

Single button单键

Split button拆分按钮

Sizing尺寸

Dark dropdowns深色下拉列表

Directions方向

RTL

Dropup

Dropright

Dropleft

Menu items菜单项

Active活动的

Disabled禁用的

Menu alignment菜单对齐方式

Responsive alignment响应式对齐

Alignment options对齐选项

Menu content菜单内容

Headers页眉

Dividers分隔器

Text文本

Forms表单

Auto close behavior自动关闭行为

Sass

Variables变量

Mixins

Usage用法

Via data attributes通过数据属性

Via JavaScript

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

Options选项

Using function with `popperConfig`将函数与`popperConfig`一起使用

Methods方法

Events事件

Dropdowns下拉菜单

Overview概述

Accessibility可访问性

Examples例子

Single button单键

Split button拆分按钮

Sizing尺寸

Dark dropdowns深色下拉列表

Directions方向

RTL

Dropup

Dropright

Dropleft

Menu items菜单项

Active活动的

Disabled禁用的

Menu alignment菜单对齐方式

Responsive alignment响应式对齐

Alignment options对齐选项

Menu content菜单内容

Headers页眉

Dropdown header

Dividers分隔器

Text文本

Forms表单

Dropdown options下拉选项

Auto close behavior自动关闭行为

Sass

Variables变量

Mixins

Usage用法

Via data attributes通过数据属性

Via JavaScript

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

Options选项

Using function with popperConfig将函数与popperConfig一起使用

Methods方法

Events事件

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

Using function with `popperConfig`将函数与`popperConfig`一起使用