下拉菜单 Dropdowns

下拉菜单通过点击按钮切换可显示/隐藏的菜单列表,支持分割按钮、大小尺寸、弹出方向、对齐方式以及标题、分隔线等丰富的菜单内容。

基础下拉

把按钮包在 .dropdown 容器里,按钮加 data-bs-toggle="dropdown",菜单为 ul.dropdown-menu,点击即可开合。

HTML 示例

分割按钮

主按钮与插入符号拆开:主按钮执行默认动作,旁边带 dropdown-toggle-split 的小按钮负责展开菜单。

HTML 示例

尺寸

下拉按钮支持 btn-lg 与 btn-sm,普通按钮与分割按钮都适用。

HTML 示例

弹出方向

父容器加 dropup(向上)、dropend(向右)、dropstart(向左)可改变菜单弹出方向。

HTML 示例

菜单对齐

默认菜单与按钮左对齐;加 dropdown-menu-end 让菜单右对齐,适合贴着屏幕边缘放置的按钮。

HTML 示例

菜单内容

菜单内可放标题 dropdown-header、分隔线 dropdown-divider,并用 active / disabled 标记菜单项状态。

HTML 示例