源代码：
下载代码
AI 编程工具
点击运行
<!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>弹窗实例</h3> <p>在这个实例中我们通过点击按钮来显示弹窗。</p> <button type="button" class="btn btn-primary" id="toastbtn">显示弹窗</button> <div class="toast"> <div class="toast-header"> <strong class="me-auto">弹窗标题</strong> <button type="button" class="btn-close" data-bs-dismiss="toast"></button> </div> <div class="toast-body"> <p>这是一个Bootstrap 5弹窗示例。</p> </div> </div> </div> <script> document.getElementById("toastbtn").onclick = function() { var toastElList = [].slice.call(document.querySelectorAll('.toast')) var toastList = toastElList.map(function(toastEl) { return new bootstrap.Toast(toastEl) }) toastList.forEach(toast => toast.show()) } </script> </body> </html>
运行结果：
AI 编程工具