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

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

第六週課程重點

格線系統

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


相關文章

按讚加入粉絲團

延伸閱讀