在前端开发中，下拉菜单是一个非常常见的 UI 组件。Bootstrap 提供了一系列下拉菜单组件，包括基本下拉菜单、下拉菜单分割线、下拉菜单头部、下拉菜单右对齐等多种类型。
基本用法
使用 Bootstrap 下拉菜单最基本的方式是通过在 HTML 中添加 dropdown 类名和必要的数据属性。例如：
-- -------------------- ---- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- ----------------------- ---------------------- -------------------- ----------------------
----
---------
---- --------------------- -------------------------------------
-- --------------------- ----------- -----
-- --------------------- ----------- -----
-- --------------------- ----------- -----
------
------上面的代码创建了一个基本的下拉菜单，包含一个触发按钮和下拉菜单内容。当用户点击按钮时，下拉菜单会展示出来。
下拉菜单触发按钮需要添加 dropdown-toggle 类名，并设置 data-toggle="dropdown" 数据属性，以及给下拉菜单添加 dropdown-menu 类名。此外，为了让屏幕阅读器能够访问到下拉菜单，还需要通过 aria-haspopup 和 aria-expanded 数据属性来告诉它们下拉菜单的状态。
下拉菜单方向
默认情况下，下拉菜单会向下展示。如果需要改变方向，可以使用 dropdown-menu-right 类名将其右对齐或者添加 dropup 类名将其向上展示。例如：
-- -------------------- ---- -------
---- ------------------
---- -----------------
------- ---------- ------------- ---------------- ------------- ------------------------ ---------------------- -------------------- ----------------------
----
---------
---- --------------------- --------------------------------------
-- --------------------- ----------- -----
-- --------------------- ----------- -----
-- --------------------- ----------- -----
------
------
---- --------------- --------
------- ---------- ------------- ---------------- ------------- ------------------------ ---------------------- -------------------- ----------------------
----
---------
---- --------------------- --------------------------------------
-- --------------------- ----------- -----
-- --------------------- ----------- -----
-- --------------------- ----------- -----
------
------
---- --------------- ---------------------
------- ---------- ------------- ---------------- ------------- ------------------------ ---------------------- -------------------- ----------------------
---
---------
---- --------------------- --------------------------------------
-- --------------------- ----------- -----
-- --------------------- ----------- -----
-- --------------------- ----------- -----
------
------
------上面的代码展示了三种不同方向的下拉菜单，其中第一个是默认的向下展示，第二个使用了 dropup 类名向上展示，第三个使用了 dropdown-menu-right 类名进行右对齐。
下拉菜单分割线和头部
如果需要在下拉菜单中添加分割线或者头部信息，可以使用 dropdown-divider 和
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3762