bootstrap登录注册切换表单页面代码

代码语言:html

所属分类:表单美化

代码描述:bootstrap登录注册切换表单页面代码,页面背景颜色跟随注册登录表单换色。

代码标签: bootstrap 登录 注册

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

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

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fontawesome.5.9.0.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        body {
        	display:flex;
        	height:100vh;
        	min-height:35rem;
        	align-items:center;
        	justify-content:center;
        	font-family:josefin sans,sans-serif
        }
        .card {
        	position:absolute;
        	top:50%;
        	left:50%;
        	width:100%;
        	padding-top:1rem;
        	padding-bottom:1rem;
        	-webkit-transform:translate(-50%,-50%);
        	transform:translate(-50%,-50%)
        }
        .card-wrap {
        	position:relative;
        	margin:0 auto
        }
        @media(min-width:769px) {
        	.card-wrap {
        	max-width:450px
        }
        }.card-body {
        	display:flex;
        	flex-direction:column;
        	align-items:center;
        	justify-content:center;
        	text-align:center
        }
        .card-body p {
        	font-size:1.1rem
        }
        .card-title {
        	font-weight:700;
        	font-size:1.8rem
        }
        .badge-wrap {
        	display:flex;
        	justify-content:center
        }
        .badge-wrap a.badge {
        	display:flex;
        	align-items:center;
        	justify-content:center;
        	width:2.5rem;
        	height:2.5rem;
        	margin:0 .2rem;
        	padding:0;
        	opacity:.7;
        	border-radius:50%;
        	transition:opacity .3s ease-in;
        	font-size:1rem;
        	color:#fff;
        	text-decoration:none;
        	cursor:pointer
        }
        .badge-wrap a..........完整代码请登录后点击上方下载按钮下载查看

网友评论0