运用BootStrap之制作一个简单的登录页面

运用BootStrap之制作一个简单的登录页面_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>账号登录</title>    
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">    
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>    
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>    
<style type="text/css">        
.login-container{
                 
width: 400px;            
margin: auto;        
}        
.login-nav{
                 
width: 400px;            
height: 30px;            
padding: 27px 0 24px;            
text-align: center;            
line-height: 0px;            
font-size: 24px;            
color: #666;            
}    
</style>
</head>
<body>    
<div class="login-container">          
<div class="login-nav">            
<a href="">账号登录</a>               
</div>        
<!-- input框 -->        
<form action="#" role="form">            
<div class="form-group">                
<input type="text" name="" id="" class="form-control" placeholder="邮箱/手机号码">            
</div>            
<div class="form-group">                
<input type="password" name="" id="" class="form-control" placeholder="密码">            
</div>            
<div class="form-group row">                
<label for="" class="col-md-offset-1"><input type="checkbox" name="" id="">记住密码</label>                
<label for="" class="col-md-offset-1"><input type="checkbox" name="" id="" class="">自动登录</label>                
<label for="" class="col-md-offset-4"><a href="" class="">找回密码</a></label>            
</div>            
<div class="form-group">            
<button type="submit" class="btn btn-primary btn-block">登录</button>                
</div>        
</form>    
</div>
</body>
</html>

总结:此登录界面主要是根据前面所学的BootStrap表单及按钮的练习,其中还涉及到BootStrap网格系统的一点小知识。初次制作,文中必有许多纰漏,若有幸能够得到您的些许指点,猿某在此感激不尽!!!

你可能感兴趣的:(笔记,bootstrap,css,html)