一、背景介绍
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
今天分享的知识点：
*栅格系统实现原理
*container/row/col之间的关系
*自定义列
*用媒体查询实现响应式布局
二、知识剖析
（一）栅格布局实现原理
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
（二）container/row/col之间的关系
.container类用于固定宽度并支持响应式布局的容器;
.row和.col类配合用于为其赋予合适的排列和内补;
container有左右padding15px;
row有左右-15px margin
col有左右15px
(三)自定义列
（四）媒体查询
6.扩展思考
为什么要设置container/row/col的padding和margin值？
答：为了确保嵌套时的col可以有15px的padding。
7.参考文献
https://v3.bootcss.com/css/#grid
https://www.tuicool.com/articles/Afuu2q/
8.更多讨论
1. 自定义列之后还有padding和margin吗？
答：没有需要自己设置。
2.媒体查询与响应式布局的关系？
媒体查询是实现响应式布局的方式之一。
3.嵌套为什么不用使用container类了？
答：嵌套行的原理就像上面一样，只是它的重叠住了列的padding ，其实就把外面的列当作 container 了，本质上列扮演了 container 的角色，所以嵌套行时你不再需要 container
网友评论