Bootstrap 4 提示框
Bootstrap 4 提示框
提示框元件就像一個警告框，它只在發生某些事件時顯示幾秒鐘（例如，當用戶單擊按鈕、提交表單等）。
提示框標題 5分鐘前
一些文字在提示框主體內
如何建立提示框
要建立提示框，請使用 .toast 類，並在其中新增 .toast-header 和 .toast-body。
<div class="toast">
<div class="toast-header">
提示框標題
</div>
<div class="toast-body">
一些文字在提示框主體內
</div>
</div>
注意： 提示框必須使用 jQuery 初始化：選擇指定的元素並呼叫 toast() 方法。
以下程式碼將顯示文件中的所有“提示框”：
顯示和隱藏提示框
提示框預設是隱藏的。使用 data-autohide="false" 屬性可以使其預設顯示。要關閉它，請使用 <button> 元素並新增 data-dismiss="toast"。
示例
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">提示框標題</strong>
<small class="text-muted">5分鐘前</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
一些文字在提示框主體內
</div>
</div>
自己動手試一試 »
注意到 mr-auto、ml-2 和 mb-1 類了嗎？它們用於新增特定的邊距。你將在 Bootstrap 4 工具類章節中瞭解更多關於它們的資訊。
完整的 Bootstrap 提示框參考
有關所有提示框選項、方法和事件的完整參考，請訪問我們的 Bootstrap JS 提示框參考。
