自學網頁の嬰兒教材:Bootstrap

業界最常用到的基本工具,美化介面設計懶人包,前端新手必學的入門教材!

自學網頁の嬰兒教材:Bootstrap

業界最常用到的基本工具,美化介面設計懶人包,前端新手必學的入門教材!

自學網頁の嬰兒教材:第1課 ── 安裝:網頁突然好美美

# 第1課 課程目標 學會安裝 Bootstrap。 # 第1課 課程內容 第一課只要學會如何安裝 Bootstrap 就可以了。 Bootstrap 安裝好之後,瀏覽器預設的 h1, h2, h3, p 等等基本元素的樣式就會被覆蓋。 會變成 Bootstrap 的預設樣式,會更漂亮。 在網頁中引入 Bootstrap 的 css 與 js 檔的方式有很多,其中最簡單的是直接引入 BootstrapCDN 的線上檔案,連下載檔案都不用。 請閱讀一些 Bootstrap 基本觀念: https://www.w3schools.com/bootstrap5/bootstrap_get_started.php https://www.w3schools.com/bootstrap5/bootstrap_typography.php 然後參考官網的 BootstrapCDN 段落: https://getbootstrap.com/docs/5.3/getting-started/download/ --- 對於引入外部檔案的觀念不熟悉的話,請參考這份的「External Style Sheet」段落: https://www.w3schools.com/css/css_howto.asp 以及這份的「JavaScript in External File」段落: https://www.tutorialspoint.com/javascript/javascript_placement.htm # 第1課 作業 請打開:[Yahoo奇摩新聞](https://tw.news.yahoo.com) 找一篇你喜歡的新聞,把新聞內容打出來。 接著打開 [Glitch](https://glitch.com/),用 Glitch 來寫這次的作業。 只要打出文章標題與內容就好,上方的導覽列、旁邊的新聞頭條那些區塊都不用。 做完之後,你會發現,雖然只用了 h1、p、br 等等基本元素,但是套用 Bootstrap 之後,整個畫面自動變漂亮了! 完成這些,你就完成這次的課程目標了!

自學網頁の嬰兒教材:第3課 ── 網格系統:頁面分區塊排個版

# 第3課 課程目標 能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。 # 第3課 課程內容 業界工程師會去使用 Bootstrap,除了美感之外,通常還有一大理由就是想用它的網格系統。 以網頁設計常見的多欄式設計來說,手寫 html 跟 css 實在有點麻煩: [CSS DIV 兩欄式網頁排版](http://www.wibibi.com/info.php?tid=406) [CSS DIV 三欄式網頁排版設計](http://www.wibibi.com/info.php?tid=407) 所以來學習簡單好用的網格系統吧! 請閱讀以下教學的內容: https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出基本的多欄式網頁佈局即可。 # 第3課 作業 繼續承接之前的作業。我們在前幾課做出了 Yahoo 的新聞頁以及導覽列,這一課的作業有兩個。 ## 作業一 請繼續修改之前的作業,除了新聞內容與導覽列之外,請接著利用 Bootstrap 網格系統將整個頁面都做出來。 請至少將側邊推薦其他新聞的區塊做出來,其餘的可以省略。 ## 作業二 請再開一份 Glitch 專案,我們要做 Yahoo 新聞的首頁: https://tw.news.yahoo.com 我們要用 Yahoo 新聞首頁來練習多欄式排版。 請利用 Bootstrap 網格系統,將整個首頁的排版都切出來。 各個區塊的內容盡量省略、簡化,利用純文字或是 `<ul>、<li>` 清單元素,只放標題跟一些文字即可。 完成以上兩份作業,你就完成這次的課程目標了!

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

# 第4課 課程目標 學會使用 Bootstrap 的卡片元件。 # 第4課 課程內容 卡片式設計近幾年非常流行,在各大網站中都看得到它。 它的功能非常通用,可以在各種場景中使用,這一課要學習使用它。 請閱讀入門教學: https://www.w3schools.com/bootstrap5/bootstrap_cards.php 以及官方說明文件: https://getbootstrap.com/docs/5.3/components/card/ 內容不用全部讀完,也不用全部讀懂,能做出基本的卡片設計即可。 # 第4課 作業 這一課的作業要延續第3課的作業二。 在上一次的作業中,我們做出了整個 Yahoo 新聞首頁的排版,不過各區塊的內容都簡化了。 我們這一次要把內容補上,讓畫面變豐富。 請利用本課學到的卡片元件,在畫面中所有看起來像卡片的地方,全部套用卡片元件,讓卡片元件內有圖片、文字。 做完之後,整個畫面看起來會更接近真正的 Yahoo 新聞首頁。 注意:實際上 Yahoo 新聞首頁的卡片元件不多,幾乎都不是卡片元件(比如說根本沒有邊框)。 這一課作業是以練習為主,把看起來能套用卡片的地方套用就好,套不進去的地方維持原本的陽春即可。或是到處都套用卡片元件也沒關係,看起來類似原本的 Yahoo 新聞首頁即可。 完成這些,你就完成這次的課程目標了!


👉 身份:資深全端工程師、指導過無數人半路出家轉職 👉 使命:打造 CodeLove 成為優質新手村,讓非本科也有地方自學&討論