如何利用Bootstrap样式制作美观的下拉菜单

如何利用Bootstrap样式制作美观的下拉菜单

Bootstrap里自带了下拉菜单样式类，可以直接使用样式类生成下拉菜单。其中，样式类有dropdown和dropdown-menu，用于控制下拉菜单的点击处和下拉菜单子项。JavaScript中的方法dropdown()，初始化下拉菜单。下面利用一个实例说明利用Bootstrap样式制作美观的下拉菜单，操作如下：

第一步，在Web项目指定目录下，新建静态页面dropdown.html，并引入Bootstrap样式文件和JavaScript文件，还有jquery核心文件，如下图所示：

第二步，在插入div和button标签元素，button标签设置class为btn btn-warning，添加属性data-toggle="dropdown"，如下图所示：

第三步，在button下方添加一个无序列表，无序列表ul上加上class类dropdown-menu，如下图所示：

第四步，保存代码在浏览器上查看页面效果，可以看到一个按钮上显示“===请选择===”，如下图所示：

第五步，点击按钮，就可以发现出现了下拉子项，这里使用的是人名字，如下图所示：

第六步，在jquery初始化函数内编写按钮点击事件，调用下拉菜单初始化方法，如下图所示：