1安装HBuilder5.0.0,安装后的界面截图如下：

2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明，创建上图的Boilerplate.html：

3 代码内容如下：

<!--

作者：XXX@qq.com

时间：2015-08-02

描述：使用MUI，您可以先简单地直接将以下CSS和JS加入到您的HTML文档中：

<link href="//cdn.muicss.com/mui-0.1.19/css/mui.min.css" rel="stylesheet" type="text/css" />

<script src="//cdn.muicss.com/mui-0.1.19/js/mui.min.js"></script>

MUI的CSS样式表定义了helper类，可用于布局和UI组件（例如按钮和表格）。

MUI的JS文件自动检测是否MUI的HTML已被插入到DOM和增强交互元素，如按钮、

表单和下拉列表。您可以在这个文档找到所有可用的MUI元素的列表以及HTML例子。

下面是：HTML5示例：

MUI已经包含了Normalize.css，所以您可以将MUI的CSS作为您的项目的基础样式表。

看看下面这个示例：

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- load MUI -->

<link href="//cdn.muicss.com/mui-0.1.19/css/mui.min.css" rel="stylesheet" type="text/css" />

<script src="//cdn.muicss.com/mui-0.1.19/js/mui.min.js"></script>

<script>

window.addEventListener('load',function(){

//add button dynamically

var buttonEl = document.createElement('button');

buttonEl.className = 'mui-btn mui-btn-primary mui-btn-raised';

buttonEl.innerHTML = 'My dynamic button';

document.body.appendChild(buttonEl);

});

</script>

</head>

<body>

<!--

为了使框架容易被使用，MUI使用CSS3特性来检测是否MUI组件被添加到DOM和自动附加事件处理程序。这里有

一个动态创建按钮的例子，支持自动连锁反应：

-->

</body>

</html>

4 点击菜单栏中的发行,然后选择一个浏览器。

5 运行后的效果如下：

==========================================================================

1 自定义字体示例

为了给开发人员完全控制的能力，MUI不使用@import或下载任何外部文件。因此，如果你想使用谷歌Roboto字体(或任何其他自定义字体)必须显式地将其添加到页面，并通过CSS配置。当您安装了一个自定义字体，一定要确认字体的粗细/样式是否为MUI提供的参数，若不是请修改：300,400,400italic,500,600,700.

下面的HTML可以用来设置MUI和谷歌Roboto字体(命名为Demo03.html)：

<!doctype <html>

<head>

<title></title>

<meta charset="utf-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<!--

作者：XX@qq.com 涂作权

时间：2015-08-03

描述：load custom font

-->

<link href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700" rel="stylesheet" type="text/css"/>

<!--

作者：XXX@qq.com 涂作权

时间：2015-08-03

描述：load MUI

-->

<link href="//cdn.muicss.com/mui-0.1.19/css/mui.min.css" rel="stylesheet" type="text/css" />

<script src="//cdn.muicss.com/mui-0.1.19/js/mui.min.js"></script>

<!--

作者：XXX@qq.com 涂作权

时间：2015-08-03

描述：custom font css

-->

<style>

body {

font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;

}

</style>

</head>

<body>

<!--

作者：XXX@qq.com 涂作权

时间：2015-08-03

描述：content goes here

-->

<h1>Demo arigato,Mr.Roboto</h1>

</body>

</html>

运行结果：

==========================================================================

1 图标字体示例

图标字体是向网页添加图标的好顶赞的方法。虽然MUI不包括任何图标字体，但您可以选择使用开源字体图标包，这里有一个使用Font Awesome图标字体的页面的示例：

编写Demo04.html,代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- load icon font -->

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<!-- load MUI -->

<link href="//cdn.muicss.com/mui-0.1.19/css/mui.min.css" rel="stylesheet" type="text/css" />

<script src="//cdn.muicss.com/mui-0.1.19/js/mui.min.js"></script>

</head>

<body>

<!-- content goes here -->

<i class="fa fa-globe"></i> Hello, world!

</body>

</html>

运行效果：

01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例的更多相关文章

  1. 基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式

    在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...

  2. 01_MUI之Boilerplate中：HTML5演示样例，动态组件，自己定义字体演示样例，自己定义字体演示样例，图标字体演示样例

     1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...

  3. 046——VUE中组件之使用动态组件灵活设置页面布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  5. vue2入坑随记(二) -- 自定义动态组件

    学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...

  6. echarts中如何使用timeline组件

    1.吃碗面 这里关于echarts3 官网的示例我不得不吐槽一下,逼格真高!一小部分示例动不动数据就是国家统计局搞出来的,你脸真大.当然他们做的示例的确是很好,这一点毫无疑问.当我看了echarts3 ...

  7. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

  8. Vuejs——（12）组件——动态组件

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  9. Vue.js动态组件

    动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...

随机推荐

  1. android M Launcher之数据库实现

    前面一系列文章我们分析了LauncherModel的工作过程,它会把数据绑定到桌面上.从今天开始我们来分析下Launcher的数据来源即Launcher数据库的实现. 一个完整的数据库实现都应该包括两 ...

  2. Swift基础之音乐播放随机变换着色板

    今天的内容比较简单,我也就不做详细的文字介绍了,直接上代码,希望对大家有所帮助 var audioPlayer = AVAudioPlayer()    //梯度配色    let gradientL ...

  3. C控制台实现模拟平抛运动算法

    平抛运动这个相信读了高中物理都知道这个概念了,详细的我就不说了,不明白的看看百度: 平抛运动 接下来看看用控制台实现的平抛运动算法: #include <stdio.h> #include ...

  4. ROS讲座 关于ROS2和Gazebo C++ in Open Source Robotics

    分享一个不错的介绍ROS2和Gazebo的视频讲座. Gazebo中的云彩飘动起来了!!!! 超清视频分享网址:    http://v.youku.com/v_show/id_XMTcyMzY0Nz ...

  5. Centos6.6上源码安装Nodejs V4版本

    本来就是想在vps上装一个Ghost博客,这个博客依赖的是Nodejs,然后推荐的是V4版本.然后我就对着官网的步骤安装,发现根本没有Centos6 i386的资源了(64位的还是有的), 我只能在那 ...

  6. 剑指Offer——全排列递归思路

    剑指Offer--全排列递归思路 前言 全排列,full permutation, 可以利用二叉树的遍历实现.二叉树的递归遍历,前中后都简洁的难以置信,但是都有一个共同特点,那就是一个函数里包含两次自 ...

  7. MySQl数据库必会sql语句加强版

    这篇承接上一篇<mysql必会sql语句>:http://blog.csdn.net/qq_32059827/article/details/51763950 这一篇属于加强版,问题和sq ...

  8. J2EE进阶(八)Hibernate与延迟加载机制探究

    Hibernate与延迟加载机制探究 前言 Hibernate对象关系映射提供延迟的与非延迟的对象初始化.非延迟加载在读取一个对象的时候会将与这个对象所有相关的其他对象一起读取出来.这有时会导致成百的 ...

  9. 使用lrucache和diskLrucache实现照片墙

    其实,在真正的项目实战当中如果仅仅是使用硬盘缓存的话,程序是有明显短板的.而如果只使用内存缓存的话,程序当然也会有很大的缺陷.因此,一个优秀的程序必然会将内存缓存和硬盘缓存结合到一起使用,那么本篇文章 ...

  10. 2015-2016机器人操作系统（ROS）及其应用暑期学校资料汇总 ROS Summer School 持续更新

    综合信息:2015    2016 课程资料:2015     2016 其他重要机器人.ROS相关学习活动 知乎关于ROS的话题 1 ROS的开发流程?http://www.zhihu.com/qu ...