导航类
最后更新于：2022-04-01 01:24:17
## 顶部导航栏
这个是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>
~~~