Bootstrap4 資訊提示框
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>成功!</strong> 指定操作成功提示資訊。
</div>
提示框添加鏈接
提示框中在鏈接的標籤上添加 alert-link 類來設置匹配提示框顏色的鏈接：
實例
<div class="alert alert-success">
<strong>成功!</strong> 你應該認真閱讀 <a href="#" class="alert-link">這條資訊</a>。
</div>
關閉提示框
我們可以在提示框中的 div 中添加 .alert-dismissible 類，然後在關閉按鈕的鏈接上添加 class="close" 和 data-dismiss="alert" 類來設置提示框的關閉操作。
實例
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>成功!</strong> 指定操作成功提示資訊。
</div>
提示: × (×) 是 HTML 實體字元，來表示關閉操作，而不是字母 "x"。
提示框動畫
.fade 和 .show 類用於設置提示框在關閉時的淡出和淡入效果：
實例
<div class="alert alert-danger alert-dismissible fade show">