bootstrap一点心得

xiaoxiao2021-02-28  92

基于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>
转载请注明原文地址: https://www.6miu.com/read-44369.html

最新回复(0)