[笔记] 网页切版直播班 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


相关文章

按赞加入粉丝团

延伸阅读

GA浏览人气:16