Bootstrap按鈕菜單 · 致力于web前端技術撰寫

### 按鈕下拉菜單向按鈕添加下拉菜單，只需要簡單地在在一個?.btn-group?中放置按鈕和下拉菜單即可 ~~~ <!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="btn-group btn-group-lg"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle = "dropdown">按鈕菜單 <span class = "caret"></span> </button> <ul class="dropdown-menu" role = "menu"> <li role = "presentation"><a href="#">子菜單1</a></li> <li role = "presentation"><a href="#">子菜單2</a></li> <li role = "presentation"><a href="#">子菜單3</a></li> <li role = "presentation"><a href="#">子菜單4</a></li> </ul> </div> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle = "dropdown">按鈕菜單 <span class = "caret"></span> </button> <ul class="dropdown-menu" role = "menu"> <li role = "presentation"><a href="#">子菜單1</a></li> <li role = "presentation"><a href="#">子菜單2</a></li> <li role = "presentation"><a href="#">子菜單3</a></li> <li role = "presentation"><a href="#">子菜單4</a></li> </ul> </div> </body> </html> ~~~ 此處我們未使用div class = "dropdown"，盡管dropdown也可以實現按鈕下拉菜單，但是dropdown是塊級顯示的。而.btn-group 的display是inline-block. 效果： ![](https://box.kancloud.cn/2016-04-07_570603f69e447.jpg) ### 分割的按鈕下拉菜單使用兩個Button，一個顯示內容，另一個用來顯示下拉功能 ~~~ <body style="padding: 20px;"> <div class="btn-group btn-group-lg"> <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" role = "menu"> <li role = "presentation"><a href="#">子菜單1</a></li> <li role = "presentation"><a href="#">子菜單2</a></li> <li role = "presentation"><a href="#">子菜單3</a></li> <li role = "presentation"><a href="#">子菜單4</a></li> </ul> </div> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-warning">按鈕菜單</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> </button> <ul class="dropdown-menu" role = "menu"> <li role = "presentation"><a href="#">子菜單1</a></li> <li role = "presentation"><a href="#">子菜單2</a></li> <li role = "presentation"><a href="#">子菜單3</a></li> <li role = "presentation"><a href="#">子菜單4</a></li> </ul> </div> </body> ~~~ 效果： ![](https://box.kancloud.cn/2016-04-07_570603f6adf1b.jpg) ### 按鈕上拉菜單只需要在.btn-group容器中添加.dropup即可。 ~~~ <body style="padding: 200px;"> <div class="btn-group btn-group-lg dropup"> <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" role = "menu"> <li role = "presentation"><a href="#">子菜單1</a></li> <li role = "presentation"><a href="#">子菜單2</a></li> <li role = "presentation"><a href="#">子菜單3</a></li> <li role = "presentation"><a href="#">子菜單4</a></li> </ul> </div> <div class="btn-group btn-group-lg dropup"> <button type="button" class="btn btn-warning">按鈕菜單</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> </button> <ul class="dropdown-menu" role = "menu"> <li role = "presentation"><a href="#">子菜單1</a></li> <li role = "presentation"><a href="#">子菜單2</a></li> <li role = "presentation"><a href="#">子菜單3</a></li> <li role = "presentation"><a href="#">子菜單4</a></li> </ul> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f6c0ae7.jpg)