您的位置：首页 > Web前端 > BootStrap

Bootstrap入门（十）组件4：按钮组与下拉菜单结合

2016-09-11 00:28 861 查看

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>

效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航