插件介绍
pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按钮点击时的动画效果。
浏览器兼容性
演示地址:http://demo.jb51.net/js/2017/...
教程
pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按钮点击时的动画效果。
pretty.css支持的图标库有:
- FONT AWESOME
- BOOTSTRAP GLYPHICONS
- MATERIAL DESIGN ICONS (MDI)
- MATERIAL DESIGN ICONS (ZMDI)
- TYPICONS
- IONICONS
- GOOGLE MATERIAL DESIGN ICONS
安装
可以使用bower,npm或yarn来安装pretty.css。
bower install pretty-checkbox
npm install pretty-checkbox
yarn add pretty-checkbox
使用方法
在页面引入pretty.min.css文件及所需要的字体图标库文件
<link rel="stylesheet" href="../PATH/pretty-checkbox/src/pretty.min.css"/>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/>
HTML结构
Checkbox的基本HTML结构如下:
<div class="pretty primary">
<input type="checkbox"/>
<label><i class="mdi mdi-check"></i> Primary</label>
</div>
Radio的基本HTML结构如下:
<div class="pretty">
<input type="radio" name="radio">
<label><i class="mdi mdi-check"></i> Option 1</label>
</div>
<div class="pretty">
<input type="radio" name="radio">
<label><i class="mdi mdi-check"></i> Option 2</label>
</div>
其中mdi mdi-*
是material design图标。如果你想使用fontawesome,可以修改为fa fa-close
SCSS变量
pretty.css的基本scss变量设置如下:
$pretty--class-name: notsopretty;
/* <div class="notsopretty circle"> */
$pretty--border-radius: 0;
$pretty--color-primary: #428bca;
$pretty--color-success: #5cb85c;
$pretty--color-info: #5bc0de;
$pretty--color-warning: #f0ad4e;
$pretty--color-danger: #d9534f;
$pretty--color-border: #b9b9b9;
$pretty--color-radio: #b9b9b9;
$pretty--color-bg: #fff;
/* Google material design icons */
$pretty--gmdi-class-name:'g-mdi';
$pretty--gmdi-name:'Material Icons';
$pretty--gmdi-attr:'data-icon';
pretty.css的github地址为:https://lokesh-coder.github.i...
注:更多关于美化checkbox和radio的插件,欢迎大家评论留言,谢谢。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。