BOOTSTRAP栅格系统

大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网css14任务中可能会使用到的知识点：

今天我要讲的内容是关于bootstrap系统的优缺点

BT的受欢迎程度是大家有目共睹的，用它可以快速的搭建出网站。很早就接触过这个框架，其中的栅格系统，css模块化以及js插件做的相当不错，由于工作中较少使用也一直没有好好梳理下，这篇文章就来好好分析一下这个系统。

BT虽然很好，但也不是没有缺点，由于框架很多都是模块化的，只能这么用，当您的网站比较多样化，界面复杂的话就不太适合使用，此时您需要大量重写代码，维护比较麻烦，此外这个系统的CSS内容也比较多，很多内容是根本用不到的，对于带宽不是很理想的情况下就会造成浪费，当然BT的css模块化还是相当不错的。下面总结几点本人觉得非常不错的点。

这段代码的意思是，在超小屏幕下分两行显示，桌面显示器则并行显示。更详细的应用大家可以参考BT的官方文档，这里就不再详细说了

CSS模块化（表现）

BT预先定义了很多CSS类，使用的时候直接给class赋予对应的类名即可，如text-left，text-align，.table等。最有代表性的就是btn类，BT定义了一个.bt的基础类，如果还想要其他样式可以在这个基础类上进行扩展，实现不同的视觉效果。

JavaScript插件（交互）

BT的JavaScript插件非常丰富，既可以用现成的也可以自己扩充，BT提供了一个集成板的BT.js您可以直接拿过来使用也可以单个使用引入*.js即可。

JS插件优秀的地方在于，哪怕是不懂JS的开发人员也可以使用，只要按照官方文档提供的格式写即可，比如模态框，您只要按要求设置好class，data-toggle，data-target即可，一句JS都不用写，是不是很方便。

BT的插件开发模式基本都是相似的，先定义一个类，实现主体功能，然后是个Plugin函数，再把这个函数扩展到JQuery原型上，最后通过委托的方式给特定元素绑定事件。

不足：

对IE兼容也存在不小的问题，BT将所有的元素盒模型都设置成了border-box，这是IE混杂模式下的盒模型，光这点就导致了不能兼容IE。此外还用到了大量的H5标签以及CSS3语法，这些语法标签兼容性方面同样存在不小的问题，当然网上存在很多兼容IE的办法，但需要引入其他文件，有些还不小，势必导致加载速度变慢，影响用户体验。

BT对IE6，7的兼容性肯定不好，对IE8的支持也需要一些额外的文件。

IE8的媒体查询需要response.js的配合才能实现

BT 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 标签加入到你的页面中：

按 F12 键打开 IE 的调试工具，就可以看到 IE 当前的渲染模式是什么。

CSS

声明顺序：

相关属性声明应该归为一组，并按照下面的顺序书写：

1、定位 Positioning

2、盒模型 Box Model

3、格式排版 Typographic

4、视觉 Visual

5、杂项 Misc

由于定位可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首位。盒模型排在第二，因为它决定了组件的尺寸和位置。

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台 。

每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑