顶部导航栏

这个是app的必须品了，在这定义了几款样式来方便使用，同时根据apicloud的$api.fixStatusBar();做了兼容处理，在ios7+和android4.4以上可以默认修改状态栏背景色。

使用.aui-bar 、.aui-bar-nav来定义你的顶部导航栏

自定义导航栏颜色，需要重新定义下.aui-bar或着单独写个样式，如果使用了.aui-btn也需要对按钮重新定义下,或者是单独写个样式，比如：

      .aui-bar.aui-orange { background:#ff9900;}
.aui-bar .aui-btn { background:#ff9900;}或.aui-bar .aui-btn.aui-btn-orange { background:#ff9900}
    

      <header class="aui-bar aui-bar-nav aui-orange">
 ......   
</header>
    

结合.aui-btn和.aui-btn-left 、 .aui-btn-right可以方便实现在导航栏左右增加按钮

      <header class="aui-bar aui-bar-nav aui-bar-warning">
    <a class="aui-btn aui-btn-warning aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">AUI</div>
    <a class="aui-btn aui-btn-warning">
    <span class="aui-iconfont aui-icon-menu"></span>
    </a>
</header>
    

底部的工具切换栏

使用.aui-nav 、.aui-bar-tab来定义

这个在使用时需要结合栅格系统来完成布局，通过.active或.active-*来定义当前选中状态(＊为样式，有primay \ success \ info \ dark \ danger \ warning)

      <footer class="aui-nav aui-bar-tab" id="aui-footer">
    <div class="aui-col-xs-3 aui-text-center active-warning">
        <span class="aui-iconfont aui-icon-favor"></span>
        <p>栏目1</p>
    </div>
    <div class="aui-col-xs-3 aui-text-center">
        <span class="aui-iconfont aui-icon-mark"></span>
        <p>栏目2</p>
    </div>
    <div class="aui-col-xs-3 aui-text-center">
        <span class="aui-iconfont aui-icon-like"></span>
        <p>栏目3</p>
    </div>
    <div class="aui-col-xs-3 aui-text-center">
        <span class="aui-iconfont aui-icon-my"></span>
        <p>栏目4</p>
    </div>
</footer>