Bootstrap 4 警告框
Bootstrap 4 警告框
Bootstrap 4 提供了一種簡單的方法來建立預定義的警告訊息
成功！ 此警告框表示成功或積極的操作。
資訊！ 此警告框表示中性資訊性更改或操作。
警告！ 此警告框表示可能需要注意的警告。
危險！ 此警告框表示危險或潛在的負面操作。
主要！ 此警告框表示一個重要操作。
次要！ 此警告框表示一個不太重要的操作。
深色！ 深灰色警告框。
淺色！ 淺灰色警告框。
警告框使用 .alert 類建立，後跟一個上下文類 .alert-success、.alert-info、.alert-warning、.alert-danger、.alert-primary、.alert-secondary、.alert-light 或 .alert-dark
示例
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
自己動手試一試 »
警報連結
在警告框內的連結中新增 alert-link 類，以建立“匹配顏色的連結”
成功！ 您應該 閱讀此訊息。
資訊！ 您應該 閱讀此訊息。
警告！ 您應該 閱讀此訊息。
危險！ 您應該 閱讀此訊息。
主要！ 您應該 閱讀此訊息。
次要！ 您應該 閱讀此訊息。
深色！ 您應該 閱讀此訊息。
淺色！ 您應該 閱讀此訊息。
示例
<div class="alert alert-success">
<strong>成功！</strong> 您應該 <a href="#" class="alert-link">閱讀此訊息</a>。
</div>
自己動手試一試 »
關閉警報
× 點選右側的“x”符號關閉我。
要關閉警告訊息，請向警告容器新增 .alert-dismissible 類。然後向連結或按鈕元素新增 class="close" 和 data-dismiss="alert"（點選此元素時，警告框將消失）。
示例
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
自己動手試一試 »
提示： × (×) 是 HTML 實體，它比字母“x”更適合用作關閉按鈕的圖示。
如需所有 HTML 實體的列表，請訪問我們的 HTML 實體參考。
動畫警報
× 點選右側的“x”符號關閉我。我將“淡出”。
新增 .fade 和 .show 類可在關閉警告訊息時新增淡出效果
完整的 Bootstrap 4 警告框參考
有關所有警告框選項、方法和事件的完整參考，請訪問我們的 Bootstrap 4 JS 警告框參考。
