Bootstrap的优点和缺点是什么?

Bootstrap是一个强悍的前端开发框架,一经推出后颇受欢迎,一直是GitHub上的热门开源项目。那么Bootstrap的优点和缺点是什么?下面本篇文章给大家介绍一下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源码进行性能优化而来。

Bootstrap架构

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

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

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

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

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

1.png

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) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活,越来越臃肿。

更多bootstrap的相关知识,可访问:web前端自学!!

以上就是Bootstrap的优点和缺点是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏