Bootstrap 4 下拉菜单

下拉菜单可以用于隐藏和分组菜单项,是以列表格式显示链接的上下文菜单


基本的下拉菜单

Bootstrap 提供了 .dropdown 、.dropdown-item 、 .dropdown-menu css 类用于创建一个下拉菜单



下拉菜单中的分割线

使用 .dropdown-divider 可以在下拉菜单中创建一个水平的分割线



设置下拉菜单中的标签

使用 .dropdown-header 可以在下拉菜单中添加标签



下拉菜单中的可用项与禁用项


添加 .active 会让下拉菜单的选项高亮显示(添加蓝色背景)

添加 .disabled 则可以禁用下拉菜单的选项


右对齐的下拉菜单

想让下拉菜单右对齐,可以在 .dropdown-menu 元素上添加 .dropdown-menu-right



向上弹出的下拉菜单

默认情况下,下拉菜单是向下弹出的

如果想要向上弹出,则可以使用 .dropup 代替 .dropdown



按钮中的下拉菜单

可以在按钮中添加下拉菜单


本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!