在前面学习过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>标签,从而避免浏览器不兼容的问题。
发表回复