H5+Runtime|MUI

html5+：是基于在plus的环境下，html5原有的基础上，扩展了JavaScrip的功能，使得js可以在手机上面能够调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送.，下载图片，ajax跨域请求，短信，打电话，获取当前设备信息等等。

MUI：是一种基于手机优化之后的html样式框架，并且里面集成了一些html5+功能。

HTML5开发APP的原理：就是跟你制作手机网站的原理差不多，只不过在基于html5+和MUI的基础上，再使用hbuilder打包之后，使你的html页面能够实现原生app的大部分功能，使你html体验越来越像app

MUI不是DOM封装，但官方不建议使用jQuery，jq对多平台兼顾做的不是很好，可能会在移动端会产生白屏。
为了兼顾多平台尽量使用原生JS

基础布局

头部

<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">test</h1>
</header>

主体

<div class="mui-content">
</div>

常用

mui.toast("异常");

MUI布局

使用过BootStrap之类的应该看了马上就能懂了。MUI里面也是使用的十二列的栅格系统。

类名:

mui-row 
mui-col-xs-1 mui-col-xs-2 mui-col-xs-3 mui-col-xs-4 
mui-col-xs-5 mui-col-xs-6 mui-col-xs-7 mui-col-xs-8 
mui-col-xs-9 mui-col-xs-10 mui-col-xs-11 mui-col-xs-12

mui-col-sm-1 mui-col-sm-2 mui-col-sm-3 mui-col-sm-4 
mui-col-sm-5 mui-col-sm-6 mui-col-sm-7 mui-col-sm-8 
mui-col-sm-9 mui-col-sm-10 mui-col-sm-11mui-col-sm-12

xs代表的是极小屏，sm代表的是小屏
col-xx-xx代表的就是占用系列

<div class="mui-row">  
    <div class="mui-col-xs-12">12</div>  
    <div class="mui-col-xs-11">11</div>  
    <div class="mui-col-xs-1">1</div>  
    <div class="mui-col-xs-10">10</div>  
    <div class="mui-col-xs-2">2</div>  
    <div class="mui-col-xs-9">9</div>  
    <div class="mui-col-xs-3">3</div>  
    <div class="mui-col-xs-8">8</div>  
    <div class="mui-col-xs-4">4</div>  
    <div class="mui-col-xs-7">7</div>  
    <div class="mui-col-xs-5">5</div>  
    <div class="mui-col-xs-6">6</div>  
    <div class="mui-col-xs-6">6</div>  
</div>  

转载自：https://blog.csdn.net/summer_dew/article/details/81066241