实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <!-- <div class="toast-container position-absolute p-3" id="toastPlacement"> <div class="toast"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> --> <div class="container mt-3"> <h3>Toast 示例</h3> <p>在这个例子中，我们使用一个按钮来显示 toast 消息。</p> <button type="button" class="btn btn-primary" id="toastbtn">显示 Toast</button> <!-- <div class="toast"> <div class="toast-header"> <strong class="me-auto">Toast 标头</strong> <button type="button" class="btn-close" data-bs-dismiss="toast"></button> </div> <div class="toast-body"> <p>toast 正文中的一些文本</p> </div> </div> --> </div> <!-- Flexbox container for aligning the toasts --> <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100"> <div class="toast" id="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="me-auto">message</strong> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> <script> document.getElementById("toastbtn").onclick = function () { // var toastElList = [].slice.call(document.querySelectorAll('.toast')) // var toastList = toastElList.map(function (toastEl) { // console.log(toastEl); // return new bootstrap.Toast(toastEl) // }) // toastList.forEach(toast => toast.show()) new bootstrap.Toast(document.getElementById("toast")).show(); } </script> </body> </html>
运行结果：