全局CSS样式
1. 可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式,示例如下：
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
注意：
- 导航和导航条组件只支持
<button>元素 - 如果
<a>元素被作为按钮使用 ，并用于在当前页面触发某些功能，务必为其设置role="button"属性 - 尽可能使用
<button>元素来获得在各个浏览器上获得相匹配的绘制效果
2. 按钮颜色
通过6种预定义样式来控制按钮颜色，示例如下：
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
效果如下：
color.png
3. 按钮大小
使用.btn-lg、.btn-sm 或.btn-xs 就可以获得不同尺寸的按钮，示例如下：
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
</p>
效果如下：
尺寸.png
4. 块级元素
给按钮添加.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
效果如下：
block.png
5. 按钮状态
- 激活状态
对于<button>元素，是通过:active状态实现的。对于<a>元素，是通过.active类实现的
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<br>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
效果如下：
active.png
- 禁用状态
为 <button> 元素添加 disabled 属性，使其表现出禁用状态
为基于<a>元素创建的按钮添加.disabled类
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
效果如下：
disabled.png
按钮组
1. 基本实例
通过按钮组容器把一组按钮放在同一行里
<div class="btn-group" role="group" >
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
效果如下：
btn-group.png
2.按钮工具栏
把一组 <div class="btn-group">组合进一个 <div class="btn-toolbar">中就可以做成更复杂的组件
<div class="btn-toolbar" role="toolbar">
<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>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
</div>
效果如下：
btn-toolbar.png
3. 尺寸
<div class="btn-group btn-group-lg">
<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>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-default">按钮 9</button>
</div>
效果如下：
btn-group-*.png
4. 垂直排列
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" 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-vertical.png
