栅格布局
-
使用boot必须熟练使用的三个知识点,媒体查询, 栅格布局,scss
-
为什么要使用栅格布局? 项目中做布局的方式
| table布局 | css+html布局 | 栅格布局 |
|---|---|---|
| 简单,容易控制 | 语义正确,渲染效率高 | 简单(类似于table)非常容易控制,渲染效率高,语义正确,支持响应式 |
| 效率低,语义错误 | 控制比较麻烦 | 复杂页面不适合 |
- 使用栅格
- 栅格,就是把所有的布局,看做一行
- 每行中独立的布局, 看做一行的列,通过控制列数, 来控制布局占的宽度
- row 弹性 , X轴 , 可换行, 左右-15px外边距(对比row比row的父元素宽)
- col-n 左右15px
- 响应式栅格
- col-*-n *:sm/md/lg/xl n:1~2
- no-gutters 让row去除左右-15px外边
- 同时让row的儿子col去除左右15px内边距
- boot封装的响应式向上兼容
- 不带数字的col类
- .col 会把当前平均分配, 直到col中内容放不下,才会换行
- 一些特殊的比例可以使用col类来解决, 一行可以远远超过12列
- 列偏移
- . offset-*-n *.sm/md/lg/xl n:0~~11
)
