帮我实现一个利用bootstrap的学生选课系统登录
时间: 2023-10-05 09:07:27 浏览: 50
好的,下面是一个简单的利用 Bootstrap 实现的学生选课系统登录页面:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生选课系统登录</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">学生选课系统登录</h4>
</div>
<div class="card-body">
<form action="" method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" name="username" id="username" class="form-control" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" name="password" id="password" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">登录</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
```
上面的代码使用了 Bootstrap 的样式和组件,包括卡片容器(card)、表单组件(form)、文本输入框(input)、按钮(button)等。同时,使用了栅格系统(grid system)进行布局,使页面在不同设备上显示效果一致。
你可以将上面的代码保存为 HTML 文件,然后在浏览器中打开,即可看到一个简单的学生选课系统登录页面。请注意,这里的代码只是一个示例,在实际开发中还需要根据具体需求进行调整和完善。