Out UI

下拉菜单是可切换的，用于显示链接列表等

基础用法

拆分按钮

同样地，创建分离式按钮的下拉菜单与单按钮下拉菜单的标记几乎相同，但增加了.dropdown-toggle-split，以便在下拉菜单周围有适当的间距。

我们使用这个额外的类来减少光标两边25%的水平padding，并去除普通按钮下拉时的margin-left。这些额外的变化使光标保持在分割按钮的中心位置，并在主按钮旁边提供一个尺寸更合适的点击区域。

不同尺寸

按钮下拉可以与各种尺寸的按钮一起使用，包括默认和拆分下拉按钮。

深色下拉菜单

通过添加.dropdown-menu-dark到现有的.dropdown-menu 设置深色下拉菜单

并将其用于导航栏：

方向

通过添加.dropup、.dropend、.dropstart分别设置上拉、向右、向左菜单

菜单选项

可以使用<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 创建非交互式下拉项

激活菜单

将.active添加到下拉菜单中的项目，使其成为活动的样式。为了向辅助技术传达活动状态，使用aria-current属性 -- 对当前页面使用页面值，或对一个集合中的当前项目使用true。

禁用菜单

下拉菜单中的项目添加.disabled，设置为禁用样式。

菜单对齐

菜单内容

标题

添加标题到下拉菜单中。

分隔线

用分隔线分隔相关的菜单项。

文本

将自由格式的文本放置在带有文本的下拉菜单中，并使用间距。请注意，您可能需要额外的大小调整样式来限制菜单宽度。

表单

将表单放在下拉菜单中，或将其放入下拉菜单，并使用margin或padding为其提供所需的负空间。

下拉菜单选项

使用data-bs-offset或data-bs-reference来改变下拉菜单的位置。

自动关闭行为

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

OutUI

OutUI

基础用法

拆分按钮

不同尺寸

深色下拉菜单

方向

菜单选项

激活菜单

禁用菜单

菜单对齐

菜单内容

标题

分隔线

文本

表单

下拉菜单选项

自动关闭行为

基础用法

拆分按钮

不同尺寸

深色下拉菜单

方向

菜单选项

激活菜单

禁用菜单

菜单对齐

菜单内容

标题

分隔线

文本

表单

下拉菜单选项

自动关闭行为

Dropdown 下拉菜单

基础用法

拆分按钮

不同尺寸

深色下拉菜单

方向

菜单选项

激活菜单

禁用菜单

菜单对齐

菜单内容

标题

分隔线

文本

表单

下拉菜单选项

自动关闭行为

Dropdown 下拉菜单

基础用法

拆分按钮

不同尺寸

深色下拉菜单

方向

菜单选项

激活菜单

禁用菜单

菜单对齐

菜单内容

标题

分隔线

文本

表单

下拉菜单选项

自动关闭行为

链接

按钮