用bootstrap+css+js写一个登录的页面
时间: 2023-12-14 09:02:01 浏览: 34
好的,以下是一个简单的登录页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f2f2f2;
}
.login-form {
margin-top: 100px;
}
.form-header {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.form-body {
background-color: #fff;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.form-group {
margin-bottom: 20px;
}
.form-control:focus {
box-shadow: none;
}
.btn-login {
background-color: #007bff;
border-color: #007bff;
color: #fff;
width: 100%;
}
.btn-login:hover {
background-color: #0069d9;
border-color: #0062cc;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 login-form">
<div class="form-header">
<h3>Login</h3>
</div>
<div class="form-body">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter password">
</div>
<button type="submit" class="btn btn-login">Login</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
```
这个页面使用了 Bootstrap 来实现布局和样式,同时使用了一些自定义的 CSS 样式。其中,登录表单包含了用户名和密码两个输入框以及一个登录按钮。当用户点击登录按钮时,页面会提交表单到后端进行验证。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)