<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单Checkbox元素美化特效 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/simple-bt-checks.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<br><br><br><br><br><br>
<div id="colors-1" class="col-xs-12">
<span class="checkbox color_1 col-xs-4 col-sm-3">
<label> <input type="checkbox"></label>
<label> <input type="checkbox" value="x" checked=""></label>
</span>
<span class="checkbox color_2 col-xs-4 col-sm-3">
<label> <input type="checkbox"></label>
<label> <input type="checkbox" value="x" checked=""></label>
</span>
<span class="checkbox color_3 col-xs-4 col-sm-3">
<label> <input type="checkbox"></label>
<label> <input type="checkbox" value="x" checked=""></label>
</span>
<span class="checkbox color_4 col-xs-4 col-sm-3">
<label> <input type="checkbox"></label>
<label> <input type="checkbox" value="x" checked=""></label>
</span>
<span class="checkbox color_5 col-xs-4 col-sm-3">
<label> <input type="checkbox"></label>
<label> <input type="checkbox" value="x" checked=""></label>
</span>
<span class="checkbox color_6 col-xs-4 col-sm-3">
<label> <input type="checkbox"></label>
<label> <input type="checkbox" value="x" checked=""></label>
</span>
<span class="checkbox color_7 col-xs-4 col-sm-3">
<label> <input type="checkbox"></label>
<label> <input type="checkbox" value="x" checked=""></label>
</span>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src=""><\/script>')</script>
<script type="text/javascript" src="js/simple-bt-checks.js"></script>
<script type="text/javascript">
$(function(){
$('.color_1 input[type="checkbox"]').simpleBtChecks({ size: "x-2" });
// default bt class: 'btn btn-default'
$('.color_2 input[type="checkbox"]').simpleBtChecks({
size: 'x-2',
class : 'btn btn-primary'
});
$('.color_3 input[type="checkbox"]').simpleBtChecks({
size: 'x-2',
class : 'btn btn-success'
});
$('.color_4 input[type="checkbox"]').simpleBtChecks({
size: 'x-2',
class : 'btn btn-info'
});
$('.color_5 input[type="checkbox"]').simpleBtChecks({
size: 'x-2',
class : 'btn btn-warning'
});
$('.color_6 input[type="checkbox"]').simpleBtChecks({
size: 'x-2',
class : 'btn btn-danger'
});
$('.color_7 input[type="checkbox"]').simpleBtChecks({
size: 'x-2',
class : 'btn btn-link'
});
})
</script>
<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
表单Checkbox元素美化特效.zip
版权申诉
58 浏览量
2022-11-25
10:22:06
上传
评论
收藏 90KB ZIP 举报
表单Checkbox元素美化特效.zip （23个子文件） 
表单Checkbox元素美化特效 jiaoben3950 css 
simple-bt-checks.css 2KB default.css 6KB fantasy-example.css 2KB normalize.css 2KB
index4.html 2KB img 
2.jpg 27KB 1.jpg 19KB
icon.png 783B fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB index.html 3KB js simple-bt-checks.js 2KB jquery-2.1.1.min.js 82KB index2.html 2KB dist css simple-bt-checks.css 2KB simple-bt-checks.min.css 964B simple-bt-checks.less 2KB js simple-bt-checks.js 2KB simple-bt-checks.min.js 1KB index3.html 2KB 表单Checkbox元素美化特效.jpg 25KB资源评论
