Bootstrap按钮元素使用方法

yibin 2015-09-18 网站运营 502

在前面学习过Bootstrap的框架排版、以及表格样式使用以后,接下来让我们看看在网站建设中最常用的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>标签,从而避免浏览器兼容问题


扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询