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

最新推荐文章于 2022-04-25 10:14:35 发布
最新推荐文章于 2022-04-25 10:14:35 发布
阅读量4.4k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tototuzuoquan/article/details/47223211
版权


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>

运行效果：

 

 

涂作权的博客
关注
专栏目录
Vue结合原生js实现自定义组件自动生成示例
11-29
就目前三大前端主流数据驱动框架（vue,ng,react）而言，均具有创建自定义组件的api，但都是必须先做到事先写好挂载点，这个挂载点可以是原有静态元素标签也可以是自定义模板；对于多种组件通过同一数据流生成的，...
HBuilder跟MUI文字教程
11-27
HBuilder跟MUI文字教程适合初次使用HBuilder编辑器跟MUI框架的人员，能让你快速掌握HBuilder使用方法跟MUI框架。
01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例...
weixin_34273046的博客
08-03 229
 1安装HBuilder5.0.0,安装后的界面截图如下： 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明，创建上图的Boilerplate.html： 3 代码内容如下： <!-- 作者：XXX@qq.com ...
在mui中引入自定义的字体图标
diaoyigui1206的博客
04-18 547
　　字体图标可以到阿里巴巴矢量图上下载。 　　将下载好的iconfont.ttf放进mui/dist/fonts里面。在mui.css中加入以下代码。 @font-face { font-family: Muiicons; font-weight: normal; font-style: normal; src: url('../fonts...
mui汉字图标_2018-03-29 MUI 在manifest.json中自定义字体图标
weixin_36121354的博客
01-13 252
环境: iMac, Hbuilder, iconfont网站,iPhone真机参考文章: mui如何增加自定义icon图标: http://ask.dcloud.net.cn/search/q-bXVpLnR0Zg==#all最新更新：2019-12-06 添加plus中底部选项卡参数说明技术交流、疑问邮箱：dongzhensong@126.com!! 仔细阅读本文可达到理想效果 !!特别注意想要...
mui如何增加自定义字体icon图标
weixin_30685029的博客
02-23 196
http://ask.dcloud.net.cn/article/128 字体地址：http://www.iconfont.cn/ 转载于:https://www.cnblogs.com/smght/p/5209812.html
HTML5+规范API-系统通讯录获取功能
记录和分享属于我的“IT”时光
04-25 1964
HTML5+规范API-系统通讯录获取功能
mui快速入门示例源码.rar_Html5+Mui源码_badlyxrz_mui_mui java_mui实例
09-24
1. **MUI框架**：学习MUI的基本结构、布局、组件（如导航栏、滑动菜单、按钮、表单等）和事件处理，了解如何在HTML中引入MUI CSS和JS文件，以及如何自定义主题。 2. **HTML5新特性**：了解如何利用HTML5的新元素...
使用 Vue 和原生 JS 实现动态生成自定义组件的示例
在前端开发中，使用数据驱动框架（如 Vue、Angular、React）创建自定义组件时，需要事先写好挂载点（mounted），然后通过 DOM 操作去动态添加组件。这时，会遇到一个错误提示信息：Failed to execute ‘appendChild...
蓝色精美简洁MUI后台管理模板.rar_MUI前端源码_html 模板_mui_mui模板_前端
09-20
5. **MUI组件**：MUI框架自带的一些可复用的模块，如导航栏、轮播图、下拉菜单等，方便开发者快速集成到项目中。 总的来说，这个压缩包提供了一个基于MUI的后台管理界面模板，可以帮助开发者快速构建出专业且美观的...
mui-login.rar_camewm5_easymob-webim_mui_mui login_mui QQ登录
09-23
标题中的“mui-login.rar”指的是一个使用了Mui框架的登录界面示例项目，它被压缩在RAR文件中。"camewm5"可能是项目或组件的特定版本号，"easymob-webim"可能涉及到了EasyMob的Web即时通讯功能，而"mui_qq登录"暗示...
MUI+融云在线聊天
10-26
最新MUI框架+融云即时聊天搭建一个基于web的在线聊天系统的Demo
融云web+mui
09-05
融云web集成聊天，配合Mui。需要用HBuilder打开。里面所用的api牵扯到原生。打包成APP就能实现功能。
最流行的web开发前端模版HTML5 Boilerplate.zip
07-19
HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 这个小小的源码包集合了100位开发者的经验，你可以将这些经验运用在你的项目中。 Google统计、图标 和 更多 压缩包内包含了 一个干净、移动终端友好的HTML模版；优化过的Google统计代码；触摸屏设备上使用的图标（这个可以替换成你自己的）；还有丰富的文档、技巧、窍门。 Normalize.css 和辅助功能 包含了 Normalize.css v1 版本 — 一个先进的、支持HTML5的CSS reset — 和基础样式、辅助功能、media queries、打印样式。 jQuery 与 Modernizr 自带了两个优秀的Javascript工具库的最新版本： jQuery (默认链接到 Google的CDN, 如果CDN失效，本地文件作为后备) 和Modernizr 浏览器特性监测工具库。 高性能 我们提供了一组 Apache 配置参数，帮你提高网站的性能。 还有几个单独维护的项目：server configs, node build script, 和ant build script.     标签：前端模版
HTML5Boilerplate模板
06-18
HTML模块化：使用HTML5Boilerplate模板开始一个Web项目，HTML的书写总是重中之重，一个好的HTML能从根源上规避大量潜在问题，所以WebApp应该全部应用一个标准化的高质量HTML模板，而不是将所有页面交由开发人员自由发挥。这里推荐使用HTML5Boilerplate项目作为App 的默认模板以及文件路径规范，无论是网站或者富UI的App，都可以采用这个模板作为起步。
MUI 引用阿里字体图标
iwusan
03-06 3735
阿里图标网址：http://www.iconfont.cn/所需要图标都加入购物车之后，点击购物车，下载代码打开解压文件件，复制图示2个文件添加至项目目录，我这里添加至font文件夹修改 iconfont.css ：@font-face 修改至一下@font-face { font-family: "iconfont"; src: url('../font/iconfont.ttf'...
mui 输入框调整字体的样式
GetcharZp的博客
01-15 1590
问题描述：直接修改 input 的字体样式无效，通过检查元素，发现是.mui-search .mui-placeholder 这两个类在控制 第一步：当然是对 mui 框架的引入； 第二步：针对输入框的使用可以参考官方文档的样例，这里我把他的输入框帖过来 <div class="mui-input-row mui-search"> <input type...
ionic（mui、elementUI）自定义字体图标
热门推荐
若末lan的博客
02-24 2万+
先自我检讨一下下：之前在上家公司写MUI的时候，就用过自定义字体图标了，没有整理。到这家公司写ionic有用到了自定义字体图标，还是要去查一下再写，没有整理。现在都写vue了,elementUI也有自定义字体图标，关于字体图标我还是没有整理。真的是对自己无语了，懒死你了都！！！技术群里经常也有人问，一时半会儿也解释不清楚，所以趁着刚上班不太忙，先整理一下，免得又忘了/生无可恋脸！！！万变不离其宗，...
MUI_css 样式
qq_35644434的博客
03-21 7545
mui组件 通用CSS类 color(颜色) mui中组件以iOS 7为基础，补充部分Android特有控件，颜色值主要有以下五种： primary => #007aff; //蓝色(blue) success => #4cd964; //绿色(green) warning => #f0ad4e; //黄色(yellow) danger => #dd524d; //红色
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

涂作权的博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值