Bootstrap中如何使用Toasts组件
这篇文章主要介绍Bootstrap中如何使用Toasts组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联成立于2013年,是专业互联网技术服务公司,拥有项目成都网站设计、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元吉木萨尔做网站,已为上家服务,为吉木萨尔各地企业和个人服务,联系电话:13518219792
1 吐司消息(Toasts)示例
吐司(Toasts)是一种轻量级通知,旨在模仿移动和桌面操作系统已经普及的推送通知。它们是用flexbox构建的,所以它们很容易对齐和定位。
和弹出提示一样,吐司消息也需要自己初始化,不知为什么官网的初始化方法无效,我在国外网站找到一个可行的方法。
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
容器来推叠它们,这将会在垂直方向上增加一些间距。
吐司消息
吐司消息 刚刚发送第一条消息吐司消息 2分钟前第二条消息
5 自定义内容
透过移除子元件、调整通用类或是增加标记以自定义吐司。
吐司消息
邀请你穿越到三国!
6 配色方案
基于以上的示例,您也可以透过我们的颜色通用类别建立不同的吐司配色方案。以下我们将bg-danger与text-white添加到toast,再把text-white添加到关闭按钮上。为了让边缘清晰显示,透过border-0移除了预设的边框。
吐司消息
这里是红色背景的
7 设置显示位置
默认吐司消息显示在浏览器右下角,根据需求,使用自定义的CSS指定吐司位置。右上角通常用于通知,顶部的中间也是如此。如果您一次只要展示一个吐司,请将定位样式放在toast上。
上面是官方例子,Bootstrap5 Toasts我也没找到其中驱动的js代码。不过可以给大家参考一下,有兴趣的可以去研究一下,在这里我根据上面的代码,修改了个显示在左上角的。
吐司消息
吐司消息提示 11 mins ago你有一条短消息!
以上是“Bootstrap中如何使用Toasts组件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享名称:Bootstrap中如何使用Toasts组件
网页URL:http://hbruida.cn/article/ghgpph.html