awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写,没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动,即可完成漂亮的美化效果。
使用方法
使用这个复选框和单选按钮美化插件需要引入awesome-bootstrap-checkbox.css文件,或将awesome-bootstrap-checkbox.scss引入到你的SCSS文件中。
HTML结构
原生的Bootstrap复选框的代码类似下面的样子:
...
Check me out
...
我们需要做下面的一些轻微修改:
...
Check me out
...
上面的代码就可以使复选框得到美化效果。注意元素不能嵌套在元素中。
另外,在Opera 12中需要为元素添加class styled。
单选按钮
单选按钮的HTML结构如下:
...
One
Two
...
颜色控制
你可以使用checkbox-primary,checkbox-danger,或radio-info等class来修改复选框或单选按钮的颜色。
checkbox-circle是圆形的复选框。
checkbox-single和radio-single是不带文本的复选框和单选按钮。