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 Modelborderbox
3、格式排版 Typographic
4、视觉 Visual
5、杂项 Misc
由于定位可以从正常的⽂档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在⾸位。盒模型排在第⼆，因为它决定了组件的尺⼨和位置。
其他属性只是影响组件的内部或者是不影响前两组属性，因此排在后⾯
完整规范⽹址：codeguide.bootcss/#html-syntax
总结：
BT属于前端UI库，可以快速搭建前端页⾯，还可以使⽤saas重新设计组件，，⽐较适合前端⼀般的后端⼯程师，⼤中型企业⽤的不多。BT源码对于前端学习⾮常有必要。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。