使用bootstrap给我制作一个精美的登陆页面
时间: 2024-10-20 20:16:29 浏览: 20
使用Bootstrap创建一个精美的登录页面非常简单,下面是一个基本的模板示例,你可以在此基础上进行定制:
首先,在HTML中设置基本结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-6 login-container">
<h2 class="text-center mb-4">登录</h2>
<form id="loginForm" role="form">
<div class="mb-3">
<label for="username" class="form-label">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary w-100">登录</button>
</div>
<small class="text-muted text-center">还没账号?<a href="#" class="ml-2">注册</a></small>
</form>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script src="app.js"></script> <!-- 这里放你的自定义JS文件 -->
</body>
</html>
```
在上面的代码中,我们用到了Bootstrap的一些核心组件,如容器(container), 行(row), 列(col) 和表单(form)。同时,按钮采用了Bootstrap的默认样式。
接下来,可以在`app.js`中添加一些验证逻辑、表单提交或异步请求等额外功能,具体取决于你的需求。
阅读全文