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

时间 2019-11-19

标签 mui boilerplate html5 html 演示样例动态组件本身定义字体图标栏目 HTML5 繁體版

原文原文链接

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

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

3 代码内容例如如下：ajax

<!--api

做者：XXX@qq.com浏览器

时间：2015-08-02app

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

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

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

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

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>

<!--

为了使框架easy被使用，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>

执行效果：

相关文章

相关标签/搜索

PHP 7 新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<