boot栅格布局

栅格布局

• 使用boot必须熟练使用的三个知识点,媒体查询, 栅格布局,scss

• 为什么要使用栅格布局? 项目中做布局的方式

table布局	css+html布局	栅格布局
简单,容易控制	语义正确,渲染效率高	简单(类似于table)非常容易控制,渲染效率高,语义正确,支持响应式
效率低,语义错误	控制比较麻烦	复杂页面不适合

1. 使用栅格

• 栅格,就是把所有的布局,看做一行
• 每行中独立的布局, 看做一行的列,通过控制列数, 来控制布局占的宽度
• row 弹性 , X轴 , 可换行, 左右-15px外边距(对比row比row的父元素宽)
• col-n 左右15px

2. 响应式栅格

• col-*-n *:sm/md/lg/xl n:1~2
• no-gutters 让row去除左右-15px外边
• 同时让row的儿子col去除左右15px内边距

3. boot封装的响应式向上兼容
4. 不带数字的col类

• .col 会把当前平均分配, 直到col中内容放不下,才会换行
• 一些特殊的比例可以使用col类来解决, 一行可以远远超过12列

5. 列偏移

• . offset-*-n *.sm/md/lg/xl n:0~~11