mui 之 手机布局

基础布局

快捷键补全说明：Mui快捷键适用于 HBuilder

下载地址：https://www.dcloud.io/hbuilderx.html

头部

快捷键：mHeader

<!-- 带返回的头部 -->
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">标题</h1>
</header>

主体

快捷键：mbody

<div class="mui-content">
        大数据男孩
</div>

底部选项卡

快捷键： mTab

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-phone"></span>
        <span class="mui-tab-label">电话</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">邮件</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>

效果