01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例
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示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 哪些甜品做起来简单，而且又好吃？
- 下一篇： 鹅蛋怎样做好吃又有营养？