大家好，我是IT修真院北京分院web第31期学员金立剑
【js-2】BootStrap栅格系统
分享人：金立剑
目录
1.背景介绍
2.知识剖析
3.解决方案
4.编码实战
5.扩展思考
6.参考文献
7.更多讨论
1.背景介绍
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
2.知识剖析
2.1 原理
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。
2.2 使用规则
1 行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2 在行(.row)中可以添加列(.column)，最多分配12。
3 具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4 类似 .row 和 .col-sm-4 这种预定义的类，可以用来快速创建栅格布局。
5 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔
2.3栅格选项
当屏宽小于768px（即小屏）时，列的划分以.col-xs-后面的数字为准。如果没定义.col-xs-，就会变成单列且宽度和row相等。
当屏宽在768px和992px之间（即平板屏）时，列的划分以.col-sm-后面的数字为准。如果没有定义col-sm-，以.col-xs-为准。
当屏宽在992px和1200px之间（即中屏）时，列的划分以.col-md-后面的数字为准。如果没有定义.col-md-，以col-sm-或col-xs-为准。
当屏宽大于1200px（即大屏）时，列的划分以.col-lg-后面的数字为准。如果没有定义.col-md-，以.col-md-或col-sm-或col-xs-为准。
3.解决方案
1) 列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性
2) 列偏移
通过 col-md-offset-*来实现
3) 列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数) 实现列的向左或向右排序
4) 列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列
4.编码实战
5.扩展思考
Bootstrap 有哪些缺点？
个人认为，所谓优点和缺点，多数根据业务需求而定。比如 bootstrap 2以后的版本不支持IE6。当你的网站需要支持ie6的时候，这时是缺点。当网站不需要支持ie6.减少了兼容代码的处理，马上又变成了优点。总体而已，Bootstrap 属于前端 ui 库，通过现成的ui组件能够迅速搭建前端页面。同时还可以用less重新设计组件。对于前端技术一般的后台工程师，省去了很多编写前端处理时的痛苦。个人使用搭个博客什么的比较方便。相对于公司，直接使用 Bootstrap 感觉不多，大公司都有自己的前端开发设计人员，也会设计自己的css库。当然，Bootstrap开源，对于学习如何组织css还是很有必要
6.参考文献
参考文献：Bootstrap每天必学之栅格系统（布局）
7.更多讨论
1.bootstrap栅格系统所定义的breakpoint 为什么是480 768 992 1200？
xs: < 575.98px，适应竖屏下的手机
iPhone 6p 的对应分辨率宽度为 414px，鲜有比这个还宽的手机；
题中说的 480px，应该是 Bootstrap 2.x 年代的时候的事了，当时 iPhone 的尺寸是是 320*480px，正常情况下来说是够用的
还是有人希望横竖屏展示不一致的效果，所以还是使用了 500 以上的宽度进行区分
实际上我觉得这个尺寸以 576 来判断有些过宽，我这边实践上用的更多是以 375 作为标准设计然后以 414 以下作判断横竖屏依据
sm: 576px ~ 767.98px，适应较小的横屏下的手机。
比如 iPhone 6 的分辨率高度 667px, 6 plus 为 736px，一般不会突破 768 的天际。然而 iPhone X 是 812px…… 但安全区域还是只有 734px，所以也还算勉强在范围内；
数值上可以看到 320*16/9 = 568.88，这意味着有些等效宽度 320px 的小一点的 Android 手机上是横屏也拿不到这个尺寸范围的；
这个值向上对齐到 12 columns 网格就是 576，而且是很漂亮的 48 * 12 网格；
比较惨的大概是 iPhone 5 的尺寸，高度为 568，差了一点点
好像 V3 版本本来用的就是 540 左右的数值，应该就是为了适应 iPhone 5 / 小屏 Android 的横屏，只是后来改掉了，大概也是觉得现在这种手机比较少了
576 还很好记，因为视频 SDTV 格式刚好也是用 576i 的分辨率，而且挺多字幕组也喜欢输出 576p 格式的视频，因为刚好在 1024 宽的 iPad 上可以 16:9 展示，完美 :D
md: 768px~991.98px，适应 iPad mini 以上的尺寸的竖屏展示；768 刚好就是 iPad 的竖屏高度
正常情况下来说 640px 就够了（360*640 是挺常见的大屏手机用的分辨率），但因为 6 plus 虽然用的还是 1920p 宽的屏幕但却等效分辨率用的 736 px，所以…… 1280 * 720p 的平板哭晕在厕所，不过还好 1280 * 800 的不受影响
lg: > 992px，适应横屏下的 iPad 及以上平板设备的尺寸；
比较让我困惑的是为什么不用 996px，起码能被 12 整除；估计是为了避免个别 PC / 平板应用边框过粗以及滚动条的原因使得内容缩紧，所以留出 28px 的宽度避免被挤压；
此外，有些老一点的 VGA 电视或者投影仪只能展示 1024 * 768，这种场景下就还是得适配这个宽度了；
其实在这个场景下个人用 960px 宽度更多一点，计算起来比较整齐，24 / 16 / 12 栏网格都能用，这可是个经典的网格设计宽度；
xl: > 1200px：适应 1280 以上的场景，通常为PC / Mac使用；现在 iPad Pro 也已经超过这个尺寸了
2.bootstrap的栅格系统为什么是12列，有没有18列，24列等等啊，采用12列有什么好处？
因为12是1，2，3，4，6的最小公倍数，所以12列栅格系统相对较灵活，支持将一行分成1列，2列，3列，4列，6列。若是想要支持5列，那1，2，3，4，5的最小公倍数是60，而60这个数对于栅格系统来说显然太大了。18能均分4列不？24能做的12都能做，所以12是最好的选择。
3.bootstrap有哪些常用组件？
下拉菜单，摁钮组，导航，标签，列表，巨幕......