摘要:pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按钮点击时的动画效果。希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
简要教程
pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按钮点击时的动画效果。
pretty.css支持的图标库有:
o FONT AWESOME
o BOOTSTRAP GLYPHICONS
o MATERIAL DESIGN ICONS (MDI)
o MATERIAL DESIGN ICONS (ZMDI)
o TYPICONS
o IONICONS
o 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"/>
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';
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号