Bootstrap JS 吐司
吐司 CSS 类
吐司组件类似于警报框，仅在发生某些事情（例如用户点击按钮、提交表单等）时显示几秒钟。
有关吐司的教程，请阅读我们的 Bootstrap 吐司教程。
| 类 | 描述 | 示例 |
|---|---|---|
.toast |
创建吐司 | 试一试 |
.toast-header |
创建吐司标题 | 试一试 |
.toast-body |
创建吐司正文 | 试一试 |
通过 JavaScript 激活
吐司必须使用 jQuery 进行初始化：选择指定的元素并调用 toast() 方法。
吐司选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，例如 data-animation=""。
| 名称 | 类型 | 默认值 | 描述 | 试一试 |
|---|---|---|---|---|
| animation | boolean | true |
指定在显示和隐藏吐司时是否添加 CSS 淡入淡出过渡效果。
|
试一试 |
| autohide | boolean | true | 指定是否默认隐藏吐司 | 试一试 |
| delay | 数字 | 500 | 指定吐司显示后隐藏所需的时间（毫秒）。 | 试一试 |
吐司方法
下表列出了所有可用的吐司方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .toast(选项) | 使用一个选项激活吐司。有关有效值，请参见上面的选项 | 试一试 |
| .toast("show") | 显示吐司 | 试一试 |
| .toast("hide") | 隐藏吐司 | 试一试 |
| .toast("dispose") | 隐藏并销毁吐司 | 试一试 |
吐司事件
下表列出了所有可用的吐司事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| show.bs.toast | 当吐司即将显示时发生 | 试一试 |
| shown.bs.toast | 当吐司完全显示后发生（CSS 过渡完成后） | 试一试 |
| hide.bs.toast | 当吐司即将隐藏时发生 | 试一试 |
| hidden.bs.toast | 当吐司完全隐藏后发生（CSS 过渡完成后） | 试一试 |
