學習Bootstrap元件之下拉菜單_javascript技巧
- WBOY原創
- 2016-05-16 15:48:281500瀏覽
Bootstrap 是由Twitter 工程師推出的基於HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架，我們可以把它想像成一個定義了很多效果的CSS與JS的庫，庫裡面已經定義好了各種組件的顯示效果與動畫。
.dropdown－設定父元素為下拉式選單元件，向下彈出子選單；
.dropup－設定父元素為下拉式選單元件，向上彈出子選單；
.dropdown-toggle－設定按鈕為下拉式選單切換按鈕；
.dropdown-menu－設定ul元素為下拉式選單；
.dropdown-menu-right－將選單右對齊；
.pull-right－將選單元件的父元素右對齊；
.dropdown-header－為選單項目新增標題；
.divider－為選單項目新增分割線；
.disabled－停用對應選單項目；
實作程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>CSS全局样式_下拉菜单</title> <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> <script src="jquery-1.11.1.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="dropdown pull-right"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">中超Big4</li> <li><a href="#" role="menuitem">上海上港</a></li> <li><a href="#" role="menuitem">广州恒大</a></li> <li><a href="#" role="menuitem">山东鲁能</a></li> <li class="disabled"><a href="#" role="menuitem">北京国安</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">中超5-8</li> <li><a href="#" role="menuitem">上海申花</a></li> <li><a href="#" role="menuitem">江苏舜天</a></li> <li><a href="#" role="menuitem">长春亚泰</a></li> <li><a href="#" role="menuitem">河南建业</a></li> </ul> </div> </div> </body> </html>
實現效果：
以上就是本文的全部內容，希望對於大家使用Bootstrap元件製作下拉式選單有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn