下拉菜单可以有多种实现途径，可以编写CSS代码，可以借助layui，也可以借助bootstrap插件等等
在使用bootstrap插件的前提下，将下拉列表的按钮和下拉菜单包含在dropdown中，或者另外声明position：relative元素，可以从<a>或者<button>触发下拉菜单，任何一个btn按钮都可以定义变更为下拉框挺
按钮与下拉菜单是密切相关的，下面看一下如何用按钮来展示下拉框：
（1）单一按钮的下拉菜单：利用两个<button>元素做下拉菜单
（2）分裂式按钮下拉菜单：利用单个按钮下拉菜单近似的标记创建分裂式下拉菜单，注意添加了dropdowm-toggle-split插入此符号为下拉选项作适当的间隔处理，我们使用这个额外的class样式，将插入符号两边水平padding减少了25%，并移除了为默认下拉菜单添加的margin-left属性，这些额外的更改将插入符号集中在分裂式按钮中，并在主按钮中，并在主按钮旁边提供了适合的点击空间
下拉菜单除了可以向下展开，还可以向上展开，可以向右展开，可以向左展开
一般情况下，一个下拉菜单自动从顶部和左侧的父级100%定位，添加dropdown-menu-right到dropdown-menu右侧轻松对齐下拉菜单
上面一直在介绍下拉菜单的下拉展开，却没有说到菜单标题，现在说一下添加标题来标记任何下拉菜单中的操作部分，其实非常简单，使用一个标题标签就可以完成了
最后还要注意菜单分隔与分割线的问题，使用分隔符分割相关的单子项，呈现出分组和分割线效果，例如：使用dropdown-divider分隔符
版权声明：本文为weixin_44583881原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。