## 頂部導航欄
這個是app的必須品了，在這定義了幾款樣式來方便使用，同時根據apicloud的`$api.fixStatusBar(); `做了兼容處理，在ios7+和android4.4以上可以默認修改狀態欄背景色。<Br />
使用`.aui-bar` 、`.aui-bar-nav`來定義你的頂部導航欄<br />
自定義導航欄顏色，需要重新定義下`.aui-bar`或著單獨寫個樣式，如果使用了`.aui-btn`也需要對按鈕重新定義下,或者是單獨寫個樣式，比如：<Br />
~~~
.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>
~~~
