在上一篇教程——《Ratchet教程：自定义列表》中介绍了如何依赖于Ratchet框架构建属于自己的列表。比如常见的“纯文本列表”、“带图片的列表”、“带提示信息的列表”以及“带箭头的列表”等。但我们很多时候列表不只这些风格，比如说带有Icon图标的列表就是常见的一种，比如说带有按钮和切换开头的列表等。

我把Ratchet框架组件中的“Table Views”称为列表。实在找不出更易理解与形象的词语，当然你也可以直接将其称为“Table Views”。我们就不纠结这个了。那么从这一节开始，我想和大家一起探讨Ratchet框架中的列表制作。当然是构建适合自己的列表。

在《Ratchet教程：构建自己的顶部Bar》一文中详细介绍了如何依赖于Ratchet框架，构建属于自己的顶部Bar。在上一篇文章中说过，Ratchet框架除了顶部Bar之外，还有底部Bar和标准Bar。在实际开发中，也常常需要制作底部Bar。在这篇文章中，我们依旧借助Ratchet框架，构建一个自己需要的底部Bar。

如果你有跟着《Ratchet教程：创建项目》一文走下来，你已成功的完成了使用Ratchet框架构建移动端项目。接下来就是在这个项目中添加自己需要的内容。那么今天我们要做的就是：构建自己的顶部bar。

通过前面几篇Ratchet教程的介绍，我想大家对Ratchet有一定的了解，或许都蠢蠢欲动，想自己动手制作一个移动项目出来。是的，我也有这样的冲动，刚好五一这几天以Ratchet框架为基础，帮朋友处理了一个移动端的项目，今天我就以主站W3cplus为例，整一个移动端的W3cplus。

今天是关于Ratchet教程中的第三篇。在正式表这篇文章之前，首先要非常感谢好友@文彬提供这么优秀的教程。下面我们跟随文彬的教程往下了解。ratchet是一个移动框架，可以用来快速搭建移动项目。本文将介绍grunt服务器搭建，ratchet组件的使用。

因工作原因，最近在使用Node-Webkit做一个桌面高拍仪（摄像头）应用。这个应用本身也只是一个尝试性的东西，不太具有参考价值，就不在这里提供下载了。

Ratchet是一款使用HTML、CSS和JavaScript用来制作移动网页或App的前端框架。目前最新版本是Ratchet v2.02。从今天开始我们一起来看如何使用Ratchet框架以及现成的组件制作移动网页或者app。首先向大家介绍Ratchet的环境配置与及安装。并向大家展示了使用Ratchet制作的一个简单的移动页面效果。

图片占位符，我们最常用的方案就是留空白区域，或者使用空的div标签来模拟，甚至使用一张背景图片来做。但这些方案都不是一个完美的方案，那么什么是完美的方案呢？今天我们通过CSS3的渐变来实现图像的占位符功能，这种方案既让你的代码更为干净，而且还可以帮你减少HTTP的请求数。最后还通过使用Sass让你实现自动化功能。感兴趣的同学请点击阅读正文。

互联网让我们从工业文明走向了信息文明， 从工业经济走向了知识经济，——“平等、开放、互动、迭代、演化“。互联网时代最具代表性的精神就是分享，一个人自已有了积累，愿意拿出来和大家分享，帮助更多的一人一起成长，这就是互联网精神。五月是播种收获的季节：PM产品经理_研究小组93802865群成立5个月了，这次我们想换个方式换种思维，组织一次大家一起线下认识-交流-分享， 每个报名参加活动的成员准备一个1-3分钟的自我介绍， 闻名不如见面，期待大家的报名！