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

青灯夜游

发布时间：2021-12-08 19:19:55

5972人浏览过

来源于掘金社区

转载

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

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

1 吐司消息（Toasts）示例

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

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



  
    
    
    
    
    
    Popovers
  
  
    
        




        
        
          
            
            吐司消息提示
            11 mins ago
            
            
            
            你有一条短消息！

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的浏览器，还会尝试对吐司下方的元素进行模糊效果。



  
    
    
    
    
    
    吐司消息
  
  
    
        




        
        
          
          半透明吐司
          11 mins ago
          
          
          
            你有一条短消息！

4 堆叠

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

Replit Ghostwrite

一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。

下载

5 自定义内容

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

6 配色方案

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

7 设置显示位置

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



Toast placement







  @@##@@
  Bootstrap
  11 mins ago


  Hello, world! This is a toast message.

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



  
    
    
    
    
    
    吐司消息
  
  
    
        




        
        
          
            
            吐司消息提示
            11 mins ago
            
            
            
            你有一条短消息！

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

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

bootstrap抽样验证线性假设的方法

bootstrap法在生存分析中的应用实例

Stata中Bootstrap结果的统计显著性判断

bootstrap法计算模型R方的置信区间

bootstrap抽样用于模型比较的详细流程

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

557

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

395

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

756

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

478

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

474

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

1051

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

659

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

554

2023.09.20