Web前端响应式框架

响应式网页的设计与实现

最近学前端接触到了框架，介绍并记录自己的学习收获。

前言

各种移动智能设备的广泛应用，带动了互联网应用向移动平台方向发展，并呈现多元化的趋势。但智能手机、平板电脑、智能手表等多种移动设备相对于PC端的屏幕尺寸较小，所以大部分在PC端上显示的页面并不能很好地在移动互连设备上呈现。由于各种各样设备屏幕的分辨率、尺寸和型号越来越多，要在不同屏幕、不同系统平台等环境下保持网页布局的一致性，满足用户的一致体验已成为网页设计行业发展方向。基于Bootstrap框架的响应式网页设计就是一种全新的设计理念，根据这一理念所制作出来的网页框架可以作为通用模板，开发者根据需求选择模板，从而设计出适应不同设备的网站，增强用户体验。

一. 响应式网页技术

“响应式网页设计”就是自动适应，它可以自动识别屏幕尺寸，从而调整出适合的网页。在做网页页面设计时，非常强调模块化的设计，要求一个合格的模块能够做到“可扩展、无侵染”，在任何移动终端都能正常显示。响应式网页在任何设备中都能够正常适配，而不用为每个设备单独做“子网站”。简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
响应式设计的网站能满足各种类型终端用户的需求，带给所有终端用户最优的访问体验。当然，专为手机或平板设计的网站也能满足部分访问者的要求，但根据调查得知，常用的移动终端设备有200多种不同的屏幕尺寸，设计者不可能为所有屏幕尺寸都设计一份独有的网站。因此，响应式设计就显得尤为重要。一个在手机上不能正常显示的网站只会给企业带来负面影响，给用户带来很差的用户体验。

二.响应式前端开发框架（响应式HTML5框架）

响应式前端开发框架是指一系列产品化的HTML/CSS/Javascript组件的集合，Web前端工程师可以在设计中使用该开发框架。利用框架，可以花最少的精力创建响应式且符合用户要求标准的网站，整个开发流程都变得简单并且具有一致性。框架并不仅仅是指CSS、栅格之类的一些内容，它们包括的是整套的前端开发框架。
目前，前端开发框架有很多，下面主要介绍Bootstrap框架。

1. Bootstrap
   Bootstrap是目前桌面端最流行且用得最广泛的开发框架，由Twitter推出。Bootstrap主要针对桌面端市场，Bootstrap3提出移动优先，不过目前桌面端依然还是其主要目标市场。Bootstrap主要基于jQuery进行Javascript处理，支持LESS来做CSS的扩展。如果想要在Bootstrap框架中使用Sass，则需要通过Bootstrap-Sass(https://github.com/thomas-mcdonald/bootstrap-sass)项目增加兼容。
   Bootstrap框架在布局、版式、控件、特效方面都不错，预置了丰富的效果，极大方便了用户的开发；在浏览器兼容性方面，目前Firefox、Chrome、Opera、Safari、IE8+等主流浏览器，Bootstrap都提供支持；在框架扩展方面，随着Bootstrap的广泛使用，扩展插件和组件也非常丰富，涉及显示组件、兼容性、图标库等各个方面。总之，Bootstrap提供一套优美的、直观的Web设计工具包和很多流行的样式，简洁的UI组件、栅格系统，以及常用的Javascript插件，可以用来开发跨浏览器兼容且美观大气的页面。

其他的响应式前端框架还有：

2.Foundation
Foundation是ZURB旗下的主要面向移动端的开发框架，但也保持对桌面端的兼容，目前已更新到Foundation4版本。它是一款强大的、功能丰富，且支持响应式布局的前端开发框架。框架主要采用jQuery和Zepto（语法类似jQuery，但比jQuery更轻量级）作为Javascript基础，CSS则基于Sass、Compass，有着很好的扩展性，并有着丰富的布局、版式和多种多样的控件与特效，非常方便开发者使用。控件的响应式效果也能帮助用户识别不同浏览器效果。

3.Gumby
Gumby基于Sass开发，是一款出色的响应式CSS框架，它包括一个Web UI工具包，有按钮、表格、导航、标签、JS插件等。

还有一些如52Framework、Groundwork、Kube等，感兴趣的可以搜一下噢，这里不详细介绍了。

因为自己刚上手响应式前端框架，所以就学了用得很广泛的Bootstrap，若后续有用到更好的，会写篇文章做对比。因为自己看了网课和一些视频，课本，基本都用到Bootstrap，所以还是推荐大家用这个吧。

提示

这里说明一下，自己在搜集资料的时候，发现大家容易一个搞混的问题（包括我自己在学习的时候），就是Bootstrap和vue都是前端框架，很多人分不清两者的区别。在这里我说明一下。

前端框架：Bootstrap与Vue的区别

首先，明确一点，两者不是一个层级的。

• Vue是一套用于构建用户界面的渐进式框架（前端js库，将前端开发组件化），和react，angular并列“前端三大框架”。可做出如后台管理系统等具有复杂交互的系统。
  （功能开发框架）
• Bootstrap是基于jquery的UI组件库，而且Bootstrap大部分组件是依赖css的，使用时比如一些网页中的输入框，按钮等的炫酷样式。
  （界面效果框架）
  到这里大家应该对两者有些理解和区分了吧？

今天就写到这里啦，有问题的话在评论区问噢(●’◡’●)

（自己是大一计科专业的学生，因为感兴趣，课后自学前端，希望不对的地方，大佬可以帮忙指正，谢谢啦！）