bootstrap一点心得

基于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>