基于js和css的开发框架,由于考虑了很多用户经常设置的属性值,所以使用其封装好的类可以获得一个比较符合大众审美界面效果。
而使用这个框架最重要的是靠记忆(虽然名字很规范,套路很清晰,但是要真正用好,让自己尽可能少写css,记住最重要)
下面一个form表单样式设置的一个符合框架要求的写法(引入框架见官网)
<form class="form-inline" action="#" method="post" enctype="application/x-www-form-urlencoded">
<div class="form-group">
<label for="email" class="control-label">QQ邮箱
<input id="email" class="form-control input-lg" type="email" placeholder="请输入邮箱"/>
</label>
</div>
<div class="form-group">
<label for="pwd" class="control-label">密码
<input id="pwd" class="form-control" type="password" placeholder="请输入密码"/>
</label>
</div>
<div class="input-group">
<input class="form-control" type="text" value="502"/>
<div class="input-group-addon">元</div>
<input class="form-control" type="text" value="502"/>
<div class="input-group-addon">角</div>
</div>
<div class="checkbox disabled">
<label for="beijing" class="">
<input id="beijing" type="checkbox" name="city" value="beijing"/>北京
</label>
</div>
<div class="checkbox">
<label for="shanghai">
<input id="shanghai" type="checkbox" name="city" value="shanghai"/>上海
</label>
</div>
<div class="checkbox">
<label for="chendu">
<input id="chendu" type="checkbox" name="city" value="chendu"/>成都
</label>
</div>
<select class='form-control'>
<option>北京</option>
<option>成都</option>
<option>阆中</option>
</select>
</form>
<!--下面为正则判断可简单验证效果-->
<script>
$('#email').change(function(){
var value = $(this).val();
var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
if(reg.test(value)){
this.parentNode.parentNode.className += ' has-success';
}else{
this.parentNode.parentNode.className += ' has-error';
}
})
</script>