这里是修真院后端小课堂，每篇分享文从
八个方面深度解析后端知识/技能，本篇分享的是：
【bootstrap栅格系统】
大家好，我是IT修真院上海分院第10期的学员王恒，一枚正直纯洁善良的程序员，今天给大家分享一下，修真院官网web（任务98，深度思考中的知识点——bootstrap栅格系统
（1）背景介绍：
Bootstrap，来自 Twitter，是如今最流行的前端框架之一，Bootstrap功能强大，简单易学，很符合实际应用场景。 它是一个CSS/HTML框架。由动态CSS语言Less写成。Bootstrap一经推出后大受欢迎，一直是GitHub上的热门开源项目。bootstrap为我们提供了一套完整的流体栅格系统，而且随着屏幕或者视扣尺寸的增加，系统会自动分成最多12列，通过类名使用非常便捷。
（2）知识剖析：
1、工作原理
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。 在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。
2、使用规则
- 行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2.在行(.row)中可以添加列(.column)，最多分配12。
3.具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4.类似 .row 和 .col-sm-4 这种预定义的类，可以用来快速创建栅格布局。
5.通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔
（3）常见问题：
1、就是没有引入、没有引入正确、没有下载bootstrap.min.css！！！
2、如何设置5列占满宽度？
3、Bootstrap栅格布局的响应式如何实现？
（4）解决方案：
1、使用 Bootstrap CDN嵌入4行代码就能完成导入！1行css 3行js.
2、每列设置宽度20%,也就是100%除以列数。
3、利用列重置，列偏移。 在通过给col附加不同的class前缀，以此对应不同的屏幕下，内容的宽度。
（5）编码实战：
（6）拓展思考：
Bootstrap 有哪些缺点？
1、Bootstrap 自带的样式权值很高，在开发中需要大量的代码用于覆盖原有样式。
2、不兼容IE8以下浏览器,有兼容需求的就不能使用bootstrap了。
（7）参考文献：
1.学习bootstrap4
2.bootstrap中文网
（8）更多讨论：
Q1：有很多人反映说bootstrapTable的hight设置后表头与内容无法对齐
A1：这是版本冲突所导致的，这个需要你重新调整一个前端架构，清理无用的Js css文件，看清页面间的继承关系，如果发现有冲突发生 尽量不要引用公共资源
Q2：导航条缩小到XS模式上下留白的情况做了一固定在底部的导航内嵌表单，但是缩小到xs宽度时出现了上下两条白条。
A2：原因也很简单，在缩小到xs宽度时出现了折叠的情况，bootstrap将内嵌的form视为独立整体的一行。
解决方法： 将form的一个class属性：navbar-form改为form-inline
Q3：如何设置5列占满宽度？
A3：每列设置宽度20%,也就是100%除以列数。
（9）鸣谢：
感谢周能、何岳师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、
1106
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
