Bootstrap5 弹出框学习笔记
1. 简介
Bootstrap 是一个流行的前端开发框架，它提供了丰富的 UI 组件和 CSS 样式，可以帮助开发人员快速构建响应式网站和应用程序。
Bootstrap5 弹出框是 Bootstrap 提供的一种 UI 组件，用于在页面中显示浮动窗口。用户可以通过点击按钮或者链接来触发弹出框的显示。Bootstrap5 弹出框提供了丰富的选项，可以自定义弹出框的内容、样式和行为。
2. 使用方法
使用 Bootstrap5 弹出框非常简单，只需要按照以下步骤进行即可。
2.1 引入必要的文件
在 HTML 文档的 head 部分引入 Bootstrap5 和 jQuery 的文件。
htmlCopy Code<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
2.2 创建触发弹出框的元素
在 HTML 文档中创建一个触发弹出框的元素，可以是按钮或者链接。
htmlCopy Code<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开弹出框</button>
2.3 创建弹出框
在 HTML 文档中创建一个弹出框，使用 Bootstrap5 的 modal 组件来实现。
htmlCopy Code<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">弹出框标题</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
弹出框内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
2.4 触发弹出框
通过点击触发弹出框的元素，来触发弹出框的显示。
javascriptCopy Code$(document).ready(function() {
$('[data-bs-toggle="modal"]').click(function() {
$($(this).data("bs-target")).modal("show");
});
});
3. 示例
以下是一个基本的示例，演示了如何使用 Bootstrap5 弹出框来显示一个登录框。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 弹出框学习笔记</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">登录</button>
</div>
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">用户登录</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<div class="mb-3">
<label for="username" class="form-label">用户名：</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">密码：</label>
<input type="password" class="form-control" id="password" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">登录</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('[data-bs-toggle="modal"]').click(function() {
$($(this).data("bs-target")).modal("show");
});
});
</script>
</body>
</html>
通过点击登录按钮，可以显示一个带有用户名和密码输入框的登录框。用户可以输入自己的用户名和密码并点击“登录”按钮来进行登录操作。