Bootstrap单选按钮和复选框美化特效

这是一款使用Font Awesome 字体图标来对Bootstrap复选框和单选按钮进行美化的CSS样式特效。

使用方法

在页面中引入bootstrap和Font Awesome字体图标文件，以及美化样式文件build.css文件。

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/build.css">
                

HTML结构

复选框的HTML结构如下：

<div class="checkbox">
    <input id="checkbox1" class="styled" type="checkbox">
    <label for="checkbox1">
        Default
    </label>
</div>
<div class="checkbox checkbox-primary">
    <input id="checkbox2" class="styled" type="checkbox" checked>
    <label for="checkbox2">
        Primary
    </label>
</div>
<div class="checkbox checkbox-success">
    <input id="checkbox3" class="styled" type="checkbox">
    <label for="checkbox3">
        Success
    </label>
</div>
<div class="checkbox checkbox-info">
    <input id="checkbox4" class="styled" type="checkbox">
    <label for="checkbox4">
        Info
    </label>
</div>
<div class="checkbox checkbox-warning">
    <input id="checkbox5" type="checkbox" class="styled" checked>
    <label for="checkbox5">
        Warning
    </label>
</div>
                

单选按钮的基本HTML结构如下：

<div class="radio">
    <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
    <label></label>
</div>
<div class="radio radio-success">
    <input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two">
    <label></label>
</div>                  
                

更多的使用方法请查看DEMO中的演示。

awesome-bootstrap-checkbox特效的github地址为：https://github.com/flatlogic/awesome-bootstrap-checkbox