BootStrap学习笔记，优缺点总结

本篇约定Bootstrap简写为BT

 

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

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

 

栅格系统（结构）

BT的优势之一就是可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。实现这个功能依赖两个东西，一个是view，另一个是max-width，min-width。

BT栅格系统的本质就是通过CSS3的媒体查询实现的，如果您熟练使用max-width等媒体查询属性的话就可以抛开BT，定制属于自己的响应式网站。BT将屏幕尺寸分为四类，超小屏幕<768px，小屏幕 平板>=768px，中等屏幕 桌面显示器>=992px以及大屏幕 大桌面显示器>=1200px。每一列又被平均分成了12格，每一个8.33333333%，12格就无限接近于100%。

这里要特别提一下的就是BT的盒模型，BT强制把所有元素的盒模型都设置成了border-box，这是IE首创的，用于混杂模式下显示网页，但W3C认为这个属性是个逗逼一直没采用，但最后发现自己才是逗逼，因此在CSS3中新增了这个属性。border-box盒模型的尺寸包含了padding+border+content ，content-box盒模型的尺寸仅仅包含content部分，设置padding，border还的重新计算包含块尺寸，使用上要比border-box麻烦的多。

类前缀使用是掌握栅格系统最重要的部分，类前缀分四个超小屏幕.col-xs-*，小屏幕 平板.col-sm-*，中等屏幕 桌面显示器>.col-md-*以及大屏幕 大桌面显示器.col-lg-*，以下代码即可实现不同屏幕呈现不同的显示方式：

<div class="row">
    <div class="col-xs-12 col-md-6"></div>
    <div class="col-xs-12 col-md-6"></div>
</div>

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

 

CSS模块化（表现）

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

.btn类之所以典型在于他的样式定义，CSS大牛和菜鸟的区别表现在三个方面，文件大小，后期维护以及hack，大牛的CSS文件都比较小（具体多少为小要看项目的大小）；后期维护容易，能快速定位，修改一个样式需要动的地方比较少；hack使用也少。相反菜牛则会出一个庞大的文件，后期维护一团乱麻，改一个样式需要改很多地方，hack，内联，important满天飞。

CSS很多值都是有相互依赖关系的，比如em，我们都知道em是相对单位，浏览器渲染的时候是必须明确到具体值的，因此必须进行计算。正因为这些相对单位我们才可以实现模块化，.btn类就是利用相对单位和字体大小之间的关系实现的，将按钮的line-height，padding，border-radius设置为相对单位，字体大小设置为绝对单位，需要大按钮的时候增加字体，需要小按钮的时候减小字体，案例代码如下：

.btn{ display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle;}

这里的line-height会根据font-size计算出相应的值，修改font-size按钮就会相应的变大变小，一个小小的改动就实现了视觉上的变化是不是很方便

BT的CSS系统令人称道的地方还有很多，想CSS更进一步的话可以研究下他的思路，您也可以单独提取出来放到自己样式库中，以后做项目的时候可以快速使用。

 

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 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

 

最后：

BT官方文档列出了一个编码规范，值得各个开发团队参考，下面罗列一下比较重要的：

HTML

语法：

用两个控制代替制表符（tab）--这是唯一能保证在所有环境下保持一致的的展现方法

嵌套元素应当缩进一次（两个空格）

 

CSS

声明顺序：

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

1、定位 Positioning

2、盒模型 Box Model

3、格式排版 Typographic

4、视觉 Visual

5、杂项 Misc

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

其他属性只是影响组件的内部或者是不影响前两组属性，因此排在后面

完整规范网址：http://codeguide.bootcss.com/#html-syntax

 

总结：

BT属于前端UI库，可以快速搭建前端页面，还可以使用saas重新设计组件，，比较适合前端一般的后端工程师，大中型企业用的不多。BT源码对于前端学习非常有必要。