0
点赞
收藏
分享

微信扫一扫

Bootstrap做一个简易登陆界面并能提供信息验证

青乌 2022-02-18 阅读 84

1、配置环境

(1)Bootstrap下载:https://v5.bootcss.com/docs/getting-started/download/

(2)下载后需要其中的:bootstrap.css和bootstrap.js文件分别放到css和js文件中。

(3)引入配置文件:

    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>

2、代码如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎登陆</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
    <style>
        body {
            background-color: rgb(240, 233, 234);
        }
        
        h2 {
            text-align: center;
        }
    </style>

</head>

<body>

    <div class="container col-4 mt-5">
        <form action="#" class="needs-validation" novalidate>
            <div class="mb-3 ">
                <h2>欢迎登陆</h2>
            </div>
            <div class="mb-3 ">
                <label for="formGroupExampleInput " class="form-label "><strong>邮箱</strong></label>
                <input type="text " class="form-control " id="formGroupExampleInput " placeholder="123123 " required>
                <div class="invalid-feedback ">邮箱错误</div>
            </div>
            <div class="mb-3 ">
                <label for="formGroupExampleInput2 " class="form-label "><strong>密码</strong></label>
                <input type="text " class="form-control " id="formGroupExampleInput2 " placeholder="Password " required>
                <div class="invalid-feedback ">密码错误</div>
            </div>
            <div class="form-check ">
                <input class="form-check-input " type="radio" id="gridCheck " name="gridCheck">
                <label class="form-check-label " for="gridCheck ">记住</label>
            </div>
            <div class="d-grid gap-2 mx-auto ">
                <button class="btn btn-success " type="button ">Button</button>
            </div>
        </form>
    </div>

    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
            'use strict'

            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.querySelectorAll('.needs-validation')

            // Loop over them and prevent submission
            Array.prototype.slice.call(forms)
                .forEach(function(form) {
                    form.addEventListener('submit', function(event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }

                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
</body>


</html>

3、效果展示

 

 

举报

相关推荐

0 条评论