现代 CSS

Ratchet教程——安装

作者：大漠 日期：2014-04-28 点击：6053
mobile
Ratchet

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

Ratchet是一款使用HTML、CSS和JavaScript用来制作移动网页或App的前端框架。目前最新版本是Ratchet v2.02。从今天开始我们一起来看如何使用Ratchet框架以及现成的组件制作移动网页或者app。

什么是Ratchet

我们并不要知道Ratchet是什么？只要知道他是一款类似于Bootstrap，并且专门为移动网站开发提供的一个前端框架。在这个框架中提供了一些常用的组件，比如说标题、带有按钮的标题、tab等。

Ratchet教程——安装

下载Ratchet

要使用Ratchet，首先需要将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修改成你需要的项目名。

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。你可以看到下图的效果：

Ratchet教程——安装

如果你使用的不是虚拟机，而是浏览器，你将看到这样的效果：

Ratchet教程——安装

这个时候你可能会认为不对，怎么都是文件目录呢？其实很简单，那是在我们项目中没有首页。为了让大家能看到效果。接下来做第三步。

第三步：创建页面

这里，我们为了节约时间，直接从官网复制了一个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>

上面文档具体说明这一节我们不多花时间介绍，将在后面的章节是会详细介绍。我们用模拟器看到的效果将会是这样的。

Ratchet教程——安装

此时你可能会蠢蠢欲动，那你可以做一个简单的测试，在上面的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框架很好的修改。接下来的教程，会先向大家详细介绍Ratchet各种组件的调用，以及覆写。

如果你感兴趣，如果你已等不及我们的教程，那不仿看看Nick Pettit写的示例。

特别声明： 请在手机或模拟器中测试上面的示例的效果。

总结

在这篇文章中主要向大家介绍了Ratchet一些基本东西，并且与大家探讨了环境的配置，安装等。并通过一个简单的示例，向大家演示了Ratchet是多么简单、多么强大的一个框架。接下来会向大家介绍Ratchet中组件的应用。感兴趣的同学请持续观注。当然如果你在这方面有使用心得，欢迎在下面的评论中与我们一起分享。

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/install-ratchet.html

Undercover Nike Daybreak Release Date
返回顶部