[筆記] 網頁切版直播班 2020 春季班 – 第六週

Bootstrap 是使用 mobile first 的架構，但要用 desktop first 來撰寫也是可以的。藉由格線系統的幫助下，讓排版不再是一件難事。不過當你採用格線系統後，請不要調整相關的 padding, margin，以免造成版型出現跑版的情形。

第六週課程重點

格線系統

1. 由 row, column 兩個 class 所組成，分別設定 padding 和 margin 來設定 column 數量和 gutter，目的是為了減少一些奇特的 margin, padding 數字，像是 padding:7px。
2. 外層 row 搭配內層 column 使用的時候，切記不可更改水平向的 margin 和 padding。
3. 為何要用 row 包起來？為了避免出現莫名留白，導致對齊出現偏差。格線系統的特色就是一致性高。
4. .row 內部就能加上 column 系列的 div，且外層一定要有一個 .container，將多餘的左右 padding 推回。

Bootstrap Default 值

誰先註冊，就用哪個樣式。換言之，就是無法用後面的 css 替代前面的意思。

經驗談

添加斷點的 class

運用 Bootstrap 的格線系統，將 class 加上一些前綴詞，就可以輕鬆達成 RWD 的效果

https://bootstrap.hexschool.com/docs/4.2/layout/grid/#grid-options

Bootstrap SCSS

1. 可以自行使用 npm 來安裝，並運用 gulp 來達成部分載入的效果。
2. 不要自行撰寫樣式來覆蓋 Bootstrap 樣式(會漏掉)
3. 當你選擇性的載入你要的 bootstrap 檔案，並與自己的 css 編譯出來後，請在一開始就載入，畫面才會先行出來而不會跑版。

切版練習結果

目前改放置到 Github Pages 上，歡迎大家前往觀看。
網址：https://github.com/andy922200/HexSchool2020Spring

相關文章

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 23
• [筆記] 瀏覽器的跳轉處理之 location.href 和 location.replace
• [筆記] Vite 導入 Exceljs 輸出簡易表格
• [筆記] 程式必修課！離散數學與演算法 – 22
• [筆記] 程式必修課！離散數學與演算法 – 21