Bootstrap是Twitter推出的一个用于前端开发的开源工具包。在前端页面设计占有一定份额，今天手把手带你整除登录界面，最后的结果图如下：
页面要求
主要：
- 用户名
- 密码
- 同意单选框
- 登录按钮
修饰：
- 边框
- 阴影
开撸
1.新建一个login_demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LoginDemo</title>
</head>
<body>
</body>
</html>
2.引入bootstrap cdn:
添加在head 标签中；
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
3.设计一个边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LoginDemo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
.loginForm {
/*边框高度*/
height: 350px;
/*边框宽度*/
width: 500px;
/*边框颜色*/
border: #4d4d4d solid 1px;
/*上边界距离*/
margin-top: 300px;
/*左边界距离：自动*/
margin-left: auto;
/*右边界距离：自动*/
margin-right: auto;
}
</style>
</head>
<body>
<div class="loginForm">
</div>
</body>
</html>
4.引入表单
在Bootstrap官网中找到表单：
复制这段到<div class="loginForm"></div>这个中间，并修改对应的参数，删除不需要的部分，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
.loginForm {
/*边框高度*/
height: 350px;
/*边框宽度*/
width: 500px;
/*边框颜色*/
border: #4d4d4d solid 1px;
/*边框圆角*/
border-radius: 4px;
/*阴影 水平方向，竖直方向，模糊距离*/
box-shadow: 5px 5px 5px #4d4d4d;
/*上边界距离*/
margin-top: 300px;
/*左边界距离：自动*/
margin-left: auto;
/*右边界距离：自动*/
margin-right: auto;
/*用户名、密码间距*/
padding: 20px 40px;
}
/*将用户登录置于中间*/
.loginForm h2 {
text-align: center;
}
.button {
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="loginForm">
<h2>用户登录</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 同意
<a href="#"> xxx安全协议</a> 与 <a href="#"> xxx隐私协议</a>
</label>
</div>
<!-- <button type="submit" class="btn btn-primary">登 录</button>-->
<div class="button">
<input type="submit" class="btn btn-primary" value="登 录"/>
</div>
</form>
</div>
</body>
</html>
格式略微有点不好看，现在开始调节格式；
<style>
.loginForm {
/*边框高度*/
height: 350px;
/*边框宽度*/
width: 500px;
/*边框颜色*/
border: #4d4d4d solid 1px;
/*边框圆角*/
border-radius: 4px;
/*阴影 水平方向，竖直方向，模糊距离*/
box-shadow: 5px 5px 5px #4d4d4d;
/*上边界距离*/
margin-top: 300px;
/*左边界距离：自动*/
margin-left: auto;
/*右边界距离：自动*/
margin-right: auto;
/*用户名、密码间距*/
padding: 20px 40px;
}
/*将用户登录置于中间*/
.loginForm h2 {
text-align: center;
}
/*修改button属性*/
.button {
text-align: center;
vertical-align: middle;
}
</style>
效果图
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
.loginForm {
/*边框高度*/
height: 350px;
/*边框宽度*/
width: 500px;
/*边框颜色*/
border: #4d4d4d solid 1px;
/*边框圆角*/
border-radius: 4px;
/*阴影 水平方向，竖直方向，模糊距离*/
box-shadow: 5px 5px 5px #4d4d4d;
/*上边界距离*/
margin-top: 300px;
/*左边界距离：自动*/
margin-left: auto;
/*右边界距离：自动*/
margin-right: auto;
/*用户名、密码间距*/
padding: 20px 40px;
}
/*将用户登录置于中间*/
.loginForm h2 {
text-align: center;
}
/*修改button属性*/
.button {
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="loginForm">
<h2>用户登录</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 同意
<a href="#"> xxx安全协议</a> 与 <a href="#"> xxx隐私协议</a>
</label>
</div>
<div class="button">
<input type="submit" class="btn btn-primary" value="登 录"/>
</div>
</form>
</div>
</body>
</html>
更多推荐
[前端]基于Bootstrap搭建登录页面,保姆级讲解,面面俱到~~~
发布评论