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 新特性

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<