开发者社区> 涂作权> 正文

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

2015-08-03 1589

简介： 1安装HBuilder5.0.0,安装后的界面截图如下： 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明，创建上图的Boilerplate.html： 3 代码内容如下： <!-- 作者：XXX@qq.com 时间：2015-08-02

+关注继续查看

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">

<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">

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

<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>

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

</body>

</html>

运行效果：

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

移动开发前端开发 JavaScript HTML5

HTML组件

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

Flume监听文件夹中的文件变化，并把文件下沉到hdfs 4075 模拟使用Flume监听日志变化，并且把增量的日志文件写入到hdfs中 7039 Flume安装部署，采集方案配置文件编写案例，启动agent采集数据 2311 日志采集框架Flume、Flume介绍、概述、运行机制、Flume采集系统结构图（1、简单结构、复杂结构） 2897 Hive内置运算函数，自定义函数(UDF)和Transform 5089

相关文章

凯小默

html文件里怎么引用vue组件？

html文件里怎么引用vue组件？

31 0

uiu

【Svelte】-（1）基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签

【Svelte】-（1）基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签

78 0

茶无味的一天

语义化 HTML 编写一个原生 Web Components 组件

使用语义化 HTML 编写一个原生 Web Components 组件

110 0

-开发者助手-

resumable.js —— 基于 HTML 5 File API 的文件上传组件支持续传

resumable.js是一个 JavaScript 库，通过 HTML5 文件 API 提供了稳定和可恢复的批量上传功能。在上传大文件的时候将文件分割成小块，每块在上传失败的时候，上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。由于采用了分块技术，它也允许用户暂停和恢复上传。

396 0

-开发者助手-

HTML5文件上传组件的深度剖析

对于文件上传，相信还有不少同学还停留在FLASH时代，其实现在 HTML5 不仅可以实现文件上传，而且可以做得更好。以下是对 HTML5 与 FLASH 就文件上传方面的功能调研测试得出的结果。

147 0

江大白

HTML原生组件

本文转载自水墨寒的博客

1773 0

前端白鸽

微信小程序的组件用法与传统HTML5标签的区别

小程序与传统HTML5的区别小程序刚开放公测，互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联，甚至小程序就是基于HTML5开发。

1431 0

余二五

golang Beego框架之HTML表单中的select标签组件的处理

1363 0

嗯哼9925

JS组件系列——使用HTML标签的data属性初始化JS组件

1373 0

嗯哼9925

Html5游戏框架createJS组件--EaselJS

1513 0

+关注

涂作权

java，架构，编程语言相关专家

文章

问答

作者高分内容

更多

Flume监听文件夹中的文件变化，并把文件下沉到hdfs 4075 模拟使用Flume监听日志变化，并且把增量的日志文件写入到hdfs中 7039 Flume安装部署，采集方案配置文件编写案例，启动agent采集数据 2311 日志采集框架Flume、Flume介绍、概述、运行机制、Flume采集系统结构图（1、简单结构、复杂结构） 2897 Hive内置运算函数，自定义函数(UDF)和Transform 5089

文章排行榜

最热

最新

1 fastjson2为什么这么快 74513

2 Meetup 报名丨共话云原生架构升级，微服务x容器开源 Meetup 北京站来啦！ 64499

3 CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」 63483

4 结构化总结与结构化思考之《金字塔原理》总结 56274

5 C语言进阶——指针进阶试题讲解（万字长文详解） 54924

6 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 54098

7 C语言题解 | 移除元素(多种解法) 49959

8 jasypt-spring-boot敏感信息加密解密利器使用指南 47642

9 快速开发光伏电站数字孪生运维系统（一） 44651

10 DataWorks管控台无法配置PAI引擎临时解决方案 42509

11 操作系统课程设计：新增linux驱动程序 41892

12 重构的核心-让代码保持整洁 40361

13 【Linux】-- 开发工具yum、vim、gcc、g++、gdb、make、makefile使用介绍（一） 39925

14 IoT设备数据业务价值洞察实践 37957

15 【C++修炼之路】类和对象（中）—— 筑基篇 37268

16 Hive数据倾斜的原因以及常用解决方案 33175

17 高并发编程之阻塞队列 32720

18 Spring 事务【隔离级别与传播机制】 30479

19 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29486

20 计网之初识网络(理解网络传输的基本流程) 28006

1 Flink CDC 专题首发｜每天 10 分钟，解锁新一代数据集成框架 123

2 性能最大提升60%，阿里云第八代企业级实例ECS g8i正式上线 135

3 身份证实名认证接口验证不一致的原因 107

4 JVM学习.03 类加载机制 98

5 org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of `object` out of START_ARRAY token 173

6 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported 202

7 官宣｜Apache Flink 1.17 发布公告 343

8 Java智慧校园电子班牌系统源码基于Java+springboot+vue+element-ui+mysql开发 53

9 基于阿里云eRDMA的GPU实例大幅提升多机训练性能 260

10 基于阿里云弹性GPU服务的神龙AI加速引擎无缝提升AI训练性能 204

11 重构计算，驱动视界：阿里云视觉计算思考与实践 196

12 当一座钢铁森林变成IoT智能化数据 53

13 阿里巴巴发布《城市数字孪生能力平台总体技术要求》企业标准，促进数字孪生互联互通生态建设 354

14 docker的安装与镜像 55

15 初识Kafka 66

16 基础篇丨链路追踪（Tracing）其实很简单 148

17 全新升级｜ECS成熟度评估与洞察，助你精准定位运维风险 120

18 网络平台挑选实名制认证API接口的注意事项 130

19 vika维格表 x 阿里云计算巢：SaaS 云端私有化部署，助力企业数字化转型 318

20 为什么 C# 可能是最好的第一编程语言 178

相关课程

更多

HTML5 新特性教程

21040

15

去学习

零基础学前端HTML+CSS

8755

57

去学习

HTML基础入门学习

2436

21

去学习

HTML 入门与实战

31109

33

去学习

相关电子书

更多

天猫 HTML5 互动技术实践

立即下载

天猫HTML5互动技术实践

立即下载

《零基础HTML入门教程》

立即下载