Bootstrap JS Toasts 提示插件

Toast CSS 类

Toast 提示插件组件就像一个警报框,仅在发生某些事情时显示几秒钟(即当用户单击按钮、提交表单等时)。

有关 Toast 的教程,请阅读我们的 Bootstrap Toast 教程

描述 实例
.toast 创建 toast 测试一下
.toast-header 创建 toast 标头 测试一下
.toast-body 创建 toast 主体 测试一下

通过 JavaScript 激活

Toast 必须使用 jQuery 进行初始化:选择指定的元素并调用 toast() 方法。

实例

<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>
亲自试一试 »

Toast 选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 data-, 如 data-animation=""

名称 类型 默认值 描述 试一试
animation boolean true

指定在显示和隐藏 toast 时是否添加 CSS 淡入淡出过渡效果。

  • true - 添加淡入淡出效果
  • false - 不添加淡入淡出效果
测试一下
autohide boolean true 指定是否默认隐藏 toast 测试一下
delay number 500 指定显示 Toast 后隐藏所需的毫秒数。 测试一下

Toast 方法

下表列出了所有可用的 toast 方法。

方法 描述 试一试
.toast(options) 使用选项激活 Toast。请参阅上面的选项以获取有效值 测试一下
.toast("show") 显示 toast 测试一下
.toast("hide") 隐藏 toast 测试一下
.toast("dispose") 隐藏并破坏 toast 测试一下

Toast 事件

下表列出了所有可用的 toast 事件。

事件 描述 试一试
show.bs.toast 在即将显示 toast 时发生 测试一下
shown.bs.toast 在 toast 完全显示时发生(在 CSS 转换完成后) 测试一下
hide.bs.toast 当 toast 即将被隐藏时发生 测试一下
hidden.bs.toast 在 toast 完全隐藏时发生(在 CSS 转换完成后) 测试一下