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 過渡完成後） | 試一試 |
