作者:
WangMin
格言:努力做好自己喜欢的每一件事
可作为按钮使用的标签或元素
为<a>、<button>或<input>元素添加按钮类（button class）都可使用 Bootstrap 提供的样式。
<a href="" class="btn btn-default" role="button">link 链接</a>
<button class="btn btn-default" type="submit">button 按钮</button>
<input type="button" class="btn btn-default" value="input">
<input type="submit" class="btn btn-default" value="submit">
注意 ：
（1）虽然按钮类可以应用到<a>和<button>元素上，但是，导航和导航条组件只支持<button>元素。
（2）如果<a>元素被作为按钮使用， 并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，那么，必须给 a 标签添加role="button"属性。
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<button type="button" class="btn btn-default">默认样式</button>
<button type="button" class="btn btn-primary">首选项</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">一般信息</button>
<button type="button" class="btn btn-warning">警告样式</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">link 链接</button>
尺寸
如果需要不同尺寸的按钮，使用.btn-lg、.btn-sm或.btn-xs就可以获得不同尺寸的按钮。
<p>
<button type="button" class="btn btn-primary btn-lg">（首选项）大按钮</button>
<button type="button" class="btn btn-default btn-lg">（默认样式）大按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary">（首选项）默认尺寸1</button>
<button type="button" class="btn btn-default">（默认样式）默认尺寸2</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（首选项）小按钮</button>
<button type="button" class="btn btn-default btn-sm">（默认样式）小按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（首选项）超小按钮</button>
<button type="button" class="btn btn-default btn-xs">（默认样式）超小按钮</button>
</p>
通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
激活状态
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于<button>元素，是通过:active状态实现的。对于<a>元素，是通过.active类实现的。
1. button 元素
由于:active是伪状态，按下就会处于激活状态，但是如果需要让 button呈现出同样外观的时候可以添加.active类。
<button type="button" class="btn btn-primary btn-lg active">primary button</button>
激活后的状态 ：
2. 链接（<a>）元素
可以为基于<a>元素创建的按钮添加.active类。
<a href="javascript:;" class="btn btn-primary btn-lg active" role="button">primary button</a>
激活后的状态 ：
禁用状态
通过为按钮的背景设置opacity属性就可以呈现出无法点击的效果。
1. button 元素
为<button>元素添加disabled属性，让按钮表现出禁用状态。
<button type="button" class="btn btn-primary btn-lg active" disabled="disabled">primary button</button>
注意：跨浏览器兼容性。如果为<button>元素添加disabled属性，Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有阴影，
目前还没有解决办法。
2. 链接（<a>）元素
给<a>元素创建的按钮添加.disabled类。
<a href="javascript:;" class="btn btn-primary btn-lg active disabled" role="button">primary button</a>
注意：a 标签的链接的原始功能不受影响，如果不需要链接功能，建议通过 JavaScript 代码来禁止链接的原始功能。
就先分享到这里!! :smile: 后续继续更新!!
