bootstrap 5 登录、注册页面
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> <!-- 引入 Bootstrap CSS 文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"> <style> body { background-color: #f7f7f7; } .container { max-width: 400px; } .card { border: none; border-radius: 10px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .card-header { background-color: #4e73df; color: #fff; border-radius: 10px 10px 0 0; padding: 20px; } .card-body { padding: 30px; } .form-control { border-radius: 5px; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; } .btn { background-color: #4e73df; border: none; border-radius: 5px; padding: 10px 20px; color: #fff; font-weight: bold; } </style>
</head>
<body> <div class="container"> <div class="card"> <div class="card-header"> <h3 class="text-center">Login</h3> </div> <div class="card-body"> <form> <div class="mb-3"> <label for="username" class="form-label">Username</label> <input type="text" class="form-control" id="username" placeholder="Enter your username"> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" placeholder="Enter your password"> </div> <button type="submit" class="btn btn-block">Log In</button> </form> </div> </div> </div> <!-- 引入 Bootstrap JS 文件和 Popper.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Register Page</title> <!-- 引入 Bootstrap CSS 文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"> <style> body { background-color: #f7f7f7; } .container { max-width: 500px; } .card { border: none; border-radius: 10px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .card-header { background-color: #4e73df; color: #fff; border-radius: 10px 10px 0 0; padding: 20px; } .card-body { padding: 30px; } .form-control { border-radius: 5px; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; } .btn { background-color: #4e73df; border: none; border-radius: 5px; padding: 10px 20px; color: #fff; font-weight: bold; } .form-check-label { font-weight: normal; } </style>
</head>
<body> <div class="container"> <div class="card"> <div class="card-header"> <h3 class="text-center">Register</h3> </div> <div class="card-body"> <form> <div class="mb-3"> <label for="name" class="form-label">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter your name"> </div> <div class="mb-3"> <label for="email" class="form-label">Email address</label> <input type="email" class="form-control" id="email" placeholder="Enter your email"> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" placeholder="Enter your password"> </div> <div class="mb-3"> <label for="confirmPassword" class="form-label">Confirm Password</label> <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm your password"> </div> <div class="form-check mb-3"> <input type="checkbox" class="form-check-input" id="termsAndConditions"> <label class="form-check-label" for="termsAndConditions">I agree to the terms and conditions</label> </div> <button type="submit" class="btn btn-block">Register</button> </form> </div> </div> </div> <!-- 引入 Bootstrap JS 文件和 Popper.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js"></script>
</body>
</html>这个注册页面与登录页面类似，但包含了一些额外的字段，如姓名、电子邮件、密码确认和同意条款和条件的复选框。通过调整CSS样式，你可以进一步自定义页面的外观和布局。记得将Bootstrap CSS和JS文件的链接替换为你所使用的版本。
)
)
