纯bootstrap4.3 写的一个漂亮的登录页面

2021-04-19 乐帮网

bootstrap

漂亮的Bootstrap4登录页面，纯Bootstrap4实现，直接上代码，提供源码的下载

<!DOCTYPE html>
<html lang="en">
<head>
    <title>车辆登录系统</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style type="text/css">
        .login-wrapper {
            width: 100vw;
            height: 100vh;
            color: #fff;
        }

        .login {
            background: rgba(0,206,209, 0.6);
        }

        .slide-img {
            display: block;
            width: 100vw;
            height: 100vh;
        }
        .btn-mybg {
            color: #fff;
            background-color: #66CDAA;
            border: none;
        }

            .btn-mybg:hover {
                color: #fff;
                background-color: #218838;
                border-color: #1e7e34;
            }
    </style>
</head>
<body>
    <!--轮播开始-->
    <!--设置position-absolute或position-fixed使得背景位于登录表单下方-->
    <div id="mySlider" class="carousel slide h-100 position-fixed" data-ride="carousel">
        <ol class="carousel-indicators position-fixed">
            <li data-target="#mySlider" data-slide-to="0"></li>
            <li data-target="#mySlider" data-slide-to="1" class="active"></li>
            <li data-target="#mySlider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="slide-img" src="images/1.jpg" />
            </div>
            <div class="carousel-item">
                <img class="slide-img" src="images/2.jpg" />
            </div>
            <div class="carousel-item">
                <img class="slide-img" src="images/3.jpg" />
            </div>
        </div>
        <a class="carousel-control-prev position-fixed" href="#mySlider" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">上一个</span>
        </a>
        <a class="carousel-control-next position-fixed" href="#mySlider" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">下一个</span>
        </a>
    </div>
    <!--轮播结束-->
    <!--表单开始 -->
    <div class="d-flex justify-content-center login-wrapper">
        <div class="col-sm-8 col-md-6 col-xl-4 p-4 card align-self-center login">
            <div class="card-header text-center bg-transparent">
                <h4 class="mb-0">系统登录</h4>
            </div>
            <div class="card-body">
                <form action="javascript:;" method="post">
                    <div class="form-group text-left">
                        <input type="text" class="form-control required" placeholder="用户名" autocomplete="off" name="username" autofocus="autofocus" maxlength="32">
                    </div>
                    <div class="form-group text-left">
                        <input type="password" class="form-control required" name="password" placeholder="密码" maxlength="32">
                    </div>
                    <div class="form-group form-check text-left">
                        <input type="checkbox" class="form-check-input" id="remember-me" name="remember-me" checked="checked" value="true"> <label class="form-check-label" for="remember-me">记住我</label>
                    </div>
                    <div class="">
                        <button type="submit" class="btn btn-mybg btn-block" >登&nbsp;&nbsp;录</button>
                    </div>
                    <p style="visibility:hidden;">登录模板</p>
                </form>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

提供百度网盘的下载：链接：https://pan.baidu.com/s/1neBo4kAs-BC5Pozv8nAqEg

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力