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