Ratchet是一款使用HTML、CSS和JavaScript用来制作移动网页或App的前端框架。目前最新版本是Ratchet v2.02。从今天开始我们一起来看如何使用Ratchet框架以及现成的组件制作移动网页或者app。
什么是Ratchet
我们并不要知道Ratchet是什么？只要知道他是一款类似于Bootstrap，并且专门为移动网站开发提供的一个前端框架。在这个框架中提供了一些常用的组件，比如说标题、带有按钮的标题、tab等。
下载Ratchet
要使用Ratchet，首先需要将Ratchet下载到你的电脑上，在Ratchet的官网上提供了两个下载链接:
当然这两个链接下载之外，你也可以到Github上下载Ratchet。如果你使用git，那你还可以直接通过下面的命令将Ratchet客隆到你电脑上：
$ git clone https://github.com/twbs/ratchet
Ratchet包括什么
通过上面的下载按钮，你可以直接将Ratchet下载到你的电脑上。其实这两个链接下载下来的资源略有不同。
预编译好的Ratchet
解压缩下载下来的Ratchet，你可以看到这样的文件目录：
ratchet/
├── css/
│ ├── ratchet.css
│ ├── ratchet.min.css
│ ├── ratchet-theme-android.css
│ ├── ratchet-theme-android.min.css
│ ├── ratchet-theme-ios.css
│ ├── ratchet-theme-ios.min.css
├── js/
│ ├── ratchet.js
│ └── ratchet.min.js
└── fonts/
├── ratchicons.eot
├── ratchicons.svg
├── ratchicons.ttf
└── ratchicons.woff
这里包括了Ratchet的最基本文件。其主要包括三个目录css、js和fonts。其中css和js目录中提供了ratchet.*也提供了压缩版本的ratchet.min.*文件。在fonts中提供是字体图标文件。另外在此基础上，还为iOS和Android提供了对应的样式文件。
Ratchet源码
从“下载源码”按钮下载下来的文件解压缩之后可以看到，源码中包括css、js和fonts之外，还包括sass、dist和docs几个目录以及一些其他文件：
ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
sass/、js/和fonts/分别是我们的CSS、JS和字体图标的源代码。dist/是编译出来的文件。而docs/目录是一些源码使用文档，里面的examples/是示例文件。除了这些还有一些用于开发、版权等文件。
Ratchet安装
文件也拿到了，对ratchet也有初步了解了。接下来我们来看如何安装。
第一步：下载解压缩文件
将刚才下载下来的Ratchet压缩包解压缩出来，并且放到你常用于开发的目录之下，并将ratchet修改成你需要的项目名。
第二步：配置Server环境
如果你本地没有一个Web服务器，那你得需要先安装一个这样的服务器。在Window系统下你可以直接使用一个集成的环境，比如说WAMP。如果你使用的是iOS系统，那就轻松多了。我们下面以iOS系统为例。
首先打开你的命令终端，进入到你的项目之中：
$ cd /Applications/XAMPP/htdocs/Sites/mobile/ayong
接下来执行下面的命令：
$ python -m SimpleHTTPServer
可以看到你的服务器已启动：
Serving HTTP on 0.0.0.0 port 8000 ...
这个时候打开你的浏览器，访问http://localhost:8000。你可以看到下图的效果：
如果你使用的不是虚拟机，而是浏览器，你将看到这样的效果：
这个时候你可能会认为不对，怎么都是文件目录呢？其实很简单，那是在我们项目中没有首页。为了让大家能看到效果。接下来做第三步。
第三步：创建页面
这里，我们为了节约时间，直接从官网复制了一个index.html页面，放在了项目中根据目录之下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="/css/ratchet.css" rel="stylesheet">
<!-- Optionally, include either the iOS or Android theme -->
<link href="/css/ratchet-theme-ios.css" rel="stylesheet">
<!-- Include the compiled Ratchet JS -->
<script src="/js/ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<a class="icon icon-gear pull-right" href="#settingsModal"></a>
<h1 class="title">Ratchet</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<div class="content-padded">
<h3>Ratchet Example App</h3>
<p>Use this Ratchet mobile app template to build web apps that feel native.</p>
</div>
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="examples/typography.html" data-transition="slide-in">
<strong>Typography</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="examples/tab-bar.html" data-transition="slide-in">
<strong>Tab Bars</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="examples/block-buttons.html" data-transition="slide-in">
<strong>Block Buttons</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="examples/form.html" data-transition="slide-in">
<strong>Form Example</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="examples/slider.html" data-transition="slide-in">
<strong>Slider Example</strong>
</a>
</li>
</ul>
</div>
</div>
<!-- Settings Modal -->
<div id="settingsModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#settingsModal"></a>
<h1 class="title">Settings Example</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<h5 class="content-padded">App settings</h5>
<ul class="table-view">
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-sound"></span>
<div class="media-body">
Enable sounds
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-person"></span>
<div class="media-body">
Parental controls
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div class="content-padded">
<button class="btn btn-positive btn-block">Save settings</button>
</div>
</div>
</div>
</body>
</html>
上面文档具体说明这一节我们不多花时间介绍，将在后面的章节是会详细介绍。我们用模拟器看到的效果将会是这样的。
此时你可能会蠢蠢欲动，那你可以做一个简单的测试，在上面的index.html文件中删除示例代码，加上你自己需要的结构：
<header class="bar bar-nav">
<button class="btn pull-left">返回</button>
<button class="btn pull-right">下一步</button>
<h1 class="title">W3cplus</h1>
</header>
<div class="content">
<form class="input-group">
<div class="input-row">
<label>姓名</label>
<input type="text" placeholder="大漠">
</div>
<div class="input-row">
<label>邮箱</label>
<input type="email" placeholder="w3cplus@hotmail.com">
</div>
<div class="input-row">
<label>微博</label>
<input type="text" placeholder="@w3cplus">
</div>
<div class="content-padded">
<a class="btn btn-primary btn-block">提交</a>
</div>
</form>
</div>
验证一下自己的页面效果：
这下是不是更有成就感了，觉得做移动页面也并不是件复杂的事情，也不是一件多难的事情。或许你会问，我都不知道上面代码是什么意思。也许你会问，上面的效果不是我需要的效果，跟我的页面设计也会有所不同，那不是用不了？这些问题会有的，但我们也能依赖于Ratchet框架很好的修改。接下来的教程，会先向大家详细介绍Ratchet各种组件的调用，以及覆写。
如果你感兴趣，如果你已等不及我们的教程，那不仿看看Nick Pettit写的示例。
特别声明：请在手机或模拟器中测试上面的示例的效果。
总结
在这篇文章中主要向大家介绍了Ratchet一些基本东西，并且与大家探讨了环境的配置，安装等。并通过一个简单的示例，向大家演示了Ratchet是多么简单、多么强大的一个框架。接下来会向大家介绍Ratchet中组件的应用。感兴趣的同学请持续观注。当然如果你在这方面有使用心得，欢迎在下面的评论中与我们一起分享。
如需转载，烦请注明出处：http://www.w3cplus.com/mobile/install-ratchet.html