学完上一节Bootstrap（三）: 表单点击打开链接，本节继续学习网页布局中的另一个重要的元素：按钮。
为了便于对按钮的样式分析，首先给接下去所有的按钮放在一个well类的div中进行比较，这个well类也是在bootstrap中定义的，目的是使该容器内容凹陷显示或者是有插图的效果。直接的，我们就来看不同button类的代码和效果图，然后再进行分析。
<div class="well container">
<button class="btn btn-default">点我</button>
<button class="btn btn-primary">点我</button>
<button class="btn btn-danger">点我</button>
<button class="btn btn-warning">点我</button>
<button class="btn btn-info">点我</button>
</div>效果图：
①btn-default默认按钮类；②btn-primary页面主色调类；③btn-danger危险类；④btn-warning警示类；⑤btn-info提示类。这几个不同的类主要就是改变了按钮的颜色。另外，这些类还可以作用在别的元素上。比如，定义一个名为“百度测试”的链接，给它加载btn-primary类。
<div>
<a class="btn btn-primary" href="http://www.baidu.com">百度测试</a>
</div>效果图：
这个链接会以一个button的样式显示，点击这个按钮，会跳转到相应的链接中去。同样，上述样式还可以作用于一个input元素（当一个input元素的类型为submit时，它的内容要被写在value里面）。
<input type="submit" class="btn btn-danger" value="确认提交">效果图：
如果，需要改变按钮的大小，在bootstrap中也设置了相应的类btn-lg（大）、默认（中）、btn-sm（小）、btn-xs（极小）。
<button class="btn btn-default btn-lg">点我</button>
<button class="btn btn-primary btn-sm">点我</button>
<button class="btn btn-danger btn-xs">点我</button>效果图：
若想使当前的这个button占据母元素的整宽，我们还可以引入btn-block类：
<button class="btn btn-info btn-block">点我</button>效果图：
当选中某个按钮时，样式有所改变，可以使用bootstrap中的active类：
<button class="btn btn-default">张三</button>
<button class="btn btn-default active">李四</button>
<button class="btn btn-default">王五</button>效果图：
小插曲：想要设置某个按钮为不可被选中的按钮，可以直接使用html中的用法，给这个button加入一个disabled="disabled"
<button disabled="disabled" class="btn btn-info">王五</button>效果图：
最后，再写一点关于按钮组的知识。它与按钮相关联，但又不是按钮本身。什么是按钮组？也就是把几个按钮放在一块的效果，这里引入一个btn-group类就行。定义一个该类的div，把你想要作为按钮组的内容放在一块，就形成了一个按钮组。
<div class="btn-group">
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
</div>效果图：
各个按钮之间的间隙就没有了。如果想同时写入两个按钮组，只需再按上述方法，写入另一个按钮组，然后把这两个按钮组包含在一个定义为btn-toolbar（工具栏）的容器里即可。
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
</div>
<div class="btn-group">
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
</div>
</div>效果图：
与改变每个按钮的大小类似，我们也可以调整整个按钮组的大小。这里，需要用到btn-group-lg/sm/xs这个类。
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
</div>
<div class="btn-group btn-group-sm">
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
</div>
</div>效果图：
这样就不用一个一个的去改变某个按钮的大小，直接一次性改变按钮组的大小就可以了。
现在，一个按钮组中的各个按钮的排列是横向的，如何使它们纵向排列呢？bootstrap中也定义了一个这样的类：btn-group-vertical。
<div class="btn-group btn-group-vertical">
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
<div class="btn btn-default">点我</div>
</div>效果图：
在这里，每个按钮右边的角都是尖尖的，是由于btn-group这个类造成的，引入了btn-group-vertical类后，可以不添加btn-group，这样每个按钮的各个角就都会以圆弧形呈现。