Bootstrap4 教程
Bootstrap4 信息提示框
Bootstrap4中，信息提示框功能的實現(xiàn)非常容易。而且可以使用各種類實現(xiàn)提示框的顏色、動畫等樣式。
提示框可以使用 .alert 類, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 類來實現(xiàn)顏色的變化:
提示框添加鏈接
提示框中在鏈接的標簽上添加 alert-link 類來設(shè)置匹配提示框顏色的鏈接：
實例
<div class="alert alert-success">
<strong>成功!</strong> 你應(yīng)該認真閱讀 <a href="#" class="alert-link">這條信息</a>。
</div>
運行代碼 ?
關(guān)閉提示框
我們可以在提示框中的 div 中添加 .alert-dismissible 類，然后在關(guān)閉按鈕的鏈接上添加 class="close" 和 data-dismiss="alert" 類來設(shè)置提示框的關(guān)閉操作。
實例
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>成功!</strong> 指定操作成功提示信息。
</div>
運行代碼 ?
提示: × (×) 是 HTML 實體字符，來表示關(guān)閉操作，而不是字母 "x"。
提示框動畫
.fade 和 .show 類用于設(shè)置提示框在關(guān)閉時的淡出和淡入效果：