Bootstrap快速搭建登录界面

HerryDong

已于 2024-04-25 09:26:06 修改

阅读量7k

点赞数 3

分类专栏： JavaScript 文章标签： bootstrap

于 2019-09-11 20:12:28 首次发布

本文链接：https://blog.csdn.net/HerryDong/article/details/100747645

版权

JavaScript 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

实现方法

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>用户登录</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: url(Images/bg.jfif) no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        form
        {
            width: 400px;
            margin: 200px auto;
            padding: 20px 30px;
            background-color: rgba(255, 255, 255, 0.8);
        }

            form div
            {
                margin-bottom:10px;
            }

        a:link, a:visited, a:hover, a:active
        {
            text-decoration: none;
            color: rgba(0, 0, 0, 0.5);
        }
    </style>
    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <script src="Scripts/popper.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form action="Handlers/LoginHandler.ashx" method="post" onsubmit="return login()">
            <div style="margin-bottom:20px;">
                <h2 style="text-align:center;">用户登录</h2>
            </div>
            <div class="form-group has-success has-feedback">
                <input type="text" class="form-control" id="username" placeholder="用户名">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-success has-feedback">
                <input type="password" class="form-control" id="password" placeholder="密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" class="form-check-input" value=""><span style="font-size:15px;">记住我</span>
                </label>
            </div>
            <div>
                <button type="submit" class="btn btn-primary btn-block">登录</button>
            </div>
            <div>
                <a href="#" style="display:inline;font-size:15px;">还未注册</a>
                <a href="#" style="display:inline;font-size:15px;margin-left:185px;">忘记密码？</a>
            </div>
        </form>
    </div>
</body>
</html>