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.4.3.1.min.css">
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
   
<style>
        .demo {
        padding:20px 0;
        background:linear-gradient(to right,#7AB6B6 50%,#E5CFAA 50%);
}
.form-horizontal {
        background-color:#fff;
        font-family:'Arimo',sans-serif;
        text-align:center;
        padding:50px 30px 50px;
        box-shadow:12px 12px 0 0 rgba(0,0,0,0.3);
}
.form-horizontal .heading {
        color:#555;
        font-size:30px;
        font-weight:600;
        letter-spacing:1px;
        text-transform:capitalize;
        margin:0 0 50px 0;
}
.form-horizontal .form-group {
        margin:0 auto 30px;
        position:relative;
}
.form-horizontal .form-group:nth-last-child(2) {
        margin-bottom:20px;
}
.form-horizontal .form-group:last-child {
        margin:0;
}
.form-horizontal .form-group>i {
        color:#999;
        transform:translateY(-50%);
        position:absolute;
        left:5px;
        top:50%;
}
.form-horizontal .form-control {
        color:#7AB6B6;
        background-color:#.........完整代码请登录后点击上方下载按钮下载查看

网友评论0