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

当前位置:主页 > CSS3库 > UI界面设计 > Bootstrap复选框和单选按钮美化插件
Bootstrap复选框和单选按钮美化插件
分享:

    插件介绍

    awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写,没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动,即可完成漂亮的美化效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-08-26
    阅读:
简要教程

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-primarycheckbox-danger,或radio-info等class来修改复选框或单选按钮的颜色。

checkbox-circle是圆形的复选框。

checkbox-singleradio-single是不带文本的复选框和单选按钮。

网友评论