快速入门

下载了Ratchet项目之后,接下来需要做的事。

快速开始

快速创建一个基于Ratchet的应用。

1.创建一个页面

在使用组件文档中提及的可用的组件构成你应用的第一个页面之前,一定要先看页面基本模版应用示例。如果需要指定平台,确保在页面部分引入ratchet-theme-ios.css或者ratchet-theme-android.css

2. 使用push.js在页面间建立联系

阅读push.js之后,开始连接你的页面。Push.js允许建立一个在手机上打开跟本地应用完全一致的程序。确保你拥有一个服务器,且你的浏览器支持触摸事件的模拟。若不会,查看这里使用chrome模拟触摸事件的的教程(Firefox查看这里)。

3. 保存应用至手机

一些手段可以实现保存应用至手机,但是最简单的方法就是在电脑上运行一个本地服务器,在手机上用Safari访问该服务器,然后点击“添加到主屏幕”。Android看这个指南

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最基本的内容,预编译好的文件可以在任意web项目中使用。我们提供未压缩的CSS和JS(ratchet.*),以及压缩后的CSS和JS(ratchet.min.*)。还包括提供图标的Ratchicon.ttf字体和Android,iOS平台的主题。

(Ratchet使用了字体图标,不需要调用图片,可以用CSS样式任意控制大小颜色、阴影、方向甚至动画。需要更多字体图标可以参阅Font AwewomeFoundation Icon Fonts 2以及国内阿里巴巴的Icon Font图标库——译者注。)

Ratchet 源码

Ratchet源码包括预编译好的CSS,Javascript与字体,也提供了预处理之前的Sass,javascript源码和文档。具体来说,源码包括以下内容:

ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

sass目录, js目录, 和 fonts目录各自包含了我们css,js和字体的源码.dist目录包含了上述的预编译之后的全部文件,dosc目录包含了我们的文档、使用Ratchet的示例。除此之外,还包括了,package描述文件、证书信息和处理命令。

创建页面

构建你的页面的三个简单规则

1. 固定的bar标签优先

设置好所有固定的bar标签都是最先做的事,这很重要。

2. 其余的全部东西都放在.content

所有不是.bar标签的东西都有放进类名为.content的div块里。把这个div块放在body标签中.bar的后面,块内的内容会自动滚动。

3. 别忘了Meta标签

Meta标签在下载内容中template.html页面里,确保页面里有相应的Meta标签。对于Ratchet的正常运作,Meta标签很重要。

基本模板

用这个基本的模版,让你的应用跑起来。

<!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="ratchet.css" rel="stylesheet">

    <!-- Include the compiled Ratchet JS -->
    <script src="ratchet.js"></script>
  </head>
  <body>

    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">Ratchet</h1>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <p class="content-padded">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
      <div class="card">
        <ul class="table-view">
          <li class="table-view-cell">
            <a class="push-right" href="http://goratchet.com">
              <strong>Ratchet documentation</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://github.com/twbs/ratchet/">
              <strong>Ratchet on Github</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
              <strong>Ratchet Google group</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://twitter.com/goratchet">
              <strong>Ratchet on Twitter</strong>
            </a>
          </li>
        </ul>
      </div>
    </div>

  </body>
</html>

社区

关注Ratchet最新的开发进度,去社区交流。以下是些有用的资源。

  1. Bootstrap官方博客 (包含Ratchet最新开发进度和新闻).

  2. 寻求帮助,在StackOverflow提问,使用ratchet-2标签.

  3. Ratchet Google group上发起讨论

也可以在Twitter上@goratchet关注我们。

Ratchet

预编译过的原始文件和压缩过的CSS,Javascript,字体文件。不含文档和源文件。

下载Ratchet

当前版本 v2.0.2

Source code

若你还没有准备好,下载Ratchet的源代码。

下载源代码