Bootstrap5警告框：提示信息樣式與場景應用

Bootstrap5提供了一套簡潔而強大的警告框（Alert）組件，用於在頁面中展示提示信息、狀態反饋或操作結果。無論是表單提交後的成功提示、操作錯誤的警告，還是需要用戶注意的系統通知，警告框都能以統一美觀的方式呈現。相比原生HTML的提示框，Bootstrap的警告框支持多種樣式、動畫效果和交互功能，且完全響應式，能快速適配不同設備屏幕。

快速上手：創建第一個警告框¶

要使用Bootstrap5的警告框，首先需要在項目中引入Bootstrap5的CSS和JS文件。最簡單的方式是通過CDN引入：

<!-- 引入Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入Bootstrap5 JS（包含Popper依賴，支持所有交互功能） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

創建一個基礎警告框，只需使用alert類和顏色主題類：

<div class="alert alert-primary" role="alert">
  這是一個基礎提示信息，使用alert-primary樣式。
</div>

渲染後會看到一個藍色的矩形框，包含提示文字，這就是最基礎的警告框。

核心樣式：豐富的顏色主題¶

Bootstrap5爲警告框預設了多種顏色主題，通過不同的類名快速切換，每個顏色對應特定場景：

類名	顏色	適用場景
`alert-primary`	藍色	普通信息提示
`alert-success`	綠色	操作成功（如提交表單）
`alert-danger`	紅色	錯誤提示（如服務器連接失敗）
`alert-warning`	黃色	警告信息（如密碼即將過期）
`alert-info`	淺藍色	補充說明（如系統通知）
`alert-secondary`	灰色	次要信息

示例：不同顏色的警告框

<!-- 成功提示 -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>成功！</strong> 您的訂單已提交成功。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- 錯誤提示 -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>錯誤！</strong> 網絡連接失敗，請檢查後重試。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- 警告提示 -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>注意！</strong> 您的存儲空間即將滿，請及時清理。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

alert-dismissible：添加關閉按鈕（×圖標），點擊後自動隱藏警告框。
fade show：添加淡入淡出動畫效果（關閉時平滑消失）。

實用功能：鏈接與交互增強¶

1. 高亮鏈接：`alert-link`¶

在警告框內使用鏈接時，alert-link類會讓鏈接顏色與警告框主題一致，避免鏈接顏色突兀：

<div class="alert alert-info alert-dismissible fade show" role="alert">
  點擊 <a href="#" class="alert-link">這裏</a> 查看詳細幫助文檔。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

2. 自動隱藏：通過JS控制¶

如需警告框自動消失（如5秒後隱藏），可結合JavaScript實現：

<div id="autoHideAlert" class="alert alert-success alert-dismissible fade show" role="alert">
  5秒後自動隱藏...
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<script>
  setTimeout(() => {
    const alert = new bootstrap.Alert(document.getElementById('autoHideAlert'));
    alert.close(); // 調用close()方法隱藏警告框
  }, 5000); // 5000毫秒後執行
</script>

典型場景應用示例¶

場景1：表單提交成功提示¶

用戶提交表單後，在頁面頂部顯示成功提示：

<div class="alert alert-success alert-dismissible fade show" role="alert" style="margin-bottom: 0;">
  <i class="bi bi-check-circle"></i> <strong>提交成功！</strong> 您的反饋已收到，我們將盡快處理。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

場景2：刪除操作確認提示¶

點擊刪除按鈕時，彈出確認警告框，防止誤操作：

<button class="btn btn-danger" onclick="showDeleteAlert()">刪除</button>

<div id="deleteAlert" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
  <strong>確認刪除？</strong> 此操作不可撤銷，確定要刪除嗎？
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  <button class="btn btn-sm btn-success" onclick="confirmDelete()">確認</button>
</div>

<script>
  function showDeleteAlert() {
    const alert = document.getElementById('deleteAlert');
    alert.style.display = 'block';
    new bootstrap.Alert(alert).open(); // 顯示警告框
  }
  function confirmDelete() {
    // 執行刪除邏輯（如調用API）
    console.log('執行刪除操作');
  }
</script>

場景3：系統通知懸浮提示¶

在頁面右上角顯示系統通知，固定定位避免遮擋內容：

<div class="alert alert-info alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 999;">
  <i class="bi bi-bell"></i> 您有一條新消息未讀！
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

自定義警告框樣式¶

如需調整警告框外觀（如邊框、背景色），可通過自定義CSS覆蓋默認樣式：

/* 自定義綠色警告框 */
.custom-success-alert {
  background-color: #f0fff4 !important;
  border-left: 4px solid #4CAF50;
  color: #155724;
}

使用時添加自定義類：

<div class="alert alert-success custom-success-alert alert-dismissible fade show" role="alert">
  自定義成功提示
</div>

總結¶

Bootstrap5警告框通過簡單的類名組合，能快速實現提示信息的展示與交互。掌握以下關鍵點：

使用alert-*顏色類定義主題（如alert-success）。
通過alert-dismissible添加關閉按鈕，fade show啓用動畫。
用alert-link統一鏈接樣式，避免視覺衝突。
結合JS實現自動隱藏或複雜交互（如刪除確認）。

通過以上方法，你可以在項目中靈活應用警告框，提升用戶體驗和頁面提示的清晰度。