Bootstrap 4 是一个流行的前端框架，它提供了丰富的组件和工具来帮助开发者快速构建响应式网站。下拉菜单是导航栏中常用的元素，Bootstrap 4 提供了灵活的下拉菜单组件，可以轻松打造美观且响应式的导航菜单。
下拉菜单基础
在 Bootstrap 4 中，下拉菜单由几个主要的 HTML 元素组成：
.dropdown
：表示下拉菜单的容器。
.dropdown-menu
：包含下拉菜单的链接和按钮。
.dropdown-toggle
：用于触发下拉菜单的按钮。
创建下拉菜单
以下是一个简单的下拉菜单示例：
在上面的代码中，我们创建了一个包含一个按钮和一个下拉菜单的
.dropdown
容器。按钮用于触发下拉菜单，下拉菜单中包含了三个链接。
添加分割线
如果你想要在下拉菜单中添加一个分割线，可以使用
.dropdown-divider
类：
响应式下拉菜单
Bootstrap 4 支持响应式下拉菜单。你可以通过添加
.dropdown-menu-right
类来使下拉菜单显示在按钮的右侧：
使用下拉菜单组
如果你需要在下拉菜单中包含多个分组，可以使用
.dropdown-header
类来表示分组标题：
添加图标
在链接或按钮旁边添加图标，可以使下拉菜单更加美观和直观。你可以使用 Font Awesome 或其他图标库来实现：
确保你已经将图标库的 CSS 文件链接到了你的项目中。
总结
通过以上步骤，你可以轻松地在 Bootstrap 4 中创建美观且响应式的下拉菜单。这些下拉菜单可以用于网站的各种导航场景，提供用户友好的交互体验。记住，实践是学习的关键，尝试自己动手实现不同的下拉菜单样式，以更好地掌握这一技能。