html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./bootstrap-5.1.3-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.css">
</head>
<body>
<button class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#a">登录</button>
<div class="modal" id="a" data-bs-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content bg-light">
<div class="modal-header">
登录百度账号
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-md-9 mx-auto">
<input type="text" class="form-control"placeholder="手机/邮箱/用户名">
</div>
</div>
<div class="row mb-3">
<div class="col-md-9 mx-auto">
<input type="password" class="form-control"placeholder="密码">
</div>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="form-check-input">
下次自动登录
</label>
<div class="modal-footer">
<button class="btn btn-primary w-100" data-bs-dismiss="modal">登录</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>效果
