bootstrop写一个登录页面
时间: 2024-05-08 12:15:24 浏览: 7
抱歉,作为AI语言模型,我无法提供完整的代码。但是,我可以给您提供一个基本的登录页面布局,您可以根据自己的需求进行修改:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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">
<title>Login Page</title>
</head>
<body>
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-6">
<h2 class="text-center">Login</h2>
<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="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="rememberMe">
<label class="form-check-label" for="rememberMe">Remember me</label>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
```
该布局使用Bootstrap 4,包含一个容器`container`,一个居中对齐的行`row justify-content-center`和一个占据6个列的表单`col-md-6`。表单包含用户名输入框、密码输入框、记住我复选框和登录按钮。