您的位置：首页 > Web前端 > HTML5

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

2017-08-18 10:55 316 查看


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>

                   <!--

                 为了使框架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">

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

执行效果：

 

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航