今天是关于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组件。

想象一下，你刚刚发布了一篇博文，并分享到了社交网络。然后，这篇文章恰巧被大V看中再次分享了出去，立即吸引了数百粉丝的目光，引导他们涌入了你的网站。看到这么多的访客量，以及它们的评论，你内心激动不已。突然之间，你的网站就挂掉了，满屏的数据连接错误……或者假想另一种情境，你一直很努力地创业。突然有一天，一个大V在社交网络表达了对贵公司的喜爱之情，字里行间满满的赞叹。关注这个大V的粉丝心动了，又涌入了你的网站。不幸的是，点击连接后却无法进入你的网站，或者进入后无法注册用户，甚至页面相应超时，无法获取产品的序列号。尽管你在社交网络上对此非常诚恳的表达了歉意，但众多的浏览者都不会再有兴趣。