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留言 2,447瀏覽
RWD 網頁設計入門：第1課 ── 什麼是 RWD 呢？

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

0個讚   2留言 1,278瀏覽
RWD 網頁設計入門：第2課 ── 適應各種裝置的螢幕：流動的網格系統

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

0個讚   7留言 2,949瀏覽
RWD 網頁設計入門：第3課 ── 有些東西只在電腦顯示，有些東西只在手機顯示

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

0個讚   4留言 1,072瀏覽
RWD 網頁設計入門：第4課 ── 頭條新聞在電腦上順序是中間，在手機上順序是最前面

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

0個讚   4留言 1,085瀏覽
RWD 網頁設計入門：第5課 ── 能屈能伸，讓圖片適應各種螢幕

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

0個讚   9留言 1,342瀏覽
RWD 網頁設計入門：第6課 ── 親手搞定一個完整的 RWD 網頁！

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

0個讚   2留言 1,067瀏覽
自學網頁の嬰兒教材：結語

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

0個讚   0留言 816瀏覽
站長阿川
每週二 YT 直播問答，DC 可 Call-in，一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務：阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

管理台灣 Shopify 開發者 LINE 群組（非官方）👇👇👇
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA
熱門搜尋： cd 分享 api REACT 基礎 JS 伺服器 ar 程式 AI Ai Re javascript API Java JAVA 開發 結構 Ts CLI COM ci app 設計 專案 工作 ＣＳＳ 學習 公司 資料庫 LA 第一 git 討論 css 使用 研究 Type 前端 作為 json 平台 py AWS 技術 資料 網站 log javasc 後端 Html 測試 __ id cli React 媒體 blog 語言 %' 工程師 user ui 架構 軟體 效率 VS jav start for go https 資料夾 嗎？ Ml am Javascript ul ai CD [] 開源 js AR create vn 課程 LLM 伺服 作業 PYTHON ') vs 部署 wEB Gpt MR 圖片 SQL class
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。