自學網頁の嬰兒教材：第4課 ── 卡片元件：又美又好用的元件

第4課 課程目標

學會使用 Bootstrap 的卡片元件。

第4課 課程內容

卡片式設計近幾年非常流行，在各大網站中都看得到它。

它的功能非常通用，可以在各種場景中使用，這一課要學習使用它。

請閱讀入門教學：

https://www.w3schools.com/bootstrap4/bootstrap_cards.asp

以及官方說明文件：

https://getbootstrap.com/docs/4.1/components/card/

內容不用全部讀完，也不用全部讀懂，能做出基本的卡片設計即可。

第4課 作業

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

在上一次的作業中，我們做出了整個 Yahoo 新聞首頁的排版，不過各區塊的內容都簡化了。

我們這一次要把內容補上，讓畫面變豐富。

請利用本課學到的卡片元件，在畫面中所有看起來像卡片的地方，全部套用卡片元件，讓卡片元件內有圖片、文字。

做完之後，整個畫面看起來會更接近真正的 Yahoo 新聞首頁。

注意：實際上 Yahoo 新聞首頁的卡片元件不多，幾乎都不是卡片元件（比如說根本沒有邊框）。

這一課作業是以練習為主，把看起來能套用卡片的地方套用就好，套不進去的地方維持原本的陽春即可。或是到處都套用卡片元件也沒關係，看起來類似原本的 Yahoo 新聞首頁即可。

完成這些，你就完成這次的課程目標了！