--- tags: 21 天帶您做出 Bootstrap 5 募資網站 --- # 第一堂: Bootstrap 5 - 環境建立 & RWD (任務LV2) ## Bootstrap 5 環境建立 ### 21 天 Bootstrap 5 新手教學實戰營 [Bootstrap體驗營](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2FNdGKchTeRBqbkTMiQ2HSmw) [第一堂直播: Bootstrap 5 新手教學實戰營 - 環境建立 (上)](https://www.youtube.com/watch?v=B9EGGQr-r80&t=1983s) [第一堂直播: Bootstrap 5 新手教學實戰營 - 環境建立 (下)](https://www.youtube.com/watch?v=DKYdBQqREzs&t=2214s) ### Bootstrap 5 文件 [Bootstrap 5 ](https://getbootstrap.com/docs/5.0/getting-started/introduction/) [Bootstrap 5 繁體中文文件- 六角學院](https://bootstrap5.hexschool.com/) ### 說明 Bootstrap 是一種網頁開發的框架，預設已寫好幾千行的css與js，開發者只要了解在文件如何找到需要的 Class，將 Class 名稱套用到 html，像積木般組出需要的樣式，不用寫太多 CSS 也可快速建立響應式網站。學習 Bootstrap 前先理解 CSS 底層，假設觀念不熟也改不動 Bootstrap。 ### CSS Reset 在不同瀏覽器中網頁都有預設的樣式，讓不懂網頁設計的人也可以做出網頁，但設計師或想自己寫網頁的人往往需要對各別瀏覽器去調整樣式，因此有CSS Reset 的需求產生，CSS Reset 將樣式清空後再建立自己的樣式。CSS Reset 會寫在所有 CSS 樣式的最前面，後面才會接自己寫的樣式。 常用的 CSS Reset * [meyerweb.com](ttps://meyerweb.com/eric/tools/css/reset/) 將內容複製貼到 CSS 檔最上方，即可開始設定自己的 CSS 樣式 * normalize.css Bootstrap 預設使用這個，若有載入 bootstrap.min.css 已內建 CSS Reset，不需另外在 CSS 檔加上 CSS Reset ### 手寫 CSS VS. Bootstrap框架 前台：各50% 後台：約70-80%用 Bootstrap 框架 手寫能力強，才能善用 Bootstrap，了解不同框架的精神，變成自己的東西 ### 直播課程優點 透過直播課看別人怎麼學習，每個人背景不同如何優化自己細節，學習時常常學了後面忘了前面，代表輸出太少，沒有輸出出來就無法吸收變成記憶，可撰寫部落格或寫作業來增強記憶，每週輸出時間約10-15小時。 ## 伸縮自如的 RWD 排版術(上)(下) [伸縮自如的 RWD 排版術(上)](https://www.youtube.com/watch?v=t13Fvg0_xHk&t=810s) [伸縮自如的 RWD 排版術(下)](https://www.youtube.com/watch?v=Du_N0Vyh-Q0&t=1344s) [這裡的筆記移到](https://hackmd.io/pE6_h5SWQsqgRWgvnUOg6w) ### 個人心得 買了 Bootstrap 課程好一段時間，覺得沒什麼動力總是斷斷續續，學了後面忘了前面， ~~(bs4都還沒看完bs5就出來了)~~，剛好看到六角bs5課程直播就參加了， 第一堂課程的互動性和每日任務，看到大家不一樣的學習方式、心得筆記， 同學們回覆任務的速度也太快，剛直播完就有人分享筆記真的很用心， 在每日任務的過程中也發現css、html、rwd知識量不足，或是把前面學的都還給老師了哈， 希望後面兩週也順利的把筆記生出來~~~