bootstrap 3 多选框 awesome bootstrap checkbox

Awesome Bootstrap Checkbox

Font Awesome Bootstrap Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. No Javascript!

Demo

 

Use

First just include awesome-bootstrap-checkbox.css somewhere in your HTML, or add the equivalent files to your Sass / Less configuration. Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:

<form role="form">
  ...
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  ...
</form>

 

We have to alter it a bit:

<form role="form">
  ...
  <div class="checkbox">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">
        Check me out
    </label>
  </div>
  ...
</form>

 

That's it. It will work. But it will not work if you nest input inside label or put label before input.

If you want to enable Opera 12 and earlier support just add class styled to input element:

...
<input type="checkbox" id="checkbox1" class="styled">
...

 

css文件：

.checkbox {
  padding-left: 20px; }
  .checkbox label {