顶部导航栏

使用 .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>

示例源码

<header class="aui-bar aui-bar-nav">顶部导航栏</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <a class="aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">fixStatusBar效果</div>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>返回
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-menu"></span>
    </a>
    <div class="aui-title">Title</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>
</header>
<section class="aui-content-padded">
    <p class="aui-text-info">顶部有搜索框的导航栏效果</p>
</section>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title" style="left:2rem; right: 2rem;">
        <div class="aui-searchbar" id="search">
            <div class="aui-searchbar-input aui-border-radius">
                <i class="aui-iconfont aui-icon-search"></i>
                <input type="search" placeholder="请输入搜索内容" id="search-input">
                <div class="aui-searchbar-clear-btn">
                    <i class="aui-iconfont aui-icon-close"></i>
                </div>
            </div>
            <div class="aui-searchbar-btn" tapmode>取消</div>
        </div>
    </div>
    <a class="aui-pull-right aui-btn">
        <span class="aui-iconfont aui-icon-comment"></span>
    </a>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title" style="left:2rem; right: 0.5rem;">
        <div class="aui-searchbar" id="search">
            <div class="aui-searchbar-input aui-border-radius">
                <i class="aui-iconfont aui-icon-search"></i>
                <input type="search" placeholder="请输入搜索内容" id="search-input">
                <div class="aui-searchbar-clear-btn">
                    <i class="aui-iconfont aui-icon-close"></i>
                </div>
            </div>
            <div class="aui-searchbar-btn" tapmode>取消</div>
        </div>
    </div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title" style="left:2rem; right: 0.5rem;">
        <div class="aui-searchbar" id="search">
            <div class="aui-searchbar-input aui-border-radius">
                <i class="aui-iconfont aui-icon-search"></i>
                <input type="search" placeholder="请输入搜索内容" id="search-input">
                <div class="aui-searchbar-clear-btn">
                    <i class="aui-iconfont aui-icon-close"></i>
                </div>
            </div>
            <div class="aui-searchbar-btn" tapmode>取消</div>
        </div>
    </div>
</header>