簡要教程
　　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