課程目標
認識並且能實做 alert 元件
課程內容
alert 中文叫「示警」元件，當有訊息要公告在網站上，就可使用
或者當用戶執行了某些動作，在頁面上要提示、回饋訊息的時候，也可使用
通常要將 alert 做成幾種不同樣式，根據不同使用情境來使用
由於 alert 可能會佔據網頁上方、或下方，一整塊長條區域
會有點佔空間，所以通常會多做「關閉」按鈕，方便用戶保持畫面整潔
請上網搜尋 alert ui alert component，四處觀摩一下業界常見的設計
課後作業
用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份
<div class="alert alert-primary">
歡迎您點擊「抖內」按鈕，以實際行動支持我們。
<button class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-success">
您已成功下訂單！以下為您的訂單詳細資訊。
<button class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-danger">
抱歉，系統發生錯誤，請稍後重新嘗試。
<button class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-warning">
請注意，以下內容包含「劇透」爆雷資訊。
<button class="btn-close">×</button>
</div>這邊共有四個 alert 元件，各自有不同樣式
primary 用在主要公告事項，呈現藍色
success 用來傳遞讓人安心的成功訊息，呈現綠色
danger 用來提示錯誤訊息，呈現紅色
warning 用來呈現敏感注意事項，呈現橘色
這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定
訊息的旁邊，有一個關閉按鈕，點擊按鈕，要能關閉整個 alert 元件
請稍微加一些 css 屬性，弄得漂亮一點
<hr> 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係
做出以上功能，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
共有 36 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
按讚的人：
按讚的人：
按讚的人：
按讚的人：
交作業，再麻煩站長了，謝謝!
https://ui-alert.glitch.me
按讚的人：
按讚的人：
按讚的人：
按讚的人：
按讚的人：
按讚的人：
課程內容
作業繳交
https://jsfiddle.net/u1nym2dg/45/