浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery表单及相关 2016-09-02

人气32920

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

查看演示
下载资源:13
下载资源
错误提交:

格式:zip 大小:493.67KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2181.html 非特殊说明,本文版权归原作者所有,转载请注明出处
Bootstrap复选框和单选按钮美化插件

我当前G币余额:0 已下载次数:13

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有9 评论)

1 2