Bootstrap给按钮提供了很丰富的样式,以及组合,根据不同的需求,可以灵活定制自己想要得到的样式。在第四课中,我们介绍了一组按钮添加.btn-group类,使一组按钮组合起来成为一个小的功能按钮集,这个非常实用,有兴趣的可以去看一看。(
Bootstrap教程第四课:制作一组功能图标按钮)
这节在第四节的基础上,来介绍更多的按钮组合样式。
如果我们有几个按钮组合,我们可以使用.btn-toolbar类将这些.btn-group包裹起来,这就组成了几组功能按钮的集合,代码示例如下:
如果要控制一组按钮图标的大小,可以在.btn-group的类上继续添加上 .btn-group-lg 等,就可以实现:
.btn-group-lg 大
.btn-group-sm 小
.btn-group-xs 更小
代码示例如下:
可以将一下下拉菜单组.btn-group放到另一个.btn-group中,实现按钮组合功能,代码示例如下:
如果要实现垂直组合的按钮菜单功能,只需要将最外层的.btn-group改成.btn-group-vertical即可,代码示例如:
这节在第四节的基础上,来介绍更多的按钮组合样式。
如果我们有几个按钮组合,我们可以使用.btn-toolbar类将这些.btn-group包裹起来,这就组成了几组功能按钮的集合,代码示例如下:
样式效果:<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">左边</button> <button type="button" class="btn btn-default">中间</button> <button type="button" class="btn btn-default">右边</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">左边</button> <button type="button" class="btn btn-default">中间</button> <button type="button" class="btn btn-default">右边</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">左边</button> <button type="button" class="btn btn-default">中间</button> <button type="button" class="btn btn-default">右边</button> </div> </div>
如果要控制一组按钮图标的大小,可以在.btn-group的类上继续添加上 .btn-group-lg 等,就可以实现:
.btn-group-lg 大
.btn-group-sm 小
.btn-group-xs 更小
代码示例如下:
效果截图:<div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">左边</button> <button type="button" class="btn btn-default">中间</button> <button type="button" class="btn btn-default">右边</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">左边</button> <button type="button" class="btn btn-default">中间</button> <button type="button" class="btn btn-default">右边</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">左边</button> <button type="button" class="btn btn-default">中间</button> <button type="button" class="btn btn-default">右边</button> </div> </div>
可以将一下下拉菜单组.btn-group放到另一个.btn-group中,实现按钮组合功能,代码示例如下:
样式效果:<div class="btn-group"> <button class="btn btn-default" type="button">1</button> <button class="btn btn-default" type="button">2</button> <div class="btn-group"> <button class="btn btn-default" data-toggle="dropdown">下拉菜单 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">下拉1</a></li> <li><a href="">下拉2</a></li> </ul> </div> </div>
如果要实现垂直组合的按钮菜单功能,只需要将最外层的.btn-group改成.btn-group-vertical即可,代码示例如:
效果如下:<div class="btn-group-vertical"> .... </div>