按照我的理解前端开发的框架可以分为三种类型：

UI框架：这部分如bootstrap，定义了一套css样式风格，帮助布局，提供了若干可以直接使用的组件，我们可以只使用它提供的组件而不用自己设计 UI

工具类框架：如jquery(pc端)/jquery mobile(移动端)，虽然准确来说它们更是类库，但它们集成了有关 DOM操作,ajax交互,事件和动画的工具，能够帮助解决浏览器兼容，这里姑且当做框架

组织代码的框架：如angular,它不提供jquery一样(类似插件)的功能，它帮我们更好地组织代码，定义模块，填充具体的业务逻辑。

    下面分别简单总结一下三种框架。

   一  bootstrap几大特性：

   1.响应式设计（栅格系统）这是bootstrap最大的特点，将页面宽度分成12列，分列的宽度不固定，根据可视页面进行12等分，大大简化div的布局操作，并且使用css媒体查询技术实现响应式样式设计。

     我觉得这个技术是bootstrap最动人之处，降低了开发者对于PC，移动开发响应式布局的难度，浏览器兼容性也做得相当不错，不过从bootstrap3开始就彻底放弃了IE7及以下版本，不过我觉得未来的各类网站目标用户，使用IE7只会越来越少。

   2. bootstrap提供了一套自定义css样式表，同时是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的，可以定制自己的样式。

      个人看法：提供css组件这个无需多说，bootstrap扁平化设计风格极简，但是略显臃肿，如果只是为了使用其中一两个组件而选择bootstrap就没必要，关于css 预处理技术，好处在于可以在 CSS 中使用变量、简单的逻辑程序、函数，这样可以避免重复同类型变量定义，以及减少因为处理兼容性而造成的冗余代码

       举个简单的例子，在我们使用CSSSprite技术，把多个图片合在一张图片上，然后通过background-image，background-position来定位现实不同效果，这样来达到减少HTTP请求，但是HTTP请求是少了，开发人员工作量就大了，要定位图片不是一件很方便的事情，非常麻烦，要一个一个地计算，使用预编译就会简便许多

@for $i from 0 to 17{ .d-icon-#{$i}{ background-position: -0 -#{+ $i*30}px; } }

可以代替:

.d-icon-0 { background-position: 0 -0px; } .d-icon-1 { background-position: 0 -30px; } /* .....*/ .d-icon-17 { background-position: 0 -510px; }

大量同样方式定义的代码。
但它也有缺点，就在于预编译CSS步骤的加入，提高了学习门槛。

二 jquery/jquery mobile

jquery/jquery mobile这两者的关系简单来讲就是jquery更适用于传统web，而jquery mobile是以jquery为基础，在移动端的拓展，使网页开发看上去更像手机应用。使用jquery mobile+html5开发webapp是现在前端开发一个比较热门的趋势。

jquery/jquery mobile作为一个轻量级js库功能不可谓不强大，封装了dom操作，支持了大量事件，与css3完美兼容，可以为元素添加动画，简化了AJAX操作，后台只需返回一个JSON格式的字符串就能完成与前台的通信，有丰富第三方插件，可扩展性强，JQuery提供了扩展接口：JQuery.extend(object),可以在JQuery的命名空间上增加新函数。

 jquery/jquery mobile的核心就是令我们写最少的js代码，实现最完整的前端功能，说起来还是像一个插件( ╯□╰ )

三 angular

angular有几大特性：

1.双向绑定  这几乎是angular最吸引人的特性了吧，无论什么时候数据模型发生了改变（比如用户在下拉菜单中选了不同的顺序），AngularJS的数据绑定会让视图自动更新。没有任何笨拙的DOM操作，也不再需要事件侦听器！

2.代码模块化

3.依赖注入

4.directives(指令)