简要教程
awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写，没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动，即可完成漂亮的美化效果。
查看演示 下载插件
使用方法
使用这个复选框和单选按钮美化插件需要引入awesome-bootstrap-checkbox.css文件，或将awesome-bootstrap-checkbox.scss引入到你的SCSS文件中。
<link rel="stylesheet" href="css/awesome-bootstrap-checkbox.css"/>
复制代码
HTML结构
原生的Bootstrap复选框的代码类似下面的样子：
<form role="form">
...
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
...
</form>
复制代码
我们需要做下面的一些轻微修改：
<form role="form">
...
<div class="checkbox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">
Check me out
</label>
</div>
...
</form>
复制代码
上面的代码就可以使复选框得到美化效果。注意<input>元素不能嵌套在<label>元素中。
另外，在Opera 12中需要为<input>元素添加class styled。
<input type="checkbox" id="checkbox1" class="styled">
复制代码
单选按钮
单选按钮的HTML结构如下：
<form role="form">
...
<div class="radio">
<input type="radio" name="radio2" id="radio3" value="option1">
<label for="radio3">
One
</label>
</div>
<div class="radio">
<input type="radio" name="radio2" id="radio4" value="option2" checked>
<label for="radio4">
Two
</label>
</div>
...
</form>
复制代码
颜色控制
你可以使用checkbox-primary，checkbox-danger，或radio-info等class来修改复选框或单选按钮的颜色。
checkbox-circle是圆形的复选框。
checkbox-single和radio-single是不带文本的复选框和单选按钮。
本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/css3/ui-design/201508262476.html
