Footer 自适应底部

使用说明

关于页面底部的做法有很多，本框架提供一个简单的参考。借助框架已有的代码完成底部结构搭建。常用类如下：

ax-footer 表示这是自适应底部
ax-row 表示使用自适应布局
ax-col 表示自适应伸缩
ax-split 表示在移动端取消自适应布局
ax-operate 表示底部操作项
ax-copyright 表示底部版权
ax-break/ax-break-* 表示纵向分隔

                                <div class="ax-footer">
                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-operate">
                                            <a href="###">在线反馈</a>
                                            <a href="###">广告合作</a>
                                        </div>
                                        <div class="ax-copyright">?2020 <a href="###">AX斧头前端框架</a>版权所有　备案号:粤ICP备13043786号　<a href="###">粤公网安备33041102000390号</a></div>
                                    </div>
                                </div>

更多变体

关于页面底部的做法有很多，本框架提供一个简单的参考。借助框架已有的代码完成底部结构搭建。

                                <div class="ax-footer">
                                    <div class="ax-row">
                                        <div class="ax-col ax-operate">
                                            <a href="###">在线反馈</a>
                                            <a href="###">广告合作</a>
                                        </div>
                                        <div class="ax-copyright">?2020 <a href="###">AX斧头前端框架</a>版权所有　备案号:粤ICP备13043786号　<a href="###">粤公网安备33041102000390号</a></div>
                                    </div>
                                </div>

更换位置

可以将ax-operate和ax-copyright位置互换。

                                 <div class="ax-footer">
                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-copyright">?2020 <a href="###">AX斧头前端框架</a>版权所有　备案号:粤ICP备13043786号　<a href="###">粤公网安备33041102000390号</a></div>
                                        <div class="ax-operate">
                                            <a href="###" class="ax-btn ax-line ax-sm ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-fill"></i></a>
                                            <a href="###" class="ax-btn ax-line ax-sm ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-fill"></i></a>
                                            <a href="###" class="ax-btn ax-line ax-sm ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-fill"></i></a>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-xl"></div>
                                <div class="ax-break-line"></div>
                                <div class="ax-break-xl"></div>

                                <div class="ax-footer">
                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-copyright">?2020 <a href="###">AX斧头前端框架</a>版权所有　备案号:粤ICP备13043786号　<a href="###"><img src="http://www.beian.gov.cn/img/new/gongan.png" />粤公网安备33041102000390号</a></div>
                                        <div class="ax-operate">
                                            <a href="###" class="ax-iconfont ax-icon-qq-fill"></a>
                                            <a href="###" class="ax-iconfont ax-icon-wechat-fill"></a>
                                            <a href="###" class="ax-iconfont ax-icon-facebook-fill"></a>
                                        </div>
                                    </div>
                                </div>