bootstrap自适应登录页面代码

代码语言:html

所属分类:表单美化

代码描述:bootstrap自适应登录页面代码

代码标签: bootstrap 自适应 登录 页面

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style type="text/css">
    body{
         background: url(//repo.bfw.wiki/bfwrepo/image/61923f261c983.png) no-repeat;
            background-size: cover;
            height: 100vh;
    }
        .form-bg {
           margin-top:100px;
	padding:2em 0;
}
.form-horizontal {
	background:#fff;
	padding-bottom:40px;
	border-radius:15px;
	text-align:center;
}
.form-horizontal .heading {
	display:block;
	font-size:35px;
	font-weight:700;
	padding:35px 0;
	border-bottom:1px solid #f0f0f0;
	margin-bottom:30px;
}
.form-horizontal .form-group {
	padding:0 40px;
	margin:0 0 25px 0;
	position:relative;
}
.form-horizontal .form-control {
	background:#f0f0f0;
	border:none;
	border-radius:20px;
	box-shadow:none;
	padding:0 20px 0 45px;
	height:40px;
	transition:all 0.3s ease 0s;
}
.form-horizontal .form-control:focus {
	background:#e0e0e0;
	box-shadow:none;
	outline:0 none;
}
.form-horizontal .form-group i {
	position:absolute;
	top:12px;
	left:60px;
	font-size:17px;
	color:#c8c8c8;
	transition:all 0.5s ease 0s;
}
.form-horizontal .form-control:focus + i {
	color:#00b4ef;
}
.form-horizontal .fa-question-circle {
	display:inline-block;
	position:absolute;
	top:12px;
	right:60px;
	font-size:20px;
	color:#808080;
	transition:all 0.5s ease 0s;
}
.form-horizontal .fa-question-circle:hover {
	color:#000;
}
.form-horizontal .main-checkbox {
	float:left;
	width:20px;
	height:20px;
	background:#11a3fc;
	border-radius:50%;
	position:relative;
	margin:5px 0 0 5px;
	border:1px solid #11a3fc;
}
.form-horizontal .main-checkbox label {
	width:20px;
	height:20px;
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
}
.form-horizontal .main-checkbox label:after {
	content:"";
	width:10px;
	height:5px;
	position:absolute;
	top:5px;
	left:4px;
	border:3px solid #fff;
	border-top:none;
	border-right:none;
	background:t.........完整代码请登录后点击上方下载按钮下载查看

网友评论0