收藏
批改狀態(tài)：未批改
老師批語：
一、以下代碼是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> <!-- 先創(chuàng)建一個下拉菜單的容器 --> <div style="margin-top: 200px;"> <!-- 按鈕 --> <button type="button" class="btn btn-default" data-toggle="dropdown"> 前端開發(fā)<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"屬性的設置，把下拉菜單與按鈕關聯(lián)起來
二、以下代碼是分列式下拉菜單：
<!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> <!-- 創(chuàng)建一個按鈕工具條 --> <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"實現(xiàn)分裂式的下拉菜單。
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
