Bootstrap入门（十）组件4：按钮组与下拉菜单结合
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>
效果
