ionic的header颜色设置

http://blog.csdn.net/qq_28499043/article/details/47008757

表示我也是刚开始学Webstorm的，希望大家能够和我多多交流学习！

下面大家看到的是index.html里面的代码,这一段代码代表了所有页面导航的背景颜色设置是无色

  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
<ion-nav-bar class="bar-stable">  
  <ion-nav-back-button>  
  </ion-nav-back-button>  
</ion-nav-bar>  
  
  

显示的效果如下：

刚开始学的时候，我没有认真了解清楚就用了，结果后面我给不同页面加了不同的导航颜色，以及在导航上放置按钮，却没有效果出来，于是我去查代码，最后才发现

是这段代码惹的祸，于是我就把它删了，在各个界面另外写导航方面的代码，例如下图

  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
<ion-view view-title="个人中心">  
    <ion-nav-bar class="bar-calm">  
    </ion-nav-bar>  
</ion-view>  
  
  

出来的效果如下：

或者，我们也可以这么干：

[html]  view plain  copy

1. <ion-view>  
2. <divclassdivclass="bar bar-header bar-calm">  
3. <ahrefahref="#/logon"class="button button-icon ion-ios-arrow-left">back</a>  
4. <spanclassspanclass="title">注册</span>  
5. </div>  
6. </ion-view>  

效果如下：

下面列出9种颜色代码如下：

光色：bar-light

灰色：bar-stable

深蓝：bar-positive

浅蓝：bar-calm

绿色：bar-balanced

黄色：bar-energized

红色：bar-assertive

紫色：bar-royal

黑色：bar-dark

当然，如果有其他的类似效果的代码，希望可以一起分享！