Bootstrap中如何使用Toasts组件

4 堆叠

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

  
    
    
    
    
    
    
  
  
    

        




        显示吐司消息1
        显示吐司消息2
        

          
          

          吐司消息
          刚刚发送
          
          
          

          第一条消息
          
          
          
          
          

          吐司消息
          2分钟前
          
          
          

            第二条消息
          
          
        

      
     
     
  

5 自定义内容

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

  
    
    
    
    
    
    
  
  
    

        




        显示吐司消息
        
            

            邀请你穿越到三国！
            
            接受邀请
            关闭
            
            
         

      
     
     
  

6 配色方案

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

  
    
    
    
    
    
    
  
  
    

        




        显示吐司消息

        
            

            

            这里是红色背景的
            
            
            
        

      
     
     
  

7 设置显示位置

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

Toast placement

Select a position...
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right







  
  Bootstrap
  11 mins ago


  Hello, world! This is a toast message.

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

  
    
    
    
    
    
    
  
  
    

        




        显示吐司消息
        
          
            

            吐司消息提示
            11 mins ago
            
            
            

            你有一条短消息！
            
          
        

      
     
     
  

以上是“Bootstrap中如何使用Toasts组件”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！