首页
核心
实例
资源
关于
v1.0

Btmnav 手机底部菜单

基本用法

Btmnav底部菜单是手机专用的，其在pc电脑和平板电脑中处于隐藏状态。因为btmnav是固定在底部的，所以需要有个占位标签ax-space-btmnav紧放在btmnav后面

默认平板竖手机
<div class="ax-btmnav">
    <div class="ax-row">
        <div class="ax-col">
            <a href="#" class="ax-selected">
                <span class="ax-figure ax-iconfont ax-icon-home"></span>
                <span class="ax-text">首页</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-message-o"><i class="ax-dot"></i></span>
                <span class="ax-text">社区</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-file-text"></span>
                <span class="ax-text">文章</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-star"></span>
                <span  class="ax-text">收藏</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-person"><i class="ax-badge">2</i></span>
                <span class="ax-text">我的</span>
            </a>
        </div>
    </div>
</div>
<div class="ax-space-btmnav"></div>

复杂结构

除了常规的上图标下文字结构，还常见个人中心头像和单独图标按钮的情况。

默认平板竖手机
<div class="ax-btmnav">
    <div class="ax-row">
        <div class="ax-col">
            <a href="#" class="ax-comm ax-selected">
                <span class="ax-figure ax-iconfont ax-icon-home"></span>
                <div class="ax-text">首页</div>
            </a>
        </div>
        <div class="ax-col">
            <a href="#" class="ax-comm">
                <span class="ax-figure ax-iconfont ax-icon-message-o"><i class="ax-dot"></i></span>
                <span class="ax-text">社区</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#" class="ax-single">
                <span class="ax-iconfont ax-icon-plus-o-f"></span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#" class="ax-comm">
                <span class="ax-figure ax-iconfont ax-icon-star"></span>
                <span  class="ax-text">收藏</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#" class="ax-img">
                <span class="ax-figure" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"><i class="ax-badge">2</i></span>
                <span class="ax-text">我的</span>
            </a>
        </div>
    </div>
</div>
<div class="ax-space-btmnav"></div>

常规图片

购物节时通常会变更菜单为某类图片以增强营销效果，图片的宽高为28px。

默认平板竖手机
<div class="ax-btmnav">
    <div class="ax-row">
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure" style="background-image: url(images/btmnav01.png)"></span>
                <span class="ax-text">首页</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure" style="background-image: url(images/btmnav02.png)"></span>
                <span class="ax-text">社区</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure" style="background-image: url(images/btmnav03.png)"></span>
                <span class="ax-text">文章</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure" style="background-image: url(images/btmnav04.png)"></span>
                <span  class="ax-text">收藏</span>
            </a>
        </div>
    </div>
</div>
<div class="ax-space-btmnav"></div>

分割线

在ax-col中间插入ax-gutter-line即可实现分割线。

默认平板竖手机
<div class="ax-btmnav">
    <div class="ax-row">
        <div class="ax-col">
            <a href="#" class="ax-selected">
                <span class="ax-figure ax-iconfont ax-icon-home"></span>
                <span class="ax-text">首页</span>
            </a>
        </div>
        <div class="ax-gutter-line"></div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-message-o"><i class="ax-dot"></i></span>
                <span class="ax-text">社区</span>
            </a>
        </div>
        <div class="ax-gutter-line"></div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-file-text"></span>
                <span class="ax-text">文章</span>
            </a>
        </div>
        <div class="ax-gutter-line"></div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-star"></span>
                <span  class="ax-text">收藏</span>
            </a>
        </div>
        <div class="ax-gutter-line"></div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-person"><i class="ax-badge">2</i></span>
                <span class="ax-text">我的</span>
            </a>
        </div>
    </div>
</div>
<div class="ax-space-btmnav"></div>

集中布局

有时候底部菜单很少，只有两个或者三个，那么可以考虑集中布局，方法是直接在ax-btmnav上写入style样式，例如本例是：padding:0 14%

默认平板竖手机
<div class="ax-btmnav" style="padding:0 14%">
    <div class="ax-row">
        <div class="ax-col">
            <a href="#" class="ax-selected">
                <span class="ax-figure ax-iconfont ax-icon-home"></span>
                <span class="ax-text">首页</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-message-o"><i class="ax-dot"></i></span>
                <span class="ax-text">社区</span>
            </a>
        </div>
        <div class="ax-col">
            <a href="#">
                <span class="ax-figure ax-iconfont ax-icon-file-text"></span>
                <span class="ax-text">文章</span>
            </a>
        </div>

    </div>
</div>
<div class="ax-space-btmnav"></div>