Bootstrap响应式设计在中国-关于移动网站和卓越网站体验的那些事儿

万孤

为移动而生-更窄的网页并不是移动网页

    提供完整的用户体验，打通移动端与客户端的区隔，这在中国互联网业界已经没有什么好争辩的了，然而天国总是有天国的实情，比如人们对于移动网站的理解，从早年的短信网址笑料收场，到现在的微信上诸多伪微门户泛滥，离真实的移动用户体验相差很远。

    比如下图是一个热门微信颁发出来的微门户页面，其实和早年的wap网站制作一样，只不过是做了一个更窄的网页，并没有理解移动设备的真正需求。

    在移动设备上，人们使用手指触摸来取代鼠标点击，并不能使用二指琴魔来不断放大设备。

    不同的媒体又有不同的介质，比如PAD和手机，虽然同属移动设备，又有不同。

    再者，在苹果设备上，横屏与竖屏有不同的媒体查询规则。

    如何让图片在移动设备是同比放大，而不是被屏幕遮蔽?

    这时只有祭出Bootstrap这面大旗，方能迎刃而解。

    巨头的精湛之作-匠人打造、为匠人用

    很少有一个web框架为了适应移动互联网时代而诞生的。

    而Bootstrap恰恰是这样的一个作品，虽然目前国内开发者接触的人群不多，但一场流式布局与响应式体验的变革将由其引领。

    检验一个网站是否支持响应式标准其实很简单，就是将网友窄，如果能自适应屏幕就是符合这一标准，目标大多数网站不支持此标准，而越来越多的名企和卓越门户已经引入这一标准。

    Bootstrap的娘家Twitter(推特)，可谓是当今移动互联网的开山鼻祖，开创了微博这一个新网络载体，大陆网民所能体验到的新浪微博、腾讯微博无不是其追随者。

    早期Twitter提供的内部开发工具缺乏一些精致和平易近人的设计，为了应对复杂的设计需求，Twitter前端工程师在开发风站时喜欢采用自己所熟悉的技术，这就了网站维护困难、可扩展性不强、开发成本等问题。

    2010年6月，为了提高内部协调性和工作效率，Twitter公司的几个前端开发人员自发成立了一个兴趣小组，期望设计一个伟大的作品，开发一个开放源码的前端工具包，旨在帮助设计师和开发人员快速、高效的构建出卓越的网页，这就是Bootstrap。

    最终，Bootstrap在Twitter公司迅速成长，且被业界广泛采用(美国NASN、Breaking News、WordPress、Drupal等均导入了Bootstrap)，不仅包括了基本样式，而且有了更为优雅和持久的前端设计版式，目前这个版本为3.0。

    可以毫不客气的说，看到Twitter公司的白鸽图标，就可以看到Bootstrap的优雅美丽，这正是无数个WEB开发者朝思夜想和渴求的!

    下图：印象笔记和HTC官网的响应式体验

    开发者利器-提供网站开发效率的首选

    还在用*{margin:0px;padding:0px}这样的全局定义?

    还在用图片作为图标?

    还在用自定义的媒体查询来定义各个界面的宽度?

    这已经远远不够。

    一个优秀的网站应该除了坚强的内核，还应该包括：

    l 跨设备、跨浏览器

    l 支持响应式设计

    l 良好的栅格系统

    l 优秀的字体样式

    l 多媒体展示

    l 良好的导航和表单

    l 支持hmtl5

    l 以及更多

    BootStrap在中国-逐浪CMS首倡导入

    中国软件业不缺乏优秀的设计者和思想家，但缺乏优秀的行动家。

    全世界人民沉浸在元旦圣诞的节日快乐中，逐浪CMS的人可能是从前一天开始加班到元旦中午12点，为了赶在新年发布一个产品。

    全国人民都在看两会，逐浪软件的架构师们可能奔波在雪域高原和南海之滨，用脚去丈量祖国母亲的每一寸胸膛。

    早在2013年中旬，通过与中科院、阿里云、中化集团、搜狐软件团队、中电集团等多家企业的合作中，迫切认识到提升整体CMS的应用和web体验的重要性，先后推出了微信接口、MIS系统、云盘、二维码、设备自适配等技术，并成功于2014年的第一季度全面导入BootStarp框架，全面向国内用户开放下载。

    逐浪CMS目前中国首家导入Bootstrap的网站内容内核系统厂商，这源于我们以客户为本的服务品质、以质量为先的研发导向、以技术为本的企业思维。

    目前逐浪CMS官网和测试平台均已上线，可以自由支持各类移动体验，同时点击屏幕上的电话，能自动启动手机上的电话拔号和发送短讯等功能。

    目前逐浪CMS官网已经开放全面支持Bootstrap的CMS内核系统，用改革开放的精神来说：我们既要走得出去，也要请得进来。

    期待中国互联网的开放进取新时代的到来!

    下图逐浪CMS移动设备响应式界面：

    下图：逐浪软件体验门户界面