现代 CSS

Ratchet教程：创建项目

作者：大漠 日期：2014-05-04 点击：2566
mobile
Ratchet

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

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

废话我就不多说了，我们就开始一起实战吧。

创建项目

在我的电脑中，我将移动项目都放置在一个叫mobile的文件夹中，那么这次我们要做的项目也是一样的，放在了这里，并将其命名为m-w3cplus。项目创建好之后，将下载下来的Ratchet源码悉数复制到m-w3cplus项目的根目录之中。为了更好的使用，我还把Ratchet中的Sass源码也放在了m-w3cplus项目中备用。整个项目文件结构如下：

ratchet/
├── css/
│   ├── ratchet.css
│   └── stysle.css
├── js/
│   └── ratchet.min.js
├── fonts/
├── images/
├── sass/
└── index.html

其中sass目录是Ratchet框架中最原始的.scss文件，可以用来维护ratchet.css文件。在这里引用这些Sass文件是为了实现自定义样式，后续会介绍的。

页面设置

在m-w3cplus项目中，目前仅创建了一个index.html页面，而这个页面引用的是Ratchet的模板页面，不过在实际使用当中，有几个规则必须得掌握：

1、固定栏永远是第一

所有的固定栏，也就是带有类名.bar必须放置在<body>标签内（也就是<body>子元素）。这一点是非常重要的。我们来看一个简单的示例效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>W3cplus</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link href="/css/ratchet.css" rel="stylesheet">
        <link rel="stylesheet" href="/css/style.css">
        <script src="/js/ratchet.js"></script>
    </head>
    <body>
        <header class="bar bar-nav">
            <a href="##" class="icon icon-bars pull-left"></a>
            <a href="##" class="icon icon-search pull-right"></a>
            <h1 class="title">W3cplus</h1>
        </header>
        <div class="content">
            <div style="height: 800px;">我是测试内容</div>
        </div>
    </body>
</html>

可以看到我们的顶部标题栏header.bar是永远固定在顶部的：

Ratchet教程：创建项目Ratchet教程：创建项目

在上面的结构基础上进行一下调整：

<div class="content">
  <header class="bar bar-nav">
    <a href="##" class="icon icon-bars pull-left"></a>
    <a href="##" class="icon icon-search pull-right"></a>
    <h1 class="title">W3cplus</h1>
  </header>
  <div style="height: 800px;">我是测试内容</div>
</div>

此时虽然标题栏依旧固定在顶部，但主内容有部分是被标题栏给遮盖了：

Ratchet教程：创建项目

为何会这样，我们来查看ratchet.css代码，在代码中搜索.bar，我们不难发现有这样的一段代码：

.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}

.content > * {
  -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
          transform: translateZ(0);
}

.bar-nav ~ .content {
  padding-top: 44px;
}

在div.content中使用绝对定位，并且“TRBL”都置为“0”。如此一来，如果.bar放在.content元素中，那么内容会有一部分（大约是"44px"）内容会被遮盖。为了解决这个问题，记得.bar得放置在.content外面。而且还要在其前面。如果你结构写成：

<div class="content">
  <div style="height: 800px;">我是测试内容</div>
</div>
<header class="bar bar-nav">
  <a href="##" class="icon icon-bars pull-left"></a>
  <a href="##" class="icon icon-search pull-right"></a>
  <h1 class="title">W3cplus</h1>
</header>

主内容被顶部标题栏遮盖会依然存在：

Ratchet教程：创建项目

因为当.bar放置在.content之后，样式：

.bar-nav ~ .content {
  padding-top: 44px;
}

将会失效。当然你会说，我可以重置样式。这样问题是可以解决，但这是不是无形中增加了代码量和自己的工作量。

除了顶部工具栏之外，有时候后我们还会碰到底部工具栏固定。按照我们结构先后顺序，常会写成：

<header class="bar bar-nav">
  <a href="##" class="icon icon-bars pull-left"></a>
  <a href="##" class="icon icon-search pull-right"></a>
  <h1 class="title">W3cplus</h1>
</header>
<div class="content">
  <div style="height: 800px;position:relative;">
    <p>我是测试内容</p>
    <p style="position: absolute;bottom:0;">我是底部内容</p>
  </div>
</div>
<footer class="bar bar-tab">
  <a href="##" class="tab-item"><span class="icon icon-left-nav"></span>上一篇</a>
  <a href="##" class="tab-item">下一篇<span class="icon icon-right-nav"></span></a>
</footer>

可以看到，我们底部的工具栏将主内容遮掉差不多"50px"。也就是说，上面的结构，我们是看不到"我是底部内容"这几个文字。通过浏览器调试工具，不难发现。

Ratchet教程：创建项目Ratchet教程：创建项目

查看样式代码，我们可以找出原因：

.bar-footer ~ .content {
  padding-bottom: 44px;
}

.bar-footer-secondary ~ .content {
  padding-bottom: 88px;
}

.bar-tab ~ .content {
  padding-bottom: 50px;
}

.bar-footer-secondary-tab ~ .content {
  padding-bottom: 94px;
}

从这几行样式代码可以知道，在Ratchet框架中，.bar-footer、.bar-footer-secondary、.bar-tab和.bar-footer-secondary-tab都是通过~通用选择器来控制的。大家都知道通用选择器是控制元素后面要兄弟元素。依此推断，带有.bar的固定栏都应该写在.content元素的前面。将上面的示例修改一下：

<header class="bar bar-nav">
  <a href="##" class="icon icon-bars pull-left"></a>
  <a href="##" class="icon icon-search pull-right"></a>
  <h1 class="title">W3cplus</h1>
</header>
<footer class="bar bar-tab">
  <a href="##" class="tab-item"><span class="icon icon-left-nav"></span>上一篇</a>
  <a href="##" class="tab-item">下一篇<span class="icon icon-right-nav"></span></a>
</footer>
<div class="content">
  <div style="height: 800px;position:relative;">
    <p>我是测试内容</p>
    <p style="position: absolute;bottom:0;">我是底部内容</p>
  </div>
</div>

这个时候我们来看效果：

Ratchet教程：创建项目Ratchet教程：创建项目

通过上面的一些实例，主要想向大家阐述的是，固定栏的结构一定要写在.content的前面，而且是<body>的子元素。

一切内容都放置在.content中

除了固定栏.bar内容都必须放置在.content的元素内。而且这个元素必须放在<body>标签内（也就是<body>子元素），同时要置于.bar元素之后，至于为什么？前面已经花了很大的篇幅进行了阐述。

在Ratchet框架中，如果你的内容不是置于.content中，超过一屏将无法通过滚动来展示内容。将上面的结构做一下修改，去掉.content这个类名。

Ratchet教程：创建项目

不要忘记<meta>标签

使用Ratchet框架，另一个重点之处就是别忘了<meta>标签，特别是：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

有关于移动端开发中关于 <meta>标签的应用，可以阅读Ratchet系列教程的第二篇《Ratchet教程：meta与link标签》，里面做了详细的描述。

自定义style.css文件

在Ratchet框架基础上，我们添加了一个自定义样式文件style.css文件，这个文件最主要的作用就是用来放置覆盖ratchet.css的样式代码。众说周知，Ratchet框架能帮助我们解决很多移动项目中的一些基本功能。但我们的实际项目，并不一定和Ratchet框架提供的组件是一模一样的。举个实例，如上面的.bar效果中的icon。默认是蓝色的图标，白色的背景。假设我有一个新的设计，固定的工具栏是蓝底，图标是白色的。这个时候依赖于Ratchet我们是无法实现的，我们要做的是在这个基础上进行覆盖，那么覆盖的样式代码建议放置在style.css文件中，这样我们既可以实现项目的需求，而且不影响Ratchet框架提供的基础。一起来实战一下。

使用浏览器的调试工具，可以找到 .bar设置了一个背景色为#fff。

Ratchet教程：创建项目

要实现工具栏为蓝色，我们就需要覆盖.bar的初置样式代码：

.bar{
    background-color: #00a3cf;
}

在这个示例中，将代码置于style.css文件之中，这个时候你刷新浏览器将看到效果：

Ratchet教程：创建项目

以同样的方式，通过调试工具，找到对应需要覆盖的代码与样式：

Ratchet教程：创建项目

这里需要特别注意，因为<a>标签涉及的地方太多，但并不想通过这里的修改影响整个链接的样式，而只希望覆盖部分<a>元素的样式。那么我通过选择器加以限制：

.bar a,
.bar-tab .tab-item,
.bar .title {
    color: #fff;
}

刷新你的浏览器，你可以看到效果：

Ratchet教程：创建项目

是不是有些许的激动。其实这并不是完美的方案。为什么这么说呢？请继续往下看。

Sass文件功能

在Ratchet框架中，提供了很多的Sass文件。那么，要是你懂Sass的话，可以直接通过修改Sass文件中一些代码实现你需要的效果。

如果您从未有接触任何有关于Sass方面的技术，个人建议您先阅读有关于Sass方面的教程。

拿个简单的例子，同样实现上面蓝色底，白色标题和icon的效果。这回不是能通过在style.css文件中添加代码来覆盖，而是直接通过Sass文件来修改。在Sass目录中，可以看到有一个variables.scss和bars.scss文件。那么我们需要变动的就是这两个文件中的部分代码。

在variables.scss文件中我们可以很轻松的看到这样的一段代码：

// Colors
// --------------------------------------------------

// Main theme colors
$primary-color: #428bca !default;
$chrome-color:  #fff !default;

// Action colors
$default-color:  #fff !default;
$positive-color: #5cb85c !default;
$negative-color: #d9534f !default;

而在bars.scss文件中可以看到：

.bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: $bar-base-height;
  padding-right: $bar-side-spacing;
  padding-left: $bar-side-spacing;
  background-color: $chrome-color;
  border-bottom: $border-default;
  -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in.
          backface-visibility: hidden;
}

对比之下，一目了然，背景色调用了变量中的$chrome-color值。简单的方法就是直接修改variables.scss文件中的颜色变量值。但为了不影响整体的东西。我更建议在variables.scss中添加一个theme的颜色变量：

 //theme
 //--------------------------
 $theme-bg-color:#00a3cf;

然后在bars.scss文件中修改调用的变量：

.bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: $bar-base-height;
  padding-right: $bar-side-spacing;
  padding-left: $bar-side-spacing;
  //background-color: $chrome-color;
  background-color: $theme-bg-color;
  border-bottom: $border-default;
  -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in.
          backface-visibility: hidden;
}

在命令终端编译你的Sass:

[airen@airen:/Applications/XAMPP/htdocs/Sites/mobile/m-w3cplus]$ sass --watch sass/ratchet.scss:css/ratchet.css
>>> Sass is watching for changes. Press Ctrl-C to stop.

这个时候，你可以看到ratchet.css中关于.bar的背景色进行了改变：

.bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: 44px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: #00a3cf;
  border-bottom: 1px solid #dddddd;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

这个时候你将看到.bar的背景色变成了我们需要的颜色：

Ratchet教程：创建项目

此时，可以按照类似的方法进行覆盖：

.bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: $bar-base-height;
  padding-right: $bar-side-spacing;
  padding-left: $bar-side-spacing;
  //background-color: $chrome-color;
  background-color: $theme-bg-color;
  border-bottom: $border-default;
  -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in.
          backface-visibility: hidden;

  > a {
    color: $card-bg;
  }
}

效果如下：

Ratchet教程：创建项目

跟想像中的相比，是不是觉得原来覆盖Ratchet自带的样式并不是件复杂的事情。那么如何通过Sass来覆盖标题和底部固定栏的效果就留给同学们自己操作了。当你通过Sass的修改，实现了下图的效果，就表示你已基本上掌握了如何通过Sass来重置ratchet.css，达到你自己需要的主题效果。

Ratchet教程：创建项目

总结

在这一节中主要介绍了如何依赖于Ratchet源码创建自己的移动项目，并且详细介绍了创建自己移动项目依赖的文件。最主要的介绍了创建移动项目依赖于Ratchet框架需要注意的几个关键点。而且向大家介绍了如何使用自己掌握的前端技术，来覆盖Ratchet自带的ratchet.css样式，实现适合自己的设计风格。

说了这么多，不知道同学们有没有获取到自己需要的知识点。或许您有更好的覆盖方法，或者是使用Ratchet的经验。真心希望您能与我们一起分享，欢迎在下面的评论中指正文中的不足以及一起探讨相关的使用心得。

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/how-to-create-mobile-project-width-ratchet.html

adidas Dame 5 X Marvel 'Black Panther'
返回顶部