用bootstrap写一个登录和注册页面
时间: 2024-03-23 17:43:39 浏览: 22
好的,下面是一个简单的登录和注册页面的示例代码,使用Bootstrap框架实现:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login and Register Page</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<h2 class="text-center my-5">Login</h2>
<form>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
<div class="col-md-6 mx-auto">
<h2 class="text-center my-5">Register</h2>
<form>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" placeholder="Confirm Password">
</div>
<button type="submit" class="btn btn-primary btn-block">Register</button>
</form>
</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/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
这个示例代码中用到了Bootstrap的网格系统,将页面分成两列,左边是登录页面,右边是注册页面。每个表单都有一个Email地址和密码字段,注册页面还有一个确认密码字段。两个表单都有一个提交按钮,点击后将表单数据发送到服务器。