Btmbtn 手机底部操作

基本用法

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

<div class="ax-btmbtn">
    <div class="ax-row">
        <div class="ax-col">
            <a href="###" class="ax-color-ignore">
                <i class="ax-iconfont ax-icon-trash"></i>
                取消
            </a>
        </div>
        <div class="ax-col">
            <a href="###">关闭</a>
        </div>
        <div class="ax-col">
            <a href="###" class="ax-color-primary">
                继续
                <i class="ax-iconfont ax-icon-right"></i>
            </a>
        </div>
    </div>
</div>
<div class="ax-space-btmbtn"></div>

评论底部

针对评论专门设计的底部，包含了头像、评论按钮和统计。

默认平板竖手机

<div class="ax-btmbtn">
    <div class="ax-row">
      <a href="#" class="ax-head" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a>
        <div class="ax-col">
           <a href="###" class="ax-resemble">想说点什么...</a>
        </div>
        <div class="ax-btns">
            <a href="#" class="ax-">
                <i class="ax-iconfont ax-icon-message-o-f"></i>
                236
            </a>
            <a href="#" class="ax-">
                <i class="ax-iconfont ax-icon-star-f"></i>
                94
            </a>
        </div>
    </div>
</div>
<div class="ax-space-btmbtn"></div>

购物车结算

使用栅格方法实现不同宽度的按钮。

默认平板竖手机

<div class="ax-btmbtn">
    <div class="ax-row">
        <a href="###" class="ax-col ax-col-8">
            取消
        </a>
        <a href="###" class="ax-col ax-col-16 ax-bg-question">
                结算
                <i class="ax-iconfont ax-icon-right"></i>
        </a>
    </div>
</div>
<div class="ax-space-btmbtn"></div>

图标按钮

纯图标按钮简明扼要。

默认平板竖手机

<div class="ax-btmbtn">
    <div class="ax-row">
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-edit"></i>
        </a>
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-message-o"></i>
        </a>
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-trash"></i>
        </a>
    </div>
</div>
<div class="ax-space-btmbtn"></div>

分割线

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

默认平板竖手机

<div class="ax-btmbtn">
    <div class="ax-row">
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-edit"></i>
        </a>
        <div class="ax-gutter-line"></div>
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-message-o"></i>
        </a>
        <div class="ax-gutter-line"></div>
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-trash"></i>
        </a>
    </div>
</div>
<div class="ax-space-btmbtn"></div>

集中布局

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

默认平板竖手机

<div class="ax-btmbtn" style="padding:0 14%;">
    <div class="ax-row">
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-edit"></i>
        </a>
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-message-o"></i>
        </a>
        <a href="###" class="ax-col">
            <i class="ax-iconfont ax-icon-trash"></i>
        </a>
    </div>
</div>
<div class="ax-space-btmbtn"></div>