RWD 網頁設計入門：Bootstrap —— 做出手機、平板、電腦上都 OK 的網頁

現在的網站畫面必須同時滿足電腦、手機螢幕、平板電腦的需求，這門課教你如何做到！

RWD 網頁設計入門：Bootstrap —— 做出手機、平板、電腦上都 OK 的網頁

現在的網站畫面必須同時滿足電腦、手機螢幕、平板電腦的需求，這門課教你如何做到！

課程內容
👉 RWD 網頁設計入門：第0課 ── 前言
👉 RWD 網頁設計入門：第1課 ── 什麼是 RWD 呢？
👉 RWD 網頁設計入門：第2課 ── 適應各種裝置的螢幕：流動的網格系統
👉 RWD 網頁設計入門：第3課 ── 有些東西只在電腦顯示，有些東西只在手機顯示
👉 RWD 網頁設計入門：第4課 ── 頭條新聞在電腦上順序是中間，在手機上順序是最前面
👉 RWD 網頁設計入門：第5課 ── 能屈能伸，讓圖片適應各種螢幕
👉 RWD 網頁設計入門：第6課 ── 親手搞定一個完整的 RWD 網頁！
👉 自學網頁の嬰兒教材：結語

RWD 網頁設計入門：第0課 ── 前言

大家好，有沒有想學寫網站的朋友呢？ 隨著智慧型手機的普及，現在的網站畫面必須同時滿足電腦、手機螢幕，甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 OK 的網頁呢？ 聰明的設計師們發明了一種稱為「Responsive Web Design」的畫面設計方法。 實作起來非...

0個讚   0留言 912瀏覽

RWD 網頁設計入門：第1課 ── 什麼是 RWD 呢？

# 第1課 課程目標 認識 RWD (Responsive Web Design) 的意思。能利用瀏覽器觀察 RWD 網站的變化。 # 第1課 課程內容 RWD 全名 Responsive Web Design，是現在智慧型手機普及的年代，最廣泛被採用的設計方法之一。 乍聽之...

0個讚   2留言 782瀏覽

RWD 網頁設計入門：第2課 ── 適應各種裝置的螢幕：流動的網格系統

# 第2課 課程目標 能夠使用 Bootstrap 網格系統來打造適應各種螢幕大小的排版。 # 第2課 課程內容 這一課要學習使用 Bootstrap 的網格系統。 請參考這幾份教學： - https://www.w3schools.com/css/css_rwd_in...

0個讚   6留言 1,280瀏覽

RWD 網頁設計入門：第3課 ── 有些東西只在電腦顯示，有些東西只在手機顯示

# 第3課 課程目標 能夠將元素只顯示在特定裝置上面。例如有些東西只在電腦顯示，有些東西只在手機顯示。 # 第3課 課程內容 請參考： https://getbootstrap.com/docs/5.3/utilities/display/ # 第3課 作業 承接...

0個讚   3留言 625瀏覽

RWD 網頁設計入門：第4課 ── 頭條新聞在電腦上順序是中間，在手機上順序是最前面

# 第4課 課程目標 能夠讓元素在不同裝置上面，以不同的順序顯示。 # 第4課 課程內容 請參考：https://getbootstrap.com/docs/5.3/layout/columns/#order-classes # 第4課 作業 承接前一課的作業。 ...

0個讚   3留言 528瀏覽

RWD 網頁設計入門：第5課 ── 能屈能伸，讓圖片適應各種螢幕

# 第5課 課程目標 讓圖片在各種裝置上都能順利顯示。 # 第5課 課程內容 請參考：https://www.w3schools.com/howto/howto_css_image_responsive.asp # 第5課 作業 承接前一課的作業。 ![](htt...

0個讚   8留言 928瀏覽

RWD 網頁設計入門：第6課 ── 親手搞定一個完整的 RWD 網頁！

# 第6課 課程目標 運用目前所學到的技巧，完成一個完整的 RWD 網頁。 # 第6課 課程內容 這門課到目前為止所教的技巧，只有運用 Bootstrap 快速、方便的做出網頁排版。 我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。 很棒的是，光是這些...

0個讚   0留言 597瀏覽

自學網頁の嬰兒教材：結語

最後，謝謝你耐心的完成這整套課程！ 進階的 RWD 技巧，以及 RWD 背後深入的 css 原理，會在別門課程提到。 但是目前所學的基本技巧，應該已經很足夠使用！

0個讚   0留言 426瀏覽
站長阿川
👉 身份：資深全端工程師、指導過無數人半路出家轉職 👉 使命：打造 CodeLove 成為優質新手村，讓非本科也有地方自學＆討論
熱門搜尋： 公司 作為 網站 框架 媒體 改善 "; 取代 QA 開發 伺服器 '; ') 技術 分享 系列 作品 php AWS part ui solid 入門 工作 Js css 客製化 odf design gpt 演算法 title html id 乾淨 Openai 使用 onClick JS JavaScript ＣＳＳ github action ejs 搜尋 練習 Javas node 模仿 Java 作業 React Context 邁向資深之路 lara jqu M' sap Response git app 結構 for REACT 架構 學習 前端 ar spotify Entity Ml' 中文 React' 聊天機器人 ci component 語言 COM error Line javascript JAVA 論壇 Ml react pchun vs 課程 套件 spring boot docke js javasc 新創 第一 vim index.php HTML與CSS作業分享 Vue postgresql 效率 部署
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。