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

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

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

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

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

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

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

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

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

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

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

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

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

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

0個讚   0留言 757瀏覽
站長阿川
每週二 YT 直播問答，DC 可 Call-in，一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D
熱門搜尋： __ 使用 ar re https ul am COM 伺服 學習 AM Ts Re 開發 javas AR 工程 程式 ui github 設計 語言 AI id bi API js git 專案 java la 平台 log jav LA AWS Js type app 框架 javasc CLI JS javascript with go 個人 web 討論 Ai Javascript Type 工作 GitHub 基礎 api ai the COMPO Java 作為 user Git CD GIT aws post wEB Line 測試 網站 SQL 分享 css Javas Python node 嗎？ vs html 前端 查詢 for token react 架構 Ml ＣＳＳ 系列 HTML 技術 cn ci search React 主題 資料夾 Typescript work Css
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。