如果你有跟着《Ratchet教程：创建项目》一文走下来，你已成功的完成了使用Ratchet框架构建移动端项目。接下来就是在这个项目中添加自己需要的内容。那么今天我们要做的就是：构建自己的顶部bar。

假设你的标题栏有这样几种设计效果：

download

上图是从网上找来的，不总共是几种不同的设计方案，当然在一个项目中不可能使用这么多种不同的色系。接下来的示例中，我将所有效果都拍平了，而且采用第一种色系。同时实现“1、3、4”三种不同的效果。

在开始制作之前，我们回到Ratchet框架中的标题栏组件。在整个标题栏组件中，Ratchet主要包括以下几种：

• 顶部标题栏
  • 纯标题
  • 带有按钮
  • 带有图标
  • 带有图标与按钮
  • 带切换效果的标题栏
• 底部标题栏
  • 底部标签卡(带图标)
  • 底部标签卡(纯文本)
  • 标准bar

不管是哪一种bar他们都具有一个共同的特性，他们都在HTML结构中带有一个相同的类名.bar，而且在Ratchet都是固定在顶部或者底部。同时根据Ratchet页面创建原则，这些bar元素都需要放置在.content元素之前。

如此一来，感觉蛮复杂的，其实对于我们来说，没有必要这么纠结，完全可以将其按功能来划分，那么不同功能的bar通过不同的bar-后缀来区别。根据官网组件，将其按功能划会为：

• 导航:使用.bar-nav
• tab切换:使用.bar-tab
• 标准bar:使用.bar-standard，在标准bar里面又通过.bar-header-secondary和.bar-footer-secondary来区分顶部和底部的二级标准bar。

我想，这个时候大家应该可以很好的分清楚，不同的bar具有什么样的功能，当然你要按他长得样子分，我想难度就大了。就如上面的设计图所示，“1～6”就有六种了，想想就后怕。在此我们也不纠结这么多了。继续深入前面约定的，实现设计图中“1、3、4”类似的效果。

HTML结构

在结构中，并不在呼你给bar使用什么样的标签元素，而在意的是你使用什么样的类名，因为这些类名直接决定了bar的功能。从官网中我们可以很容易看出：

导航bar

具有导航功能的bar，而且他常常位于顶部，所以常用<header>标签来控制：

<header class="bar bar-nav">
    <!-- 具体内容放在这 -->
</header>

切换卡bar

带有切换功能的bar，就是类似于我们常说的"tabs"选项卡的，他类似于一个菜单，所以常常使用<nav>标签来控制：

<nav class="bar bar-tab">
    <!-- 具体内容放在这 -->
</nav>  

标准bar

标准bar相对前两种稍为多一点。首先他统称为.bar-standard，一般情况默认为顶部的bar，如果你想让其变成底部的bar，需要在原有基础上添加一个类名bar-footer。除此之外，还分二级顶部的标准bar,而且二级标准bar又分为顶部bar-header-secondary和底部bar-footer-secondary。使用的元素标签就没有定论了，官网是这样应用的：

<nav class="bar bar-standard">
    <!-- 具体内容放在这 -->
</nav>  

<div class="bar bar-standard bar-header-secondary">
    <!-- 具体内容放在这 -->
</div>

<div class="bar bar-standard bar-footer-secondary">
    <!-- 具体内容放在这 -->
</div>

<div class="bar bar-standard bar-footer">
    <!-- 具体内容放在这 -->
</div>

不过就我个人而言，我喜欢将bar-footer上的元素标签换成<footer>标签，看上去协调一些：

<footer class="bar bar-standard bar-footer">
    <!-- 具体内容放在这 -->
</footer>

致于里面的实际内容放置是些什么，就需要根据你的设计，或者你的具体项目来定了。

CSS

关于bar的结构，我们了解清楚了，现在需要知道他的样式代码如何？从前面的教程可以得知，Ratchet框架的所有样式代码都放置在ratchet.css中（当然，还有一个压缩版本ratchet.min.css）。那么我们可以在ratchet.css中搜索.bar类名，看到这么一大堆样式代码：

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

.bar-header-secondary {
  top: 44px; 
}

.bar-footer {
  bottom: 0; 
}

.bar-footer-secondary {
  bottom: 44px; 
}

.bar-footer-secondary-tab {
  bottom: 50px; 
}

.bar-footer,
.bar-footer-secondary,
.bar-footer-secondary-tab {
  border-top: 1px solid #dddddd;
  border-bottom: 0; 
}

.bar-nav {
  top: 0; 
}

当然，这里截取出来的只是一些关键性的代码，还有关于bar里面的一些内部元素的样式代码，我就不一起扒出来了。也就是说，后面如果我们使用style.css来覆盖ratchet.css中关于bar部分的代码就是以.bar或.bar-开头的。想像一下，好像还是蛮复杂的。当然，在实际操作当中，并不一定是每一行代码都必须覆盖，说不定我们只是修改他们的颜色值、字体、字号等等。简单一点的方法，使用浏览器的调试工具还是蛮方便的。找到对应的选择器，覆盖所需要的样式。不过这样一来就无形中增加了代码量，这也是难免的，除非你从头写。那么今天我们就不纠结这个了。请继续往下看吧。

Sass

在Ratchet的源代码中，我们不难发现，他有一个sass的文件目录，里面针对不同的组件有一个独立的.scss文件，例如，今天所说的bar，他就有一个对应的bars.scss文件。这里面是一大串的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;
}

// Modifier class to dock any bar below .bar-nav
.bar-header-secondary {
  top: $bar-base-height;
}

// Modifier class for footer bars
.bar-footer {
  bottom: 0;
}

// Modifier class to dock any bar above a standard bar
.bar-footer-secondary {
  bottom: $bar-base-height;
}

// Modifier class to dock any bar above a .bar-tab
.bar-footer-secondary-tab {
  bottom: $bar-tab-height;
}

// Give the footers the correct border
.bar-footer,
.bar-footer-secondary,
.bar-footer-secondary-tab {
  border-top: $border-default;
  border-bottom: 0;
}

没有接触过Sass的同学，可能看得会后怕。不过懂的同学，这样的代码就是小菜一碟呀。这个文件将在后面的示例中，会显示出他的强悍。接下来的实战也将是以Sass文件修改为例。还等什么呢？开始吧。

构建自己的Bar

从这一步开始，来实现设计图中"1～4"几中效果。

创建只有标题的Bar

第一步,先在index.html文件中加入所需要的结构，为了更好的向大家展示，我将一步一步来介绍。

我先创建一个结构，这个结构就是只展示了一个光标题，没有任何的图标、按钮。

<header class="bar bar-nav">
  <h1 class="title">W3cplus</h1>
</header>

刷新你的浏览器，你将看到这样的效果：

这显然不是我们需要的，我们要的是以蓝底白字为主。在bars.scss文件中，找到对应的代码：

.bar {
  ...
  background-color: $chrome-color;
  border-bottom: $border-default;
  ...
}

因为我们设计图的背景色是#4396fc，底部边框是#3a84db。根据bars.scss文件中对应的变量$chrome-color和$border-default。我们接下来要做的是修改变量文件variables.scss中对应的变量值：

$chrome-color:  #fff !default;
$border-default: 1px solid #ddd !default;

根据设计图，将这两个变量对应的值修改成：

$chrome-color:  #4396fc !default;
$border-default: 1px solid #3a84db !default;

为了验证我们这样操作是不是正确的，在你的命令终端，编译ratchet.scss文件。

sass --watch sass/ratchet.scss:css/ratchet.css

现在刷新浏览器：

有些许的兴奋了。现在标题还不是需要的#fff色。继续努力，在bars.scss文件中有这样的一段代码：

.title {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 (-$bar-side-spacing);
  font-size: $font-size-default;
  font-weight: $font-weight;
  line-height: $bar-base-height;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

非常简单，把里面的color:#000;换成color:#fff;即可。

非常完美，表示我们第一步大功告成。

给标题添加Icon

对于首页的bar，我们常看到的设计效果类似于设计图中的“4”。左边表示菜单图标，右边表示搜索表单。那继续在结构中添加所需要的图标：

<header class="bar bar-nav">
  <a href="##" class="icon icon-list pull-left"></a>
  <a href="" class="icon icon-search pull-right"></a>
  <h1 class="title">W3cplus</h1>
</header>

为了偷懒，我直接使用了Ratchet框架自带的icon。当然很多时候没有那么幸运，你的设计中用到的图标，在Ratchet框架图标中不具备，这个时候不得不使用自己的，那么我建议你使用一个属于自己的命名规则，以来区分框架自带的。比如：

<a href="##" class="icon icon-w3c-list pull-left"></a>

这个时候你一样可以看到这样的效果：

图标虽然出来了，但离设计相差甚远。需要我们继续努力。图标是白色的，并且带有深蓝色的背景。按前面的方法，在bars.scss继续添加代码。不过这里有一点不一样，因为这两个图标.icon-list和.icon-search有可能将会在别的地方使用，所以我们只能在.bar范围内添加：

.bar {
  .icon-list,
  .icon-search  {
    padding: 3px 10px;
    background-color: #3a84db;
    border-radius:  20px;
    top: 8px;
    color: #fff;
  }
}

效果如下：

到这里，就实现了所需要的Bar效果。

实现带有按钮和图标的bar

前面实现了首页上的Bar效果，但内页头部的bar展示的风格并不像这样，大家常看到的会如设计图中效果“1”所示。这个效果对应的就是Ratchet框架上带有按钮的bar。为了不与前面的效果所冲突，咱先copy出一个新页面“page.html”。

首先在page.html中添加我们所需要的结构：

<header class="bar bar-nav">
  <button class="btn btn-link btn-nav pull-left"><span class="icon icon-left-nav"></span>返回</button>
  <a href="##" class="icon icon-gear pull-right"></a>
  <h1 class="title">Ratchet系列教程</h1>
</header>

默认效果：

结合下来，我们发现顶部bar的icon的颜色都是#fff;。前面的做法是给.bar下面的.icon-list和.icon-search设置了color:#fff;(由于icon是字体文件生成的，用color解决颜色问题，你懂的)。如此看来，我们这样并不是好的方案，既然我们的bar是蓝底，图标都是白色，为了不要每次修改icon的颜色，我们直接在.bar中添加一个color:#fff;：

.bar {
  .icon {
    ...
    color: #fff;
  }
  ...
}  

此时icon的颜色变成我们所需要的颜色了。

非常接近我们的设计图了。继续使用调试工具，不难发现，.btn-link的颜色，我们需要重置一下。在bars.scss中可以找到：

.bar .btn-link {
  top: 0;
  padding: 0;
  font-size: 16px;
  line-height: $bar-base-height;
  color: $primary-color;
  border: 0;

  &:active,
  &.active {
    color: darken($primary-color, 10%);
  }
}

这里颜色调用了变量$primary-color，其对应的颜色值是#428bca。我们在variables.scss文件中，找到了一个对应白色颜色的变量：

$default-color:  #fff !default;

这下好办了，替换一下就OK。就算没有也不怕，只需要在variables.scss文件中添加一个新的变量，我们修改之后：

.bar .btn-link {
  ...
  color: $default-color;

  &:active,
  &.active {
    color: darken($default-color, 10%);
  }
}

OK!效果完成了。是不是觉得并不是太复杂的一件事情了。别停，我们继续，还有一个效果。

带按钮的bar

还有一种情况，顶部bar带有button。比如设计图中的第四种效果。这种效果在Ratchet框架中也有现成的——带按钮的bar。同样，我们重新创建一个新页面send.html。复制所需代码进去：

<header class="bar bar-nav">
  <button class="btn pull-left">返回</button>
  <button class="btn pull-right">完成</button>
  <h1 class="title">申请发布</h1>
</header>

刷新浏览器，你将看到下图的效果：

怎么操作，我想不需要具体说了，直接bars.scss看代码，修改代码：

.bar .btn {
  ...
  //覆盖bars中的button
  color: #fff;
  border-color: darken($chrome-color, 20%);
  @include box-shadow(0,0,0,.3);
  @include linear-gradient(lighten($chrome-color, 5%),darken($chrome-color, 10%));
  ....
}

跟想像中需要的效果是一样的。但你是否注意到，前面page.html中也有一个.btn，也是属于.bar中的。如此一来会不会冲突呢？赶紧看看：

莫急，回到前面的.btn-link，相比之下，多了背景，多了阴影。找到原因就好办，重新修改一下.btn-link：

.bar .btn-link {
  ....

  //覆盖button的样式
  @include box-shadow(none);
  background: transparent;

  ....
}

验证一下：

这下可算是完美了。

待续...

Ratchet框架中bar的效果还有其他的，如果在这一节内容中要全部介绍完，目测一下篇幅会很长。所以暂时打住，将其他的部分移到下一节中介绍。下一节将向大家介绍，如何构建自己的底部bar效果。希望大家喜欢。

总结

在这一节中，通过具体的实例，介绍了如何借助于Ratchet框架构建属于自己的顶部Bar。可以说实战性强，当然对于不了解Sass的同学来说，其中也略有一定的难度，因为自定义自己设计风格的修改并不是在style.css中添加样式来覆盖ratchet.css，而是直接通过Ratchet提供的Sass文件进行修改。其实整个过程还是蛮有意思的，你不仿自己动手试试。

download

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