Bootstrap下拉菜單 · 致力于web前端技術撰寫

使用下拉菜單（Dropdown）插件，可以向任何組件（比如導航欄、標簽頁、膠囊式導航菜單、按鈕等）添加下拉菜單。如果想要單獨引用該插件的功能，那么需要引用?dropdown.js。或者可以引入bootstrap.js或壓縮版的bootstrap.min.js。 ### 用法：通過 data 屬性：向鏈接或按鈕添加?data-toggle="dropdown"?來切換下拉菜單 ~~~ <!doctype html> <html lang="en"> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>BootstrapDemo</title>  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> <script type="text/javascript" src = "../jquery-1.11.2.min.js"></script> <script type="text/javascript" src = "../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> </head> <body style="padding: 20px;"> <div class="dropdown"> <a data-toggle = "dropdown" href="#">下拉菜單</a> <ul class="dropdown-menu" role = "menu"> <li><a href="#">測試工程師</a></li> <li><a href="#">開發工程師</a></li> <li>銷售經理</li> </ul> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f5e2f85.jpg) 我們不使用a標簽時，可以看出，排版和使用了a標簽是不一樣的，通過審查元素可以看出，css中對.dropdown-menu>li>a是設置了樣式的。 ~~~ .dropdown-menu>li>a?{ ? ? display:?block; ? ? padding:?3px 20px; ? ? clear:?both; ? ? font-weight:?400; ? ? line-height:?1.42857143; ? ? color:?#333; ? ? white-space:?nowrap; } .dropdown-menu>li>a:focus,?.dropdown-menu>li>a:hover?{ ? ? color:?#262626; ? ? text-decoration:?none; ? ? background-color:?#f5f5f5; } ~~~ ### 分割線：給li加上class = "divider" ~~~ <body style="padding: 20px;"> <div class="dropdown"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜單 <span class = "caret"></span> </button>  <ul class="dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu">  <li role = "presentation"><a href="#">測試工程師</a></li> <li role = "presentation"><a href="#">開發工程師</a></li> <li role = "presentation"><a href="#">銷售經理</a></li> <li role = "presentation" class="divider"></li> <li role = "presentation"><a href="#">質量工程師</a></li> <li role = "presentation"><a href="#">項目經理</a></li> </ul> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f5f3792.jpg) ### 對齊：通過給.dropdown-menu 加上class pill-right可以使其向右對齊。 ~~~ <body style="padding: 20px;"> <div class="dropdown"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜單 <span class = "caret"></span> </button>  <ul class="dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu">  <li role = "presentation"><a href="#">測試工程師</a></li> <li role = "presentation"><a href="#">開發工程師</a></li> <li role = "presentation"><a href="#">銷售經理</a></li> <li role = "presentation" class="divider"></li> <li role = "presentation"><a href="#">質量工程師</a></li> <li role = "presentation"><a href="#">項目經理</a></li> </ul> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f610b24.jpg) ### 下拉菜單標題：通過給li添加class dropdown-header給下拉菜單的標簽區域添加標題（注意，li中不嵌套a標簽） ~~~ <body style="padding: 20px;"> <div class="dropdown"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜單 <span class = "caret"></span> </button>  <ul class="dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu">  <li role = "presentation" class="dropdown-header">下拉菜單標題</li> <li role = "presentation"><a href="#">測試工程師</a></li> <li role = "presentation"><a href="#">開發工程師</a></li> <li role = "presentation"><a href="#">銷售經理</a></li> <li role = "presentation" class="divider"></li> <li role = "presentation" class="dropdown-header">下拉菜單標題</li> <li role = "presentation"><a href="#">質量工程師</a></li> <li role = "presentation"><a href="#">項目經理</a></li> </ul> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f622406.jpg)