如果你有跟着《Ratchet教程：创建项目》一文走下来，你已成功的完成了使用Ratchet框架构建移动端项目。接下来就是在这个项目中添加自己需要的内容。那么今天我们要做的就是：构建自己的顶部bar。
假设你的标题栏有这样几种设计效果：
上图是从网上找来的，不总共是几种不同的设计方案，当然在一个项目中不可能使用这么多种不同的色系。接下来的示例中，我将所有效果都拍平了，而且采用第一种色系。同时实现“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文件进行修改。其实整个过程还是蛮有意思的，你不仿自己动手试试。
如需转载，烦请注明出处：http://www.w3cplus.com/mobile/custom-top-nav-bars-ratchet.html