Bootstrap复选框和单选按钮美化插件

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是不带文本的复选框和单选按钮。