forked from easysoft/mzui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (144 loc) · 7.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MZUI</title>
<link rel="stylesheet" href="dist/css/mzui.min.css">
<link rel="stylesheet" href="doc/css/doc.min.css">
</head>
<body class='with-heading-top with-nav-top has-index-content'>
<!-- App bar -->
<header class="heading green affix dock-top dock-auto" id="haedNav">
<nav class="nav" id='headNav'>
<a href="index.html" class='brand-name' data-page-name="index"><strong>MZUI</strong></a>
<a href="doc/base.html" id="beginLink" data-page-name="base">基础</a>
<a href="doc/element.html" data-page-name="element">控件</a>
<a href="doc/javascript.html" data-page-name="javascript">JS</a>
<a href="doc/examples.html" data-page-name="examples">示例</a>
</nav>
<div class="title"></div>
<nav class="nav">
<a href="https://github.com/easysoft/mzui" target="_blank"><i class="icon-github"></i></a>
</nav>
</header>
<nav class="affix dock-top nav success-pale nav-secondary" id="navs">
</nav>
<div class="loading loading-light" id="pageLoading"></div>
<div id="partial" class="container">
<div id="indexPage">
<div class="green text-center" id="leadContent">
<h1><span class="title">MZUI</span></h1>
<p class="muted">为移动端设计，基于 Flex 的 UI 框架。</p>
<div class="space"></div>
<a class="btn-begin btn outline white">开始使用 <i class="icon-arrow-right"></i></a>
<a target="_blank" href="doc/download/mzui-1.0.0-dist.zip" class="btn outline white">立即下载 <i class="icon-download-alt"></i></a>
<div class="space-sm"></div>
<p class="small muted">最新版本 v1.0.0 <a target="_blank" href="https://github.com/easysoft/mzui/archive/v1.0.0.zip" target="_blank">下载源码</a></p>
</div>
<div class="content white shadow-divider text-center">
<div class="graph1 flex flex-center has-padding space-sm">
<div class="avatar circle primary avatar-xl"><small class="code">FLEX</small></div>
<div class="avatar circle info text-info avatar-xl"><i class="icon icon-mobile"></i></div>
<div class="avatar circle red text-red avatar-xl"><i class="icon icon-tablet"></i></div>
<div class="avatar circle green text-green avatar-xl"><i class="icon icon-wechat"></i></div>
</div>
<h2 class="text-green lead">现代化</h2>
<p class="muted">基于 Flex 设计，支持移动端全部主流浏览器<br>支持 Android 微信内置浏览器</p>
</div>
<div class="content white shadow-divider text-center">
<div class="row graph2">
<div class="cell-4"><div class="tile red">着色</div></div>
<div class="cell-3"><div class="tile blue">状态</div></div>
<div class="cell-2"><div class="tile green">形状</div></div>
<div class="cell-3"><div class="tile yellow">容器</div></div>
<div class="cell-2"><div class="tile brown">边距</div></div>
<div class="cell-3"><div class="tile purple">变形</div></div>
<div class="cell-3"><div class="tile primary">阴影</div></div>
<div class="cell-4"><div class="tile dark">滤镜</div></div>
</div>
<h2 class="text-yellow lead">灵活</h2>
<p class="muted">独立的外观选项，适合大部分控件，<br>满足多样的外观定制需求</p>
</div>
<div class="content white shadow-divider text-center">
<div class="graph3 flex flex-center has-padding space-sm">
<div class="avatar red outline avatar-xl"><small class="code">Gulp</small></div>
<div class="avatar avatar-xl"><i class="icon icon-bolt muted text-yellow"></i></div>
<div class="avatar red text-red avatar-xl"><i class="icon icon-wrench"></i></div>
</div>
<h2 class="text-red lead">可定制</h2>
<p class="muted">所有内容可以按需使用，基于 Gulp 构建自定义版本非常简单</p>
</div>
<div class="content white text-center">
<div class="graph3 flex flex-center has-padding space-sm">
<div class="avatar circle dark outline avatar-xl"><small class="text-dark">Zepto</small></div>
<div class="avatar avatar-xl"><i class="icon icon-plus muted"></i></div>
<div class="avatar circle primary outline avatar-xl"><small class="text-dark">MZUI</small></div>
</div>
<h2 class="text-green lead">轻量</h2>
<p class="muted">JS 和 CSS 压缩之后在 50KB 左右<br>启用 GZip 压缩会更小（css 10KB, js 17KB）<br>不需要任何其他依赖！（已内置 Zepto 1.1.6 核心组件）</p>
</div>
<div class="content primary-pale text-center">
<div class="graph4 flex flex-center space-sm">
<i class="icon text-info icon-hand-right icon-5x"></i>
</div>
<a class="btn-begin btn info">开始使用 <i class="icon-arrow-right"></i></a>
<a target="_blank" href="doc/download/mzui-1.0.0-dist.zip" class="btn primary">立即下载 <i class="icon-download-alt"></i></a>
<div class="space-sm"></div>
<p class="small muted">最新版本 v1.0.0 <a target="_blank" href="https://github.com/easysoft/mzui/archive/v1.0.0.zip" target="_blank">下载源码</a></p>
</div>
<div class="content green text-center">
<div class="graph4 flex flex-center">
<i class="icon icon-comments-alt icon-5x"></i>
</div>
<div class="has-padding">
<p>官方 QQ 群：384135104</p>
<a href="http://forum.zui.sexy/forum/mzui.html" target="_blank" class="btn outline white">访问论坛</a>
</div>
</div>
<div class="content dark text-center">
<div class="graph4 flex flex-center space-sm">
<i class="icon icon-github icon-5x"></i>
</div>
<div class="has-padding"><a href="https://github.com/easysoft/mzui" target="_blank" class="btn outline white">在 Github 上支持我们 <i class="icon-thumbs-o-up"></i></a></div>
</div>
<div class="content primary text-center">
<div class="graph5 flex flex-center space-sm">
<span class="path-zui-36" style="margin-right: .5rem"><i class="path-1"></i><i class="path-2"></i></span><span class="large">ZUI</span>
</div>
<div class="has-padding">
<h4 class="lead">桌面浏览器前端解决方案推荐</h4>
<p class="muted space">一个基于Bootstrap深度定制开源前端实践方案，<br>帮助你快速构现代跨屏应用。</p>
<a href="http://zui.sexy" target="_blank" class="btn outline white">访问 ZUI 网站 <i class="icon-a"></i></a>
</div>
</div>
</div>
</div>
<nav id="fabNav" class="affix dock-bottom dock-left fab has-padding dock-auto shadow-none">
<a id="tocBtn" class="btn circle green layer btn-lg"><i class="icon icon-list-ul"></i></a>
</nav>
<div class="modal affix enter-from-bottom" id="tocModal">
<div class="heading divider">
<div class="title"><i class="icon-list-ul muted"></i> <strong id="tocHeading"></strong></div>
<nav class="nav">
<a class="btn" data-dismiss="display"><i class="icon-remove muted"></i></a>
</nav>
</div>
<div class="list compact" id="tocList"></div>
</div>
<script src="http://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
<!-- MZUI -->
<script src="dist/js/mzui.js"></script>
<!-- Document UI -->
<script src="doc/js/doc.min.js"></script>
<!-- Statistic -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-53781622-2', 'auto');
ga('send', {hitType: 'pageview', title: 'MZUI'});
</script>
</body>
</html>