5. Bootstrap

Bootstrap

​ 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
​ 中文网 ： http://www.bootcss.com/
​ 英文网 : http://getbootstrap.com/

1. 容器

1.1 流体布局容器

• 容器的width为auto，只是两边加了15px的padding

1.2 固定布局

• 容器的width会随设备分辨率的不同而生产变化
• 分辨率阈值
  w >=1200 容器的width为1170 左右padding为15 （注意是borderBox）
  1200>w >=992 容器的width为970 左右padding为15 （注意是borderBox）
  992 > w >=768 容器的width为750 左右padding为15 （注意是borderBox）
  768 > w >=992 容器的width为auto 左右padding为15 （注意是borderBox）

2. 栅格系统

​ col-lg-x
​ col-md-x
​ col-sm-x
​ col-xs-x
​ x默认拥有12个等级

• 容器的width会随设备分辨率的不同而生产变化
• 阈值
  • xs（小于768px） width：auto
  • sm（大于等于768px） width：720+槽宽
  • md（大于等于992px） width：940+槽宽
  • lg（大于等于1200） width：1140+槽宽
  • 两侧15px padding
• 行
  • 两侧-15px margin
• 列
  • 两侧有15px 的padding
  • 相对定位
  • float

2.1 列宽

• width 1~12

2.2 列排序

• ​push的时候调整的是left，分13个等级（0到12），0时为auto
• pull的时候调整的是right，分13个等级（0到12），0时为auto
• 注意阈值上样式的设置不能跳跃

2.3 列偏移

• 调整的是margin-left，分13个等级（0到12），0时为0%

3. 响应式工具

• 定制化：
  • 修改bootstrap的源文件
  • 将bootstrap入口less文件作为混合使用

4. 容器与栅格盒模型设计的精妙之处

container 提供了一个15px的padding
​row 是 column 直接存在的容器，row 默认最多可有12个 column，
​同时作为都是左浮动的 column 的 wrapper，自带 clearfix 的性质。
​同时 row 还有一个很特殊的地方，就是左右各有 －15px 的 margin，
​为了抵消 container 中15px的 padding
​每个column 也会有15px的水平方向的 padding，colunmn 只能在 row 中生存，
​由于 row 的 margin 为－15px，那么位于两边的 column 就碰到了 container 的边界。
​但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，
​同时 不同column的内容之间就有了30px的槽
目的是为了确保列与列之间有30px的槽，列与容器之间有15px的槽

​
​
​
​
​