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 淡入淡出过渡效果。
|
|
| 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 转换完成后） |