尤川豪   ·  8月前
Exp. 1,778  ·  231 貼文  ·  164 留言

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

第3課 課程目標

能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。

第3課 課程內容

業界工程師會去使用 Bootstrap,除了美感之外,通常還有一大理由就是想用它的網格系統。

以網頁設計常見的多欄式設計來說,手寫 html 跟 css 實在有點麻煩:

CSS DIV 兩欄式網頁排版

CSS DIV 三欄式網頁排版設計

所以來學習簡單好用的網格系統吧!

請閱讀以下教學的內容:

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

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

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

http://getbootstrap.com/docs/4.1/layout/grid/

內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出基本的多欄式網頁佈局即可。

第3課 作業

繼續承接之前的作業。我們在前幾課做出了 Yahoo 的新聞頁以及導覽列,這一課的作業有兩個。

作業一

請繼續修改之前的作業,除了新聞內容與導覽列之外,請接著利用 Bootstrap 網格系統將整個頁面都做出來。

請至少將側邊推薦其他新聞的區塊做出來,其餘的可以省略。

作業二

請再開一份 Thimble 專案,我們要做 Yahoo 新聞的首頁:

https://tw.news.yahoo.com

我們要用 Yahoo 新聞首頁來練習多欄式排版。

請利用 Bootstrap 網格系統,將整個首頁的排版都切出來。

各個區塊的內容盡量省略、簡化,利用純文字或是 <ul>、<li> 清單元素,只放標題跟一些文字即可。

完成以上兩份作業,你就完成這次的課程目標了!

  分享   共 638 次點閱
共有 4 則留言
feifeitzu   ·  4月前
Exp. 121  ·  0 貼文  ·  21 留言

版主你好,又是我~花了一些時間熟悉bootstrap的網格系統,在此附上網址。

作業一:https://thimble.mozilla.org/zh-TW/user/feifeitzu/2237459

作業二:https://thimble.mozilla.org/zh-TW/user/feifeitzu/2246886

謝謝版主的分享~

 
尤川豪   ·  4月前
Exp. 1,778  ·  231 貼文  ·  164 留言

你好 這兩個網址我點進去是 Thimble 的預設頁面

看不到你的作業欸 是不是沒有存檔到?

feifeitzu   ·  4月前
Exp. 121  ·  0 貼文  ·  21 留言

忘記要發佈了⋯新的網址在此,

作業一:https://thimbleprojects.org/feifeitzu/651333/

作業二:https://thimbleprojects.org/feifeitzu/651335/

謝謝版主~!

尤川豪   ·  4月前
Exp. 1,778  ·  231 貼文  ·  164 留言

你好,我看到你寫的兩份作業囉!

沒問題唷,寫得很好!你已經學會怎麼用 Bootstrap 的網格系統去排版了!

學習目標順利完成!期待看到你之後的作業唷!

您的留言