源代码：
下载代码
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 class="p-3 m-0 border-0 bd-example bd-example-toasts p-0"> <!--显示多个弹窗 --> <div aria-live="polite" aria-atomic="true" class="position-relative"> <!-- Position it: --> <!-- - `.toast-container` 设置弹窗直接的空隙 --> <!-- - `top-0` & `end-0` 设置弹窗显示位置--> <!-- - `.p-3` 设置外边距 --> <div class="toast-container top-0 end-0 p-3"> <!-- 这里设置多个弹窗代码 --> <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="https://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg> <strong class="me-auto">弹窗实例</strong> <small class="text-muted">刚刚</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> 这是第二个消息 </div> </div> <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="https://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg> <strong class="me-auto">弹窗实例</strong> <small class="text-muted">2 秒前</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> 这是第一个消息 </div> </div> </div> </div> <!-- 显示多个弹窗 结束 --> </body> </html>
运行结果：
AI 编程工具