Bootstrap 5 警告

警告

Bootstrap 5 提供了一種創建預定義警告消息的簡單方法：

警告框是使用 .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>

親自試一試

關閉警告

如需關閉警告消息，請將 .alert-dismissible 類添加到警告容器。然后將 class="btn-close" 和 data-bs-dismiss="alert" 添加到鏈接或按鈕元素（當您單擊它時，警告框將消失）。

實例

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

親自試一試

警告框動畫

.fade 和 .show 類在關閉警告消息時添加淡入淡出效果：

實例

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

親自試一試