下拉菜单是前端开发中常见的交互元素，用于显示隐藏的内容或选项。在 Bootstrap 5 中，下拉菜单的实现相对简单且功能强大。
基本使用
Bootstrap 5 提供了丰富的类和属性来创建和控制下拉菜单。首先，你需要一个触发下拉菜单的按钮或链接。
-- -------------------- ---- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- ----------------------- ------------------------- ----------------------
----
---------
--- --------------------- -------------------------------------
------ --------------------- ------------------------
------ --------------------- ---------------- ---------------
------ --------------------- ------------------ ---- -------------
-----
------上述代码中，data-bs-toggle="dropdown" 是关键属性，它指示浏览器当点击按钮时应显示下拉菜单。aria-expanded="false" 属性用于无障碍访问，表示当前下拉菜单是否展开。
菜单位置
默认情况下，下拉菜单会出现在触发按钮的下方。但是，你可以通过添加不同的类来改变其位置。
向上展开
-- -------------------- ---- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- ------------------------- ------------------------- ----------------------
----
---------
--- -------------------- ------------------ ---------------------------------------
------ --------------------- ------------------------
------ --------------------- ---------------- ---------------
------ --------------------- ------------------ ---- -------------
-----
------在这个例子中，dropdown-menu-up 类使下拉菜单向上展开。
右对齐
-- -------------------- ---- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- -------------------------- ------------------------- ----------------------
---
---------
--- -------------------- ------------------ ----------------------------------------
------ --------------------- ------------------------
------ --------------------- ---------------- ---------------
------ --------------------- ------------------ ---- -------------
-----
------dropdown-menu-end 类使下拉菜单右对齐。
动态内容
有时你可能需要根据用户的操作动态地更新下拉菜单的内容。可以使用 JavaScript 来实现这一功能。
-- -------------------- ---- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- ------------------------------ ------------------------- ----------------------
----
---------
--- --------------------- -------------------- --------------------------------------------
-----
------
--------
------------------------------------------------------------------------------ -------- -- -
--- -------- - -------------------------------------------
------------------ - -
------ --------------------- ------------ ----------
------ --------------------- ------------ ----------
--
---
---------在上面的例子中，当用户点击触发按钮时，JavaScript 会更新下拉菜单的内容。
禁用项目
你可以将某些下拉菜单项目设置为禁用状态，使其不可点击。
-- -------------------- ---- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- ------------------------------- ------------------------- ----------------------
----
---------
--- --------------------- ---------------------------------------------
------ --------------------- ------------------------
------ -------------------- --------- -----------------------
------ --------------------- ------------------ ---- -------------
-----
------在上述代码中，disabled 类用于禁用下拉菜单中的特定选项。
导航链接
你可以将下拉菜单用作导航的一部分，例如在一个导航栏中嵌入下拉菜单。
-- -------------------- ---- -------
---- ------------- ---------------- ------------ ----------
-- -------------------- ---------------
------- ---------------------- ------------- ------------------------- ----------------------------------- --------------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- -----------------------
--- -------------------
--- --------------- --------
-- ---------------- ----------- ----- ------------------------------------
-----
--- -----------------
-- ---------------- ---------------
-----
--- --------------- ----------
-- --------------- ---------------- -------- --------------------------- ------------- ------------------------- ----------------------
----
----
--- --------------------- -----------------------------------------
------ --------------------- ------------------------
------ --------------------- ---------------- ---------------
------ --------------------- ------------------ ---- -------------
-----
-----
-----
------
------这个例子展示了如何将下拉菜单嵌入到导航栏中，并且可以通过点击导航链接来展开或收起下拉菜单。
深色模式
Bootstrap 5 支持深色模式，你可以通过在 <body> 或 <html> 元素上添加 dark 类来启用深色主题。
<body class="bg-dark text-white"> <!-- 下拉菜单代码 --> </body>
这样会使整个页面，包括下拉菜单，都采用深色背景和浅色文字。
总结
以上就是关于 Bootstrap 5 下拉菜单的基本使用方法、位置调整、动态内容、禁用项目、导航链接以及深色模式的应用。通过这些技巧，你可以创建出功能丰富、样式美观的下拉菜单组件。