警告框

警告

Bootstrap 5 提供了一種創(chuàng)建預(yù)定義警告消息的簡(jiǎn)單方法：

警告框是使用 .alert 類創(chuàng)建的，后跟上下文類之一：

• .alert-success
• .alert-info
• .alert-warning
• .alert-danger
• .alert-primary
• .alert-secondary
• .alert-light
• .alert-dark

實(shí)例

<div class="alert alert-success">
  <strong>成功！</strong>此警報(bào)框表示成功或積極的動(dòng)作。
</div>

警告鏈接

將 .alert-link 類添加到警告框內(nèi)的任何鏈接，可創(chuàng)建“匹配的彩色鏈接”：

實(shí)例

<div class="alert alert-success">
  <strong>成功！</strong>您應(yīng)該<a href="#" class="alert-link">閱讀這條消息</a>。
</div>

關(guān)閉警告

如需關(guān)閉警告消息，請(qǐng)將 .alert-dismissible 類添加到警告容器。然后將 class="btn-close" 和 data-bs-dismiss="alert" 添加到鏈接或按鈕元素（當(dāng)您單擊它時(shí)，警告框?qū)⑾В?/p>

實(shí)例

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>成功！</strong>此警報(bào)框表示成功或積極的動(dòng)作。
</div>

警告框動(dòng)畫

.fade 和 .show 類在關(guān)閉警告消息時(shí)添加淡入淡出效果：

實(shí)例

<div class="alert alert-danger alert-dismissible fade show">