一、弹出框
1.1 创建弹出框
通过向元素添加 data-bs-toggle="popover" 来来创建弹出框。
title 属性的内容为弹出框的标题，data-bs-content 属性显示了弹出框的文本内容：
注意: 弹出框要写在 JavaScript 的初始化代码里。
以下实例可以在文档的任何地方使用弹出框：
<div class="container mt-3"> <h3>弹出框实例</h3> <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题" data-bs-content="弹出框内容"> 多次点我 </button> </div> <script> var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) }) </script>
1.2 指定弹出框的位置
默认情况下弹出框显示在元素右侧。
可以使用 data-bs-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:
<div class="container mt-3"> <h3>指定弹出框的位置</h3> <a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="我是内容部分">点我</a> <a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="我是内容部分">点我</a> <a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="我是内容部分">点我</a> <a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="我是内容部分">点我</a> </div>
1.3 关闭弹出框
默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-bs-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框：
提示:如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-bs-trigger 属性，并设置值为 "hover":
<div class="container mt-3"> <h3>弹出框实例</h3> <a href="#" title="标题" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="一些内容">鼠标移动到我这</a> </div>
二、消息弹窗
2.1 创建弹窗
要创建弹窗可以使用 .toast 类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。
注意：弹窗默认是关闭的，可以使用 .show 来设置显示，关闭弹窗可以在 元素上添加 data-bs-dismiss="toast":
<div class="container mt-3"> <h3>弹窗实例</h3> <p>弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。。</p> <p>在这个页面的实例中我们使用 .show 来设置显示弹窗，可以点击关闭（X）图标来关闭弹窗。</p> <div class="toast show"> <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>
要通过点击按钮显示弹窗，您需要使用 JavaScript 对其进行初始化：通过 ID 获取指定元素的点击事件并调用 toast() 方法。
当点击按钮时，以下代码将显示页面中的所有 toast 类：
<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>
将弹窗显示在右下角：
<div class="container mt-5"> <button class="btn btn-primary" onclick="showToast()">显示弹窗</button> </div> <div class="position-fixed bottom-0 end-0 p-3"> <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="me-auto">弹窗标题</strong> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> 这是一个Bootstrap 5弹窗示例。 </div> </div> </div> <script> function showToast() { var toast = new bootstrap.Toast(document.getElementById('toast')); toast.show(); } </script>
2.2 设置多个消息弹窗：
<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="http://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="http://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>
