Bootstrap4（7）： 表格設置 信息提示框



一、提示框

提示框可以使用 .alert 類（無背景）, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light ,.alert-dark或 .alert-light 類來實現:

<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">

嘗試一下 »