一、以下代码是bootstrap中一个标准的下拉菜单：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>下拉菜单</title> </head> <body> <!-- 先创建一个下拉菜单的容器 --> <div style="margin-top: 200px;"> <!-- 按钮 --> <button type="button" class="btn btn-default" data-toggle="dropdown"> 前端开发<span></span> </button> <ul> <!-- 下拉框小标题 --> <li>常用技术</li> <li href="">HTML5</li> <li href="">CSS3</li> <li href="">JavaScript</li> <!-- 分隔条 --> <li></li> <li href="">JQuery</li> <li href="">BootStrap</li> </ul> </div> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
说明：这是一个标准的下拉菜单组件，其中最重要的是data-toggle="dropdown"属性的设置，把下拉菜单与按钮关联起来
二、以下代码是分列式下拉菜单：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>按钮工具条和按钮组</title> </head> <body> <!-- 创建一个按钮工具条 --> <div> <!-- 按钮组 --> <div class="btn-group btn-group-vertical btn-group-sm"> <button type="button" class="btn btn-default">编辑</button> <button type="button" class="btn btn-default">删除</button> <button type="button" class="btn btn-default">撤销</button> </div> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-info">复制</button> <button type="button" class="btn btn-success">粘贴</button> <button type="button" class="btn btn-warning">剪切</button> </div> <!-- 分裂式下拉菜单 --> <div> <button type="button" class="btn btn-info">前端技术</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <div class="caret"></div> </button> <ul> <!-- 下拉框小标题 --> <li>常用技术</li> <li href="">HTML5</li> <li href="">CSS3</li> <li href="">JavaScript</li> <!-- 分隔条 --> <li></li> <li href="">JQuery</li> <li href="">BootStrap</li> </ul> </div> </div> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
说明：分列式下拉菜单把小三角符号放在一个div中，通过按钮中类样式dropdown-toggle以及属性data-toggle="dropdown"实现分裂式的下拉菜单。
