手机网页wap用Bootstrap还是jQuery Mobile

所属分类: 网页制作 / 应用技巧 阅读数: 495
收藏 0 赞 0 分享

解决问题

Bootstrap是一个css框架,针对解决的问题有:

跨设备的网页响应式布局问题。随着手机、平板、各分辨率屏幕的出现,如何能够一套前端在所有设备上自由适应?
多人合作的前端布局和样式的规范问题
常用前端css组件,如按钮、连接、表单、表格、分页组件、下拉菜单、导航栏、ICON等等
常用JS前端组件(需要扩展js支持),如表单验证、Tips、Popup等等

jQuery Mobile是移动前端框架,包含js、html、css,提供一套完整的移动前端开发组件,可以比喻成Android开发框架,尽可能提供移动APP所具有的所有功能,针对解决的问题有:

移动网页APP所常用的组件,例如:手机导航栏、选项卡、底部菜单、列表、表单等各种组件,而这些与Bootstrap提供的组件有很大区别,jQuery Mobile提供的是类似手机APP的组件,只用于移动网页,而Bootstrap提供的是面向所有设备的组件,并没有对移动设备专门考虑,与移动APP的组件体验不一样。
网页页面之间转换效果
异步数据加载

功能
Bootstrap其核心主要是一个css样式框架,基于css 的Media Query功能实现了响应式布局,能够帮助前端开发人员快速布局、快速开发、合作开发。它必须借助jQuery类似的js框架来实现Ajax数据交互。
jQuery Mobile其核心是一个完整的WebAPP框架,加入了一个轻量级的jQuery可以实现Dom操作,在jQuery的基础上提供了一系列类似移动APP的Widget(视图组件),提供了一套不错的页面转场效果,可通过Ajax实现与后端数据交互。

适用场景
Bootstrap通常用于:展示网站的响应式布局开发,使得网站可以在不同设备上方便浏览;以及网站后台管理系统的前端CSS框架。
jQuery Mobile通常用于:期望接近移动APP体验的WebAPP,项目只运行在手机端,不用于电脑设备展示(虽然是可以展示的,但是效果不好)。

总结
如果做跨设备响应式前端,选择Boostrap;如果仅作移动端,期望得到近似APP的WebAPP,使用jQuery Mobile。
如果做一个产品级的WebAPP,当前jQuery Mobile的能力并不能让你满意,自己开发响应式布局框架和WebApp组件是必然要走的路。

最近我们手机端网站想改版,打算用bootstrap做移动端开发的,但经过网上很多人的反馈来看boostrap比较大,他应该说是pc与移动一体自适应的情况下用,如果单纯的做移动站没必要,用这么臃肿的东西。

更多精彩内容其他人还在看

即将成为主流的2015—2016交互体验趋势

未来的交互设计越来越重视体验化
收藏 0 赞 0 分享

清除css、javascript及背景图在浏览器中缓存的简单方法

为了减少服务器的压力,让用户少加载,浏览器会将图片、css、js缓存到本地中,以便下次访问网站时使用,为了可以正常使用缓存,又避免这样那样的问题,我们可以动脑筋想想,如果解决此问题呢
收藏 0 赞 0 分享

美妆造型类网站 颜色搭配技巧的方案及效果展示

这篇文章主要介绍了美妆造型类使用颜色搭配技巧后的网站效果,对任何网站来说,颜色都是最重要的元素之一,对观众有着巨大的影响。脚本之家的小编带大家一起学习美妆造型类网站的颜色搭配,让我们的网站也美美滴哦
收藏 0 赞 0 分享

页面出现滚动条的时候如何让滚动条不影响页面宽度

这篇文章主要介绍了页面出现滚动条的时候如何让滚动条不影响页面宽度,需要的朋友可以参考下
收藏 0 赞 0 分享

禁用IE10的密码明文显示和快速清除功能的方法

快速清除钮可取代触控进行全选并删除的一连串复杂动作,而密码显示钮可协助用户确认输入内容,弥补触控打字慢、错误率高的困扰。但是基于Web系统安全的考虑,需要禁用该功能
收藏 0 赞 0 分享

Chrome浏览器的自动保存密码提示功能禁用方法

在表单中加入autocomplete=
收藏 0 赞 0 分享

base target=""规定基本链接的目标打开框架

a、form等很多标签都支持target=black的属性,其是将基本链接的目标框架都改为新页打开,新欢研究的朋友可以看看
收藏 0 赞 0 分享

系统之外的字体引用及过渡效果

当用到一些系统里没有的字体时可能需要从外部引用下载的字体,方法是用@font-face来引入字体,过渡效果用到了transition,示例代码如下,大家可以看看
收藏 0 赞 0 分享

怎么设计响应式WEB?响应式WEB设计的优缺点

传统的web页面已经不能满足多种设备的浏览效果,比如传统页面在大浏览器中会有较大的空白区域,而在小浏览器已经移动设备中,下面我们一起来看看响应式web设计的合理尺寸与优缺点
收藏 0 赞 0 分享

博客园CnBlogs自定义博客样式分享

这里给大家推荐一个博客园CnBlogs自定义博客样式,制作非常的简洁大方,蓝色基调,喜欢泡cnblogs的朋友可以参考下
收藏 0 赞 0 分享
查看更多