Bootstrap按钮元素使用方法

Bootstrap按钮元素样式

Bootstrap中，总共提供了六种按钮样式，分别是默认、主要、成功、信息、警告以及危险这几个样式，它们对应的类分别是btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger。
对应的颜色分别是白色、深蓝、绿色、浅蓝、橙色以及红色。
这几种颜色基本上满足大部分使用需求，当然，如果你认为还不够，也可以自定义自己的按钮颜色。

如何调用Bootstrap按钮元素

使用Bootstrap按钮元素非常简单，可以通过<a>标签或者<button>标签进行调用。
例如我们要调用“成功”样式的按钮元素，通过以下代码即可实现：<button class="btn btn-success">成功</button>同样的，你也可以对<a>标签进行调用：<a href="#" class="btn btn-success">成功</a>

如何修改Bootstrap按钮元素尺寸

为了让大家使用方便，Bootstrap按钮元素还提供了尺寸类来快速定义按钮尺寸。
尺寸类从大到小分别是：btn-lg、btn-sm、btn-xs。
当然，除此之外，你还能自己定义自己的尺寸。
另外，如果你想要让自己的按钮适应屏幕尺寸（比如达到响应式的效果），那么可以在按钮元素中引入块级样式，从而使得按钮适应整个屏幕的尺寸，调用方式如下：<button class="btn btn-primary btn-block">块级按钮元素</button>

Bootstrap按钮元素激活状态

如果你想要让自己的按钮实现激活状态的效果，也不需要自己另外写样式，直接引入active类即可。<button class="btn btn-primary active">激活按钮</button>

Bootstrap按钮禁用状态

当你想让一个按钮显示出禁用状态的样式，同样也只要调用disabled类即可，不需要自己另外再写。<button class="btn btn-primary disabled">禁用按钮</button>

写在最后

不得不说，Bootstrap按钮元素的样式还是非常丰富多彩的，足以满足日常所需。
另外，我们推荐按钮样式最好还是采用<button>标签而非<a>标签，从而避免浏览器不兼容的问题。