Bootstrap - Alerts：您的友好通知指南
你好，有抱負的網頁開發者！今天，我們將要深入Bootstrap Alerts的精彩世界。作為你們鄰居的電腦老師，我很興奮能帶領你們踏上這次旅程。相信我，在這個教學結束時，你將能創建有吸引力的alert！
Bootstrap Alerts是什麼？
在我們開始之前，讓我們先來了解一下alerts是什麼。想像你在街上走著，突然看到一個亮黃色的標誌，上面寫著「小心：濕滑地面」。這就是現實世界中的alert！在網頁設計中，alerts有著類似的目的 - 它們能吸引使用者的注意力，並提供重要信息。
Bootstrap，我們可靠網頁設計工具包，讓創建這些alerts變得非常容易。那麼，讓我們捋起袖子開始吧！
簡單Alerts：基礎構件
基本結構
讓我們從最簡單形式的alert開始。這是它的樣子：
<div class="alert alert-primary" role="alert">
這是一個主要alert - 檢查一下！
</div>現在，讓我們來解析這個：
- 我們從一個
<div>元素開始。可以把這個想像成一個將包含我們alert的盒子。 -
class="alert"告訴Bootstrap這個div是一個alert。 -
alert-primary設置顏色方案。在這個例子中，它是主要顏色（通常是Bootstrap中的藍色）。 -
role="alert"是為了無障礙使用。它幫助屏幕閱讀器理解這是一個alert。
多彩Alerts
Bootstrap為我們提供了各種顏色選擇。讓我們看看所有的選項：
| 類別 | 目的 |
|---|---|
| alert-primary | 主題顏色 |
| alert-secondary | 次要主題顏色 |
| alert-success | 表示成功 |
| alert-danger | 表示危險或錯誤 |
| alert-warning | 表示警告 |
| alert-info | 提供信息 |
| alert-light | 淡色背景與深色文字 |
| alert-dark | 深色背景與淺色文字 |
嘗試在我們的範例中將alert-primary替換為這些不同的類別。這就像是有了一盒彩色筆，可以用來為你的alerts上色！
實時Alert範例：讓Alerts活起來
現在，讓我們看看如何讓我們的alerts響應用戶操作。這裡有一個很酷的技巧：
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">顯示實時alert</button>
<script>
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
appendAlert('太棒了，你觸發了這個alert訊息！', 'success')
})
}
</script>哇，這可真不少！讓我們來解析一下：
- 我們有一個placeholder
<div>，我們的alert將會出現。 - 有一個按鈕，當點擊時，會顯示alert。
- JavaScript代碼會聆聽按鈕的點擊事件。
- 當點擊時，它會創建一個新的alert並將其添加到頁面上。
這就像魔法一樣 - 你點擊一個按鈕，然後吧哒！一個alert就出現了！
链接颜色：讓你的链接脫穎而出
有時候，你想要在你的alerts中添加链接。Bootstrap確保這些链接能夠脫穎而出：
<div class="alert alert-primary" role="alert">
這是一個主要alert，帶有<a href="#" class="alert-link">一個範例链接</a>。如果你喜歡，點擊看看。
</div>alert-link類別確保链接顏色與alert的主題相匹配。這就像協調你的服裝 - 一切都搭配得完美！
附加内容：讓你的Alerts更強大
想要讓你的alerts更具信息性？你可以添加標題、段落，甚至分隔線：
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">做得好！</h4>
<p>哇啊，你成功地閱讀了這個重要的alert訊息。這個範例文本會稍微長一點，這樣你就可以看到alert內部的間距是如何與這種類型的内容一起工作的。</p>
<hr>
<p class="mb-0">無論何時，當你需要時，都要確保使用間距工具以保持事物的整潔。</p>
</div>這就像把你的alert轉變成了迷你文章。當你有更多話要說時，這非常完美！
帶有圖标的Alerts：添加視覺效果
圖標可以使你的alerts更加引人注目。這是如何添加它們的方法：
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
带有图标示例的alert
</div>
</div>這裡的SVG代碼創建了一個小三角形警告標誌。這就像在你的文字消息中添加表情符號 - 它幫助傳達情緒！
關閉Alerts：讓用戶關閉它們
有時候，你想要給用戶關閉alert的選項。這是如何做到的：
<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類別和帶有data-bs-dismiss="alert"的<button>使這個alert可關閉。這就像給你的用戶一個對alerts的遙控器！
带动画的Alerts：添加一些魅力
最後，讓我們來談談為我們的alerts添加一些動畫。Bootstrap使用fade和show類別來做到這一點：
<div class="alert alert-primary alert-dismissible fade show" role="alert">
這個alert會淡入淡出！
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>fade類別添加了一個平滑的過渡效果，而show類別使alert可見。當alert被關閉時，它會優雅地淡出。這就像你的alert在離開舞台前鞠躬一樣！
至於你們，各位！你剛剛完成了一個Bootstrap Alerts的旋風之旅。記住，熟能生巧，所以不要害怕嘗試這些範例。在你還不知道之前，你將能夠創建有吸引力且風格和功能都能讓用戶滿意的alerts。快樂編程，願你的alerts總是能吸引注意力（以好的方式）！
Credits: Image by storyset