☀️Terry

- - 草木逢春，雨过天晴🌈。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
bootstrap按钮

bootstrap按钮：

　　手机登陆页面的使用－

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script >
        $(function(){
            $("input").blur(function(){
            var text = $(this).val();
                if(text.length<6){
                    $(this).parent().removeClass("has-success");
                    $(this).parent().addClass("has-error");
                }else{
                    $(this).parent().removeClass("has-error");
                    $(this).parent().addClass("has-success");
                }
            });
        });
</script>
</head>
<body>
    <h3 class="text-center">用户注册</h3>
    <form action="#" class="form-group">
        <div class="input-group">
            <div class="input-group-addon">账 号:</div>
            <input placeholder="请输入账号" type="text" class="form-control">
        </div><br>
        <div class="input-group">
            <div class="input-group-addon">密 码:</div>
            <input placeholder="请输入密码" type="password" class="form-control">
        </div><br>
        <div class="input-group">
            <div class="input-group-addon">邮 箱:</div>
            <input placeholder="请输入邮箱" type="text" class="form-control">
            <div class="input-group-addon">
                <select>
                    <option>@qq.com</option>
                    <option>@126.com</option>
                    <option>@163.com</option>
                </select>
            </div>
        </div><br>
            <input  type="submit" value="登陆" class="btn btn-success btn-block">
    </form>

</body>
</html>

 

展示图：

　　

posted on 2018-09-11 15:22  ☀️Terry  阅读(208)  评论(0)    收藏  举报