Bootstrap 教程第六课：各种按钮组合样式

Bootstrap给按钮提供了很丰富的样式，以及组合，根据不同的需求，可以灵活定制自己想要得到的样式。在第四课中，我们介绍了一组按钮添加.btn-group类，使一组按钮组合起来成为一个小的功能按钮集，这个非常实用，有兴趣的可以去看一看。（ Bootstrap教程第四课：制作一组功能图标按钮）

这节在第四节的基础上，来介绍更多的按钮组合样式。

如果我们有几个按钮组合，我们可以使用.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>

效果如下：