第5課 課程目標

學會使用 Bootstrap 的訊息框框元件。

第5課 課程內容

訊息框框在所有網站都會有,在需要顯示歡迎訊息、提醒訊息、公告事項等等的時候,都可以使用。

這一課要學習使用它。

請閱讀入門教學:

https://www.w3schools.com/bootstrap5/bootstrap_alerts.php

以及官方說明文件:

https://getbootstrap.com/docs/5.3/components/alerts/

第5課 作業

這一課的作業要延續第3課的作業一。

在第3課的作業一中,我們做出了 Yahoo 新聞頁的排版。

假設你是發佈新聞的平台,你希望顯示訊息歡迎使用者,並且顯示訊息提醒讀者內容是由合作的媒體發佈,新聞平台不對內容負責任。

請在這個新聞頁面加上兩個 alert 元件。

第一個 alert 元件使用 alert-info 樣式,內含歡迎訊息,並且這個 alert 要可以點擊 × 關閉。

第二個 alert 元件使用 alert-warning 樣式,內含免除責任聲明,這個 alert 無法點擊 × 關閉,會一直顯示在那裡。

注意:這一課作業是以練習為主,實際上 Yahoo 新聞頁面並沒有這些東西。

完成這些,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 6 則留言

交作業,再麻煩站長了! 謝謝! https://practice-to-bootstrap.glitch.me

按讚的人:

寫得很好,順利完成!

交作業,麻煩站長了! 謝謝! https://bootstrap-lesson5-hw.glitch.me

按讚的人:

寫得很好,順利完成!

交作業~麻煩站長了,謝謝 https://just-mini-protest.glitch.me/

按讚的人:

寫得很好,順利完成!