1.编程: 编写一个标准的下拉菜单，要求对data-属性有较深的理解
2.编程: 使用按钮组编写一个分裂式下拉菜单，了解这类常用控件编写的基本思路
实例
<!doctype html> <html lang="en"> <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"> <title>作业</title> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <script src="../jquery-3.3.1.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </head> <body> <h3>标准的下拉菜单</h3> <div class="btn-group col-md-2"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">按钮 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">PHP</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="" class="divider"></a></li> </ul> </div> <br> <hr> <h3>一个分裂式下拉菜单</h3> <div class="btn-group"> <button type="button" class="btn btn-info">分裂下拉菜单</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">PHP1</a></li> <li><a href="#">CSS1</a></li> <li><a href="#">JavaScript1</a></li> <li><a href="" class="divider"></a></li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
