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/examples/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-fill"></i>
                236
            </a>
            <a href="#" class="ax-">
                <i class="ax-iconfont ax-icon-star-fill"></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-ad">
                结算
                <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>