请问bootstrap5里的toast插件怎么调用

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

这是官方文档给的初始化代码,但是实在没有理解,请大佬能举一个具体的实例。ver5的初始化和ver4的差别有点大了。

// 将querySelectorAll得到的nodeList对象转化成一个数组
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
// 对数组遍历,并返回一个新的数组
var toastList = toastElList.map(function (toastEl) {
  // 返回一个Toast实例化对象
  return new bootstrap.Toast(toastEl, option)
})

// toastElList是页面内所有的toastDOM对象
// toastList是实例化后的toast对象数组
// toastEl是单个DOM对象
// option 是toast的配置项

配置项参考如下:

 

animation: 是否开启CSS动画效果

autohide: 是否开启自动隐藏

delay: 延迟隐藏时间 

 

页面内只有一个Toast的初始化方法

const options = {
  animation: true, // 开启过渡动画
  autohide: true, // 开启自动隐藏
  delay: 3000 // 3000ms后自动隐藏
}
const toastEl = document.getElementById('toast')
const toast = new bootstarp.Toast(toastEl, options)

 

最新版bootstrap 只到4啊。。。

这里有详细教程

https://v4.bootcss.com/docs/components/toasts/

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632