"Full Page Log In With Background"
Bootstrap 3.3.0 Snippet by brothong

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h2 class="panel-title"><span class="glyphicon glyphicon-user"></span> 欢迎登录德阳卫生计生网站管理系统>></h2> </div> <div class="panel-body"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="LoginName" class="col-sm-3 control-label"> 用户名</label> <div class="col-sm-8"> <input type="text" name="username" class="form-control" id="LoginName" placeholder="用户名" required> </div> </div> <div class="form-group"> <label for="LoginPassword" class="col-sm-3 control-label"> 密 码</label> <div class="col-sm-8"> <input type="password" name="password" class="form-control" id="LoginPassword" placeholder="密码" required> </div> </div> <div class="form-group"> <label for="loginAuthCode" class="col-sm-3 control-label"> 认证码</label> <div class="col-sm-8"> <input type="text" name="loginauth" class="form-control" id="loginAuthCode" placeholder="输入预设认证码" required> </div> </div> <div class="form-group"> <label for="loginKey" class="col-sm-3 control-label"> 验证码</label> <div class="col-sm-6"> <input type="text" name="key" class="form-control" id="loginKey" placeholder="输入右侧验证码" required> </div> <div class="col-sm-1 keyimg"><img src="http://www.dywsjd.gov.cn/e/dywsadmin/ShowKey.php" name="KeyImg" id="KeyImg" onClick="KeyImg.src='http://www.dywsjd.gov.cn/e/dywsadmin/ShowKey.php?'+Math.random()" alt="看不清楚,点击刷新" /></div> </div> <div class="form-group last"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-info btn-sm"> 登录网站管理系统Login</button> </div> </div> </form> </div> <div class="panel-footer"> ©2015 <a href="http://www.dywsjs.gov.cn">德阳卫生计生</a> 德阳市卫生和计划生育委员会 </div> </div> </div> </div> </div>
body { background: url(https://ss0.bdstatic.com/l4oZeXSm1A5BphGlnYG/skin/19.jpg?2) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .panel { opacity: .9; margin-top:128px; } .panel-title { font-weight:bold; } .form-group.last { margin-bottom:0px; } .keyimg { padding-top:6px; margin-left:-17px; }

Related: See More


Questions / Comments: