Bootstrap入門（十）組件4：按鈕組與下拉菜單結合
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>當中添加）
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script>
1.按鈕組與下拉菜單
把任意一個按鈕放入
.btn-group 中，然后加入適當的菜單標簽，就可以讓按鈕作為菜單的觸發器了。 只要改變一些基本的標記，就能把按鈕變成下拉菜單的開關。
<div class='btn-group'> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> <div class="btn-group"> <button type='button' class="btn btn-default dropdown-toggle" data-toggle='dropdown'> 下拉菜單 <span class='caret'></span> </button> <ul class='dropdown-menu' role='menu'> <li><a href="#">dianwo1</a> <li><a href="#">dianwo2</a> </ul> </div> </div>
效果：
2.顏色
修改button的class，可以改變按鈕式下拉菜單的顏色，（詳細可以看入門（六）按鈕與圖片）
比如我們添加 btn-info屬性
<div class='btn-group'> <button type="button" class="btn btn-info dropdown-toggle" data-toggle='dropdown'> xiala1 <span class="caret"></span> </button> <ul class='dropdown-menu' role='menu'> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div>
效果
3.分裂式下拉菜單
修改上一段代碼，用一個新的button來代替span
<div class='btn-group'> <button type="button" class="btn btn-info dropdown-toggle">xiala2</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><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div>
效果，明顯是分裂開來了
4.大小
跟前面的一樣，響應式，自然也有不同的大小（btn-lg 、btn-sm 、btn-xs ）
（如果是運用在分裂式下拉菜單中，需要在兩個button都添加屬性，否則兩個的大小會不一樣大的）
<div class='btn-group'> <button type="button" class="btn btn-info dropdown-toggle btn-lg" data-toggle='dropdown'> xiala1 <span class="caret"></span> </button> <ul class='dropdown-menu' role='menu'> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div> <div class='btn-group'> <button type="button" class="btn btn-info dropdown-toggle" data-toggle='dropdown'> xiala1 <span class="caret"></span> </button> <ul class='dropdown-menu' role='menu'> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div> <div class='btn-group'> <button type="button" class="btn btn-info dropdown-toggle btn-sm" data-toggle='dropdown'> xiala1 <span class="caret"></span> </button> <ul class='dropdown-menu' role='menu'> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div> <div class='btn-group'> <button type="button" class="btn btn-info dropdown-toggle btn-xs" data-toggle='dropdown'> xiala1 <span class="caret"></span> </button> <ul class='dropdown-menu' role='menu'> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div>
效果：
5.內容向上
有時候按鈕式處於下方的，希望點擊后內容是向上顯示的
修改div的class，添加一個dropup屬性
<div class='btn-group dropup'> <button type="button" class="btn btn-info dropdown-toggle" data-toggle='dropdown'> xiala1 <span class="caret"></span> </button> <ul class='dropdown-menu' role='menu'> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div>
效果
