您的位置：首页 > Web前端 > BootStrap

Bootstrap的使用。。。之登录界面。。。

2016-05-08 00:11 405 查看

直接上代码。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>请登录</title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<link href="Login.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div><br/>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">Remember me?</input>
</label>
</div>

<button type="button" class="btn btn-primary btn-lg">登录</button>
</form>
</body>
</html>

css代码。。。

body{
background-color: #4A374A;
text-align: center;
}

.form-inline{
padding-right: 15px;
padding-left: 15px;
margin-left: auto;
margin-right: auto;
height: 720px;
max-width: 330px;
padding-top: 50px;
}
.form-inline input{
margin-bottom: 10px;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow:1px 1px 1px;
border-top: 1px solid #312E3D;
border-left: 1px solid #312E3D;
border-right: 1px solid #312E3D;
border-bottom: 1px solid #56536A;
border-radius: 4px;
background-color: #2D2D3F;
}
.form-inline .form-control{
position: relative;
height: auto;
padding: 10px;
font-size: 16px;
width: 300px;
}
.btn{
width: 300px;
min-height: 40px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 10px 16px;
font-size: 18px;
line-height: normal;
border-radius: 6px;
margin: 0;
text-decoration: none;
text-align: center;
}

.checkbox{
margin-left: -160px;
font-size: 18px;
color: #FFE4E1;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航