<!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>效果
