收藏
批改状态：未批改
老师批语：
首先bootstrap的组件都是有一个大容器，然后里面有多个元素，通过class和属性使这些元素产生关联，从而实现一定的功能。
下拉列表的大容器是类dropdown，其组成是按钮+ul，在按钮上有两个重要的属性，一个是类dropdown-toggle，实现下拉按钮的样式，另一个是属性 dropdown-toggle=“dropdown”，实现js的下拉操作；ul必须加上一个dropdown-menu的类。
1.标准的下拉列表由一个按钮组成，如下：
<!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"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>下拉菜单</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <!--先创建一个下拉菜单的容器--> <div class="dropdown"> <!--按钮+列表--> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 前端开发<span class="caret"></span> </button> <ul class="dropdown-menu"> <!--下拉表头--> <li class="dropdown-header">常用技术</li> <li><a href="">HTML5</a></li> <li><a href="">CSS3</a></li> <li><a href="">JavaScript</a></li> <!--分割条divider --> <li class="divider"></li> <li><a href="">jQuery</a></li> <li><a href="">Bootstrap</a></li> </ul> </div> </div> </div> </div> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
点击 "运行实例" 按钮查看在线实例
2.分列式下拉列表
分列式下拉列表由两个按钮组成，大容器是button-group，案例如下：
<!--分列式下拉菜单--> <div class="btn-group"> <button class="btn btn-info">前端课程</button> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <div class="caret"></div> </button> <ul class="dropdown-menu"> <li class="dropdown-header">常用技术</li> <li><a href="">HTML5</a></li> <li><a href="">CSS3</a></li> <li><a href="">JavaScript</a></li> <!--分隔条--> <li class="divider"></li> <li><a href="">jQuery</a></li> <li><a href="">Bootstrap</a></li> </ul> </div>
点击 "运行实例" 按钮查看在线实例
总结：1.按钮上必须加上dropdown-toggle这个属性，才能实现和ul列表的关联
2.组件必须有有一个大容器，否则实现不了bootstrap的样式
3.ul要加上dropdown-menu这个类，才可以实现下拉的样式
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
