bootstrap登陆界面
时间: 2024-09-11 20:00:49 浏览: 51
Bootstrap后台登录界面模板_后台模板_bootstrap_
Bootstrap是一个流行的前端框架,它提供了一套预设的样式和组件,包括登录界面设计。创建一个简单的Bootstrap登录界面通常包含以下几个步骤:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 登录</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">用户登录</h4>
<form id="loginForm">
<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>
<button type="submit" class="btn btn-primary">登录</button>
<a href="#" class="forgot-password">忘记密码?</a>
</form>
</div>
</div>
</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.0.2/js/bootstrap.min.js"></script>
<script>
// (添加必要的表单验证和交互逻辑)
</script>
</body>
</html>
```
2. **CSS样式**:利用Bootstrap内置的类来控制样式,如`card`, `card-body`, `form-group`, 等。
3. **JavaScript**:可以添加一些交互功能,比如表单验证、按钮点击事件等。
阅读全文