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 源码进行性能优化而来.

Bootstray 架构

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

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

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

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

定制: 您可以定制 Bootstrap 的组件, Less 变量和 jQuery 插件来得到您自己的版本.

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 前端自学 https://www.html.cn/ !!

来源: http://www.css88.com/framework/bootstrap/18048.html