bootstrap框架的优缺点

　  Bootstrap简介：

　　Bootstrap来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

     Bootstray架构

　　基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。

　　CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。

　　组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

　　JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。

　　定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

Bootstrap整体架构图

　　Bootstrap的CCS模块化表现

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

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

　　CSS很多值都是有相互依赖关系的，比如em，我们都知道em是相对单位，浏览器渲染的时候是必须明确到具体值的，因此必须进行计算。正因为这些相对单位我们才可以实现模块化，.Bootstrayn类就是利用相对单位和字体大小之间的关系实现的，将按钮的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按钮就会相应的变大变小，一个小小的改动就实现了视觉上的变化是不是很方便

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

　 Bootstray的JavaScript插件（交互）

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

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

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

　　不足：

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

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

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

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

　　《meta http-equiv=“X-UA-Compatible” content=“IE=edge”》

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

　　Bootstrap框架分三类：

　　第一：预处理脚本

　　Bootstrap的源码是基于最流行的CSS预处理脚本-Less和Sass开发的。你可以采用预编译的CSS文件快速开发，也可以从源码定制自己需要的样式。例如。如果你页面上有很多同样的效果。只需要写一个效果类。然后让用到的地方去继承他。就不需要再写了。

　　第二：一个框架，多种设备

　　你的网站和应用能在Bootstrap的帮助下通过同一个代码快速，有效设配手机，平板、PC设备，这都是CSS媒体查询的功劳。

　　第三：特效齐全

　　Bootstrap提供了全面、美观的文档、可以找到关于HTML元素，HTML和CSS组件、jQuery插件方面的所有详细文档。 Bootstrap组件： Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。比如：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 JavaScript插件Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。 还有更重要的一点是，Bootstrap是完全开源的。它的代码托管，开发，维护都依赖GITHub平台。

　　bootstrap框架优点：

　　a） 提高开发效率。

　　b） 规范名称定义，便于维护。

　　c） 规范项目开发流程

　　d）css代码更清晰、简单。html代码更合理。

　　e） 大规模项目中可以减少用户下载

　　bootstrap框架缺点：

　　a） 学习成本提高。你需要了解整个框架，需要阅读框架的文档。

　　b）css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。

　　c）可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。

　　d） 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。