Bootstrap/docs/4.5/components/dropdowns

来自菜鸟教程
跳转至：导航、​搜索

在GitHub上查看

下拉菜单

使用Bootstrap下拉插件切换上下文叠加层以显示链接列表以及更多内容。

概观

下拉菜单是可切换的上下文叠加层,用于显示链接列表等。 它们与随附的Bootstrap下拉JavaScript插件互动。 通过点击（而不是悬停）来切换它们；这是 故意的设计决定 .

下拉菜单基于第三方库, Popper.js ,提供动态定位和视口检测。 确保包括 popper.min.js 在Bootstrap的JavaScript或使用之前 bootstrap.bundle.min.js/bootstrap.bundle.js 其中包含Popper.js。 尽管不需要动态定位,但Popper.js并不用于在导航栏中定位下拉菜单。

如果您是从源代码构建JavaScript, 要求 util.js.

无障碍

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

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

但是,Bootstrap确实添加了对大多数标准键盘菜单交互的内置支持,例如可以逐个移动 .dropdown-item 元素使用光标键,然后使用 ESC key.

例子

将下拉菜单的切换按钮（您的按钮或链接）和下拉菜单包装在一起 .dropdown ,或其他声明 position: relative; 。下拉菜单可以触发 <a> or <button> 元素以更好地满足您的潜在需求。

单键

任何单 .btn 可以变成带有某些标记更改的下拉开关。 您可以通过以下方法将它们与任何一个一起使用 <button> 内容：

行动 另一个动作 这里还有其他 
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownMenuButton" type="button"> 下拉按钮 </button>
<div aria-labelledby="dropdownMenuButton" class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
</div>
</div>

与 <a> 内容：

行动 另一个动作 这里还有其他 
<div class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button"> 下拉链接 </a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
</div>
</div>

最好的部分是您也可以使用任何按钮变体来做到这一点：

行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group 
<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"> 主 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"> 次要 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-success dropdown-toggle" data-toggle="dropdown" type="button"> 成功 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"> Info </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" type="button"> 警告 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"> 危险 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group

分割按钮

同样,创建拆分按钮下拉菜单时,其标记实际上与单个按钮下拉菜单相同,但要添加 .dropdown-toggle-split 在下拉式插入符周围保持适当的间距。

我们使用这个额外的类来减少水平 padding 将插入符号两侧的25％移除, margin-left 是为常规按钮下拉菜单添加的。 这些额外的更改使插入符号位于拆分按钮的中心,并在主按钮旁边提供了一个更适当大小的命中区域。

行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group
行动 另一个动作 这里还有其他
分隔链接
/btn-group 
<div class="btn-group">
<button class="btn btn-primary" type="button"> 主 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button class="btn btn-secondary" type="button"> 次要 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button class="btn btn-success" type="button"> 成功 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button class="btn btn-info" type="button"> Info </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button class="btn btn-warning" type="button"> 警告 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group">
<button class="btn btn-danger" type="button"> 危险 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group

浆纱

按钮下拉菜单可与所有大小的按钮一起使用,包括默认和拆分下拉按钮。

/btn工具栏 /btn工具栏 
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary btn-lg dropdown-toggle" data-toggle="dropdown" type="button"> 大按钮 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group ml-2">
<button class="btn btn-lg btn-secondary" type="button"> 大号拆分按钮 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
</div> /btn工具栏 
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" type="button"> 小按钮 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
<div class="btn-group ml-2">
<button class="btn btn-sm btn-secondary" type="button"> 小拆分按钮 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div> /btn-group 
</div> /btn工具栏

方向

放弃

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

行动 另一个动作 这里还有其他
分隔链接
行动 另一个动作 这里还有其他
分隔链接 
<div class="btn-group dropup">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"> 放弃 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
<div class="btn-group dropup">
<button class="btn btn-secondary" type="button"> 拆分下拉 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>

Dropright

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

行动 另一个动作 这里还有其他
分隔链接
行动 另一个动作 这里还有其他
分隔链接 
<div class="btn-group dropright">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"> Dropright </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
<div class="btn-group dropright">
<button class="btn btn-secondary" type="button"> 直接拆分 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>

左落

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

行动 另一个动作 这里还有其他
分隔链接
行动 另一个动作 这里还有其他
分隔链接 
<div class="btn-group dropleft">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"> 左落 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
<button class="btn btn-secondary" type="button"> 向左拆分 </button>
</div>

菜单项

历史上下拉菜单的内容 had 成为链接,但v4不再如此。 现在您可以选择使用 <button> 下拉菜单中的元素,而不仅仅是 <a> s. 

<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownMenu2" type="button"> 落下 </button>
<div aria-labelledby="dropdownMenu2" class="dropdown-menu">
<button class="dropdown-item" type="button"> 行动 </button>
<button class="dropdown-item" type="button"> 另一个动作 </button>
<button class="dropdown-item" type="button"> 这里还有其他 </button>
</div>
</div>

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

Dropdown item text 行动 另一个动作 这里还有其他 
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
</div>

活性

Add .active 到下拉菜单中的项目 称他们为活跃 .

常规链接 活动链接 另一个链接 
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 常规链接 </a>
<a class="dropdown-item active" href="#"> 活动链接 </a>
<a class="dropdown-item" href="#"> 另一个链接 </a>
</div>

残障人士

Add .disabled 到下拉菜单中的项目 将其设置为残疾人 .

常规链接 禁用的链接 另一个链接 
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 常规链接 </a>
<a aria-disabled="true" class="dropdown-item disabled" href="#" tabindex="-1"> 禁用的链接 </a>
<a class="dropdown-item" href="#"> 另一个链接 </a>
</div>

菜单对齐

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu 右对齐下拉菜单。

当心！ 下拉菜单的位置要归功于Popper.js（除非它们包含在导航栏中）。 


<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"> 右对齐菜单 </button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button"> 行动 </button>
<button class="dropdown-item" type="button"> 另一个动作 </button>
<button class="dropdown-item" type="button"> 这里还有其他 </button>
</div>
</div>

响应式对齐

如果要使用自适应对齐,请通过添加 data-display="static" 属性并使用响应变体类。

对齐 对 给定断点或更大的下拉菜单,添加 .dropdown-menu{-sm|-md|-lg|-xl}-right. 

<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" type="button"> 大屏幕时左对齐但右对齐 </button>
<div class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button"> 行动 </button>
<button class="dropdown-item" type="button"> 另一个动作 </button>
<button class="dropdown-item" type="button"> 这里还有其他 </button>
</div>
</div>

对齐 left 给定断点或更大的下拉菜单,添加 .dropdown-menu-right and .dropdown-menu{-sm|-md|-lg|-xl}-left. 

<div class="btn-group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" type="button"> 大屏幕时右对齐但左对齐 </button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button"> 行动 </button>
<button class="dropdown-item" type="button"> 另一个动作 </button>
<button class="dropdown-item" type="button"> 这里还有其他 </button>
</div>
</div>

请注意,您无需添加 data-display="static" 属性归因于导航栏中的下拉按钮,因为导航栏中未使用Popper.js。

菜单内容

头

在任何下拉菜单中添加标题以标记动作部分。

下拉标题
行动 另一个动作 
<div class="dropdown-menu">
<h6 class="dropdown-header"> 下拉标题 </h6>
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
</div>

分频器

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

行动 另一个动作 这里还有其他
分隔链接 
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>

Text

将任意格式的文本放在带有文本的下拉菜单中并使用 间隔实用程序 。请注意,您可能需要其他调整样式来限制菜单宽度。

下拉菜单中可以自由流动的一些示例文本。

这是更多示例文本。 

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p> 下拉菜单中可以自由流动的一些示例文本。 </p>
<p class="mb-0"> 这是更多示例文本。 </p>
</div>

形式

将表单放在下拉菜单中,或放入下拉菜单,然后使用 边距或填充实用程序 给它所需的负数空间。

这里新来的吗？ 注册 忘记密码？ 
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1"> 电子邮件地址 </label>
<input class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" type="email"/>
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1"> 密码 </label>
<input class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" type="password"/>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" id="dropdownCheck" type="checkbox"/>
<label class="form-check-label" for="dropdownCheck"> 记住账号 </label>
</div>
</div>
<button class="btn btn-primary" type="submit"> 登入 </button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 这里新来的吗？  注册 </a>
<a class="dropdown-item" href="#"> 忘记密码？ </a>
</div>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2"> 电子邮件地址 </label>
<input class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com" type="email"/>
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2"> 密码 </label>
<input class="form-control" id="exampleDropdownFormPassword2" placeholder="Password" type="password"/>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" id="dropdownCheck2" type="checkbox"/>
<label class="form-check-label" for="dropdownCheck2"> 记住账号 </label>
</div>
</div>
<button class="btn btn-primary" type="submit"> 登入 </button>
</form>

下拉选项

Use data-offset or data-reference 更改下拉菜单的位置。

行动 另一个动作 这里还有其他
行动 另一个动作 这里还有其他
分隔链接 
<div class="d-flex">
<div class="dropdown mr-1">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle" data-offset="10,20" data-toggle="dropdown" id="dropdownMenuOffset" type="button"> 抵消 </button>
<div aria-labelledby="dropdownMenuOffset" class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary" type="button"> 参考 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-reference="parent" data-toggle="dropdown" id="dropdownMenuReference" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div aria-labelledby="dropdownMenuReference" class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
</div>

用法

通过数据属性或JavaScript,下拉插件可通过以下方式切换隐藏内容（下拉菜单）： .show 父列表项上的class。 The data-toggle="dropdown" 依靠属性可以在应用程序级别关闭下拉菜单,因此最好始终使用该属性。

在支持触摸功能的设备上,打开下拉菜单会添加空白（ $.noop)mouseover 直系子女的处理者 <body> 元件。 这种公认的难看的骇客对于解决 iOS事件委派中的怪癖 ,否则将阻止下拉菜单之外的任何位置的点击触发关闭该下拉菜单的代码。 下拉菜单关闭后,这些额外的空白 mouseover 处理程序已删除。


通过数据属性

Add data-toggle="dropdown" 链接或按钮以切换下拉菜单。

通过JavaScript

通过JavaScript调用下拉菜单：

data-toggle="dropdown" 仍然需要

无论您是通过JavaScript调用下拉菜单还是使用data-api, data-toggle="dropdown" 始终需要出现在下拉菜单的触发元素上。


选项

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

Name Type 默认 描述
抵销 编号字符串功能 0

下拉菜单相对于目标的偏移量。

当使用函数确定偏移量时,将使用包含偏移量数据的对象作为其第一个参数调用该函数。 该函数必须返回具有相同结构的对象。 触发元素DOM节点作为第二个参数传递。

有关更多信息,请参阅Popper.js的 偏移文档 .

flip 布尔 true 如果参考元素重叠,则允许下拉菜单翻转。 有关更多信息,请参阅Popper.js的 翻转文档 .
边界 字符串元件 'scrollParent' 下拉菜单的溢出约束边界。 接受的值 'viewport','window','scrollParent' ,或HTMLElement引用（仅JavaScript）。 有关更多信息,请参阅Popper.js的 preventOverflow文档 .
参考 字符串元件 “切换” 下拉菜单的参考元素。 接受的值 'toggle','parent' ,或HTMLElement参考。 有关更多信息,请参阅Popper.js的 referenceObject文档 .
显示 串 '动态' 默认情况下,我们使用Popper.js进行动态定位。 通过禁用此功能 static.
popperConfig 目的 null 要更改Bootstrap的默认Popper.js配置,请参阅 Popper.js的配置

注意何时 boundary 设置为除 'scrollParent' , 风格 position: static 适用于 .dropdown 容器。

方法

方法 描述
$().dropdown('toggle') 切换给定导航栏或选项卡式导航的下拉菜单。
$().dropdown('show') 显示给定导航栏或选项卡式导航的下拉菜单。
$().dropdown('hide') 隐藏给定导航栏或选项卡式导航的下拉菜单。
$().dropdown('update') 更新元素下拉菜单的位置。
$().dropdown('dispose') 销毁元素的下拉菜单。

活动

所有下拉事件都会在 .dropdown-menu 的父元素,并有一个 relatedTarget 属性,其值是切换锚元素。 hide.bs.dropdown and hidden.bs.dropdown 事件有一个 clickEvent 属性（仅当原始事件类型为 click ）,其中包含click事件的事件对象。

事件 描述
show.bs.dropdown 调用show实例方法时,将立即触发此事件。
shown.bs.dropdown 当下拉菜单对用户可见时将触发此事件（将等待CSS转换完成）​​。
hide.bs.dropdown 调用hide实例方法后,立即触发此事件。
hidden.bs.dropdown 当下拉菜单完成对用户的隐藏操作时,将触发此事件（将等待CSS转换完成）​​。
取自“https://cainiaojiaocheng.com/index.php?title=Bootstrap/docs/4.5/components/dropdowns&oldid=66”
Powered by MediaWiki