---
# System prepended metadata

title: '第一堂: Bootstrap 5 - 環境建立 & RWD (任務LV2)'
tags: [21 天帶您做出 Bootstrap 5 募資網站]

---

---
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知識量不足，或是把前面學的都還給老師了哈，
希望後面兩週也順利的把筆記生出來~~~