<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
按钮组也是一个独立的组件,所以可以找到对应的源码文件:
☑ LESS
版本:对应的源文件为 buttons.less
☑ Sass
版本:对应的源文件为 _buttons.scss
☑ CSS 版本:对应 bootstrap.css
文件第3131行~第3291行
使用方法
按钮组和下拉菜单组件一样,需要依赖于 button.js
插件才能正常运行。不过我们同样可以直接只调用 bootstrap.js
文件。因为这个文件已集成了 button.js 插件功能。
使用一个名为“btn-group
”的容器,把多个按钮放到这个容器中。如下所示:
<body>
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button>
</div>
<script src="http://img.mukewang.com/down/53c6484f00013d9300000000.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
除了可以使用 <button>
元素之外,还可以使用其他标签元素,比如 <a>
标签。唯一要保证的是:不管使用什么标签,“.btn-group
”容器里的标签元素需要带有类名“.btn
”。
我们平常制作网页时每个按钮都是带有圆角,而在按钮组中的按钮,除了第一个和最后一个具有边上的圆角之外,其他的按钮没有圆角,它是怎么实现的呢?
- 默认所有按钮都有圆角
- 除第一个按钮和最后一个按钮(下拉按钮除外),其他的按钮都取消圆角效果
- 第一个按钮只留左上角和左下角是圆角
- 最后一个按钮只留右上角和右下角是圆角
按钮工具栏
将按钮组分组排列
在一起,只需要将按钮组“btn-group
”按组放在一个大的容器“btn-toolbar
”中,如下所示:
<div class="btn-toolbar&#