bootstrap 登录框 完整代码
时间: 2023-08-05 21:05:31 浏览: 38
下面是一个完整的Bootstrap登录框的示例代码,包括HTML、CSS和JavaScript部分:
HTML部分:
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap登录框示例</title>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 mt-5">
<div class="card">
<div class="card-header">
<h4 class="text-center">登录</h4>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary btn-block">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 引入jQuery和Bootstrap的JavaScript文件 -->
<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/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
```
CSS部分:
```
body {
background: #f8f9fa;
}
.card {
border: none;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.card-header {
background: #fff;
border-bottom: none;
}
.card-body {
padding: 30px 20px;
}
```
JavaScript部分:
```
$(function() {
// 监听登录按钮的点击事件
$('button[type="submit"]').on('click', function(e) {
e.preventDefault();
// 获取用户名和密码
var username = $('#username').val();
var password = $('#password').val();
// TODO:在这里编写登录逻辑
console.log('用户名:' + username);
console.log('密码:' + password);
});
});
```
在这个示例中,我们使用了Bootstrap的CSS和JavaScript文件来美化和增强登录框的功能。同时,我们还使用了jQuery库来简化JavaScript代码的编写。
当用户点击登录按钮时,我们通过jQuery获取输入框中的用户名和密码,并在控制台中输出。你可以根据你的实际需求,修改这个JavaScript部分,以实现自己的登录逻辑。