Bootstrap中怎么使用Toasts组件？（示例讲解）

PHP中文网 • 2025年3月12日 23:59:55 • 编程技术 • 阅读 1

bootstrap中怎么使用toasts组件？下面本篇文章给大家介绍一下bootstrap5中吐司消息toasts组件的用法，希望对大家有所帮助！

1 吐司消息（Toasts）示例

吐司（Toasts）是一种轻量级通知，旨在模仿移动和桌面操作系统已经普及的推送通知。它们是用flexbox构建的，所以它们很容易对齐和定位。【相关推荐：《bootstrap》】

和弹出提示一样，吐司消息也需要自己初始化，不知为什么官网的初始化方法无效，我在国外网站找到一个可行的方法。

nbsp;html>                          Popovers                



                                                  吐司消息提示            11 mins ago                        
                        你有一条短消息！            
          
        
      
                document.querySelector("#liveToastBtn").onclick = function() {        new bootstrap.Toast(document.querySelector('.toast')).show();      }

登录后复制

2 设置选项

选项可以透过数据属性或是JavaScript传递。对于数据属性，将选项名称附加到data-bs-，如：data-bs-animation=””。

data-bs-animation=”true” 在吐司应用CSS fade转换效果data-bs-autohide=”true” 自动将吐司隐藏data-bs-delay=”5000″ ，延迟隐藏吐司5s（默认单位毫秒）

以上值为默认值，如果你对磨人的效果满意，根本不需要写那个，27.3.1例子中，我设置了data-bs-autohide=”false”设置不自动将吐司隐藏，这样好方便截图，否则鼠标只要在任何地方一点，消息框就消失了。

3 半透明的

吐司也可以是半透明的，因此能混合在它们可能出现的任何东西上。在支持CSS属性backdrop-filter的浏览器，还会尝试对吐司下方的元素进行模糊效果。

nbsp;html>                          吐司消息                



                                    半透明吐司          11 mins ago                    
                      你有一条短消息！          
          
      
                document.querySelector("#liveToastBtn").onclick = function() {        new bootstrap.Toast(document.querySelector('.toast')).show();      }

登录后复制

4 堆叠

可以透过将吐司包装于toast-container容器来推叠它们，这将会在垂直方向上增加一些间距。

nbsp;html>                          吐司消息                



                                                      吐司消息          刚刚发送                    
                    第一条消息          
          
                                        吐司消息          2分钟前                    
                      第二条消息          
          
        
      
                 document.querySelector("#liveToastBtn1").onclick = function() {        new bootstrap.Toast(document.querySelector('#toast1')).show();      }      document.querySelector("#liveToastBtn2").onclick = function() {        new bootstrap.Toast(document.querySelector('#toast2')).show();      }

登录后复制

5 自定义内容

透过移除子元件、调整通用类或是增加标记以自定义吐司。

nbsp;html>                          吐司消息                



                                        邀请你穿越到三国！                                                
            
         
      
                document.querySelector("#liveToastBtn").onclick = function() {        new bootstrap.Toast(document.querySelector('.toast')).show();      }

登录后复制

6 配色方案

基于以上的示例，您也可以透过我们的颜色通用类别建立不同的吐司配色方案。以下我们将bg-danger与text-white添加到toast，再把text-white添加到关闭按钮上。为了让边缘清晰显示，透过border-0移除了预设的边框。

nbsp;html>                          吐司消息                



                                                    这里是红色背景的            
                        
        
      
                document.querySelector("#liveToastBtn").onclick = function() {        new bootstrap.Toast(document.querySelector('.toast')).show();      }

登录后复制

7 设置显示位置

默认吐司消息显示在浏览器右下角，根据需求，使用自定义的CSS指定吐司位置。右上角通常用于通知，顶部的中间也是如此。如果您一次只要展示一个吐司，请将定位样式放在toast上。

登录后复制 @@##@@ Bootstrap 11 mins ago Hello, world! This is a toast message.

上面是官方例子，bootstrap我也没找到其中驱动的js代码。不过可以给大家参考一下，有兴趣的可以去研究一下，在这里我根据上面的代码，修改了个显示在左上角的。

nbsp;html>                          吐司消息                



                                                  吐司消息提示            11 mins ago                        
                        你有一条短消息！            
          
        
      
                document.querySelector("#liveToastBtn").onclick = function() {        new bootstrap.Toast(document.querySelector('.toast')).show();      }