浅议bootstrap 框架优缺点
作者：韦建波　韦龙勇
来源：《科技视界》2017年第12期
        【摘 要】Bootstrap是近年来比较流行的前端开发框架，本文介绍了Bootstrap框架的发展历史和重要特性，分析了Bootstrap框架设计的优缺点，能对web前端开发人员带来一些参考借鉴作用。
        【关键词】Bootstrap；前端框架；web设计
        0 前言
        Bootstrap是当前比较流行的前端框架，起源于推特，该框架基于层叠样式表（css），java脚本，以及html。上手简单灵活，加快了web开发的速度，是web开发人员的一个重要工具，Bootstrap提供了简洁的层叠样式表和html规则，以及更为完善的人性化的网站风格，并兼容大多数jQuery插件。
        1 Bootstrap框架简介
        Bootstrap的前端开发框架是指叠样式表（css），java脚本及html的一系列产品化组件的集合。开发人员利用前端开发框架来创建响应式且符合用户要求标准的网站，同时，在设计中能最大程度减少投入的精力，达到了简单而一致的效果。Bootstrap 框架作为一个WEB前端工具，可以用来开发兼容谷歌，火狐，IE等多种浏览器且精致的页面； 能提供多种流行简洁的UI 组件、特有的栅格系统以及部分广泛使用的脚本插件，便于应用人员进行调用，简而言之，Bootstrap 框架为网页设计人员提供了一个设计工具包。
        Bootstrap是一种结合了HTML，CSS和JavaScript技术的前端开发框架[1]，目前欧美国家中非常流行，它具有以下重要特性：
        ？茺一套完整的基础CSS 插件；
        ？茺丰富的预定义样式表；
        ？茺一组基于jQuery 的JavaScript 插件集；
        ？茺一个兼容各种设备的栅格系统，尤其是对移动设备的兼容性非常高。
        2 Bootstrap框架的结构
        Bootstrap是开源免费的，设计人员可以方便的从网上下载最新的版本。Bootstrap 源码里包含预先编译的CSS、JavaScript 和图标字体文件以及LESS、JavaScript 和文档的源码。
        3 Bootstrap框架的优缺点
        优点
        （1）扩展性强，能够更好的与现实的web开发项目结合。
        （2）该框架不断适应web技术的发展。
        （3）比较成熟，在大量的项目中充分的使用和测试。
        （4）拥有完善的文档，使用起来更方便。
        （5） Bootstrap提供了非常丰富的组件与插件，组件包含小图标、按钮组、菜单导航、标签页等等[3]，并接受定制。
        （6）扩展性强，兼容各种脚本插件。
        （7）拥有现成UI组件，可以快速搭建网页页面。
        （8）前端处理简洁，在Blog系统搭建过程中使用方便。
        web前端的基本框架（9） 当网站不需要支持ie6.减少了兼容代码的处理。
        （10） Bootstrap框架为用户提供了一套响应式移动设备优先的流式栅格系统[2]，拥有完备的框架结构，整体效果和谐，对谷歌，火狐，IE等浏览器均可支持，项目开发方便快捷。
        缺点：
        （1）对于有特殊需求的使用者，bootstrap框架会对其带来较大的麻烦，需要做大量的css重写来改善非bootstrap“风格”的样式，导致该网站失去使用框架的意义。
        （2）会有兼容问题，对底版本的浏览器兼容性不太好，页面显得更加死板，影响用户体验。
        （3）js插件在导航页面直接切换到相应位置中，需要用js丰富它的内容，否则效果像是
一个锚点，并没有滚动动画，不能尽如人意。
        （4）定制会产生大量代码冗余，使用者利用css把原有的样式覆盖，当修改较多时被覆盖的代码没有了使用价值。
        （5）Bootstrap框架设计使得HTML不再是语义及表现和内容分离的，最终会导致一堆充斥着class的DOM元素，不遵循最佳实践。部分开发人员会觉得相当刺眼，因为对扩展性，重用性和维护更是个挑战。
        （6）当你突然要投入到相对较庞大的项目当中 ，想要通过Twitter Bootstrappy 直接享受其所有的好处，你会发现它和已存在设置发生相冲突的问题，而这些问题也将对项目原有的HTML，层叠样式表和Java脚本有较多的影响。于此同时，会发现在这个框架当中的某些资源条件，需要通过删除或者替换才能到达想要的效果，这当中必须要经过对该项目进行大量的计算工作来得出。Bootstrap在使用过程中出现一些修复奇怪的错误增加你额外的工作量是不可避免的，而这些与使用者一开始想要使用一个完整而简洁的框架是有所违背的。
        （7）若想使用Twitter Bootstap一个比较完整齐全的功能需要大量的时间，同时，你还
需要考虑自身使用的市场范围，并不是所有地区数据加载的时间限都是相同的，对于一些互联网有条件限制的地区，数据传达的速度缓慢不尽人意，因为Twitter Bootstrap所包含的内容较多，其中包括126kb的CSS和29kb的JavaScript。使用时会耗费较大的时间来加资源。当然，也有一些地区是相对自由的，不存在这方面的问题。虽然Twitter Bootstrap能建立具有吸引力和响应式的网站，不过一些手机用户在这块因为加载速度较慢和电量消耗较大的脚本而不能使用。
        （8）不支持SASS。BootStrap使用Less构建，原生不支持Compass和SASS。SASS是带有一个类似于Compass的框架，使用它好像完全不需要过多的考虑。一些人建立了Compass gem的Bootstrap，但使用Less会更加方便。
        （9）类似的Twitter Bootstrap的很多。由于Twitter Bootstrap比好前沿，使用者也相对较多，导致很多开发人员都在使用的过程中，遇到一些时间限制等问题时被迫使用了很多原有的 Bootrasp风格，从而导致很多类似的Twitter Bootstrap创建了。在有限的时间内，在Bootstrap框架中想要有所突破，自主创新很难的，往往更多的是放弃的结局。
        4 结束语
        Bootstrap作为一套比较流行完整前端开发框架，与众多的其他框架相比较无疑是最受使用者欢迎的，其灵活性和可扩展性加速了响应式网页，项目开发的进程，推动了响应式技术的发展。本文在前端框架方面对Bootstrap 进行了介绍，并分析了其优缺点，希望对web前端框架研究以及前端开发人员能有所帮助，了解Bootstrap框架的优缺点，在项目开发中也可以帮助开发人员应根据具体的项目需求，选择合适的开发方案。
        【参考文献】
        [1]李金亮，李春青.基于BootStrap的WEB开发设计研究[J].中小企业管理与科技旬刊，2014，（14）：217-217
        [2]舒后，熊一帆，葛雪娇.基于Bootstrap框架的响应式网页设计与实现，北京印刷学院学报，2016年4月.
        [3]孙静，万杰，李亚龙.以Bootstrap为基础建立响应式安徽省地震局网站[J].四川地震，2015，（03）：38-41.
        [责任编辑：张涛]