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

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

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

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

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

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

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

到目前为止，有关于Ratchet系列教程在站上总共发布了八篇，从Ratchet的安装到自动化的部署与组件概览，从项目的创建到Meta与link标签的应用，当然除了这些，还介绍了Ratchet组件是的Bar组件与列表组件。可以说，通过这几篇教程，大家对Ratchet有一个基本的了解，并且可以借助于Ratchet框架实现一些简单的移动页面。

通过Ratchet教程的案例实战一练习之后，我想大家对Ratchet框架有了进一步的了解，或者已经能使用Ratchet框制作一些移动端的页面（也称为H5网站）。其实Ratchet框架中不仅仅包括这些东东，他还具备其他的组件。那么今天我们继续来了解Ratchet框架中的Badges(标签)。

按钮（Buttons）在Web页中的地位不用多说，大家都知道他是非常的重要。那么继Ratchet框架中“Badges组件”之后，要给跟大家一起聊的是Ratchet框架中的Buttons组件。