-
Notifications
You must be signed in to change notification settings - Fork 27
/
Copy pathgetting-started.html
executable file
·254 lines (185 loc) · 11.8 KB
/
getting-started.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
快速开始 · FrozenUI - 专注于移动web的UI框架
</title>
<!-- Meta -->
<meta name="description" content="专注于移动web的UI框架，基于腾讯手机QQ规范.">
<meta name="author" content="Tencent.com">
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.css" rel="stylesheet">
<link href="/dist/css/full.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="/assets/css/docs.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
var _mtac = {"senseQuery":1};
(function() {
var mta = document.createElement("script");
mta.src = "http://pingjs.qq.com/h5/stats.js?v2.0.2";
mta.setAttribute("name", "MTAH5");
mta.setAttribute("sid", "500500200");
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(mta, s);
})();
</script>
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<header class="navbar navbar-expand-md bd-navbar">
<nav class="container">
<div class="d-flex justify-content-between">
<a class="navbar-brand logo-frozenui" href="/">
FrozenUI
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bd-main-nav">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-item nav-link " href="/">首页</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link active" href="/getting-started">快速开始</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link " href="/components/components">UI组件</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link " href="/components/function">工具方法</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" target="_blank" href="http://ryanbay.cn/vipstyle/qui/2.0.0/demo/html/index.html">DEMO</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" target="_blank" href="http://frozenui.github.io/case.html">精彩H5</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" target="_blank" href="https://github.com/frozenui/frozenui">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" target="_blank" href="http://dopro.io/">博客</a>
</li>
</ul>
</div>
</nav>
</header>
<main id="content" role="main">
<div class="bd-pageheader text-center text-sm-left">
<div class="container">
<h1>快速开始</h1>
<p class="lead">
简单易用，轻量快捷，为移动端服务的前端框架
</p>
</div>
</div>
<div class="container bd-content">
<!-- Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever. -->
<!-- Here's how to quickly get started with the Bootstrap CDN and a template starter page. -->
<h2 id="简介">简介</h2>
<p>FrozenUI 是一套基于移动端的UI库。它非常轻量、精美，遵从手机QQ设计规范，提供了表单、对话框、列表等常用组件。此外，FrozenUI还提供文字截断、1px边框、rem、两端留白等常用场景的解决方案。CSS做得更模块化和颗粒化，使用sass编写CSS代码，你完全可以按照实际情况按需加载。</p>
<h2 id="获取-frozenui">获取 FrozenUI</h2>
<p><strong>方式一</strong>：点击链接下载文件</p>
<p><a href="https://github.com/frozenui/frozenui/archive/2.0.0.zip">https://github.com/frozenui/frozenui/archive/2.0.0.zip</a></p>
<p><strong>方式二</strong>：在页面上引入样式文件（推荐）</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"</span><span class="nt">></span></code></pre></figure>
<h2 id="如何使用">如何使用</h2>
<p>通过以上方式获取到 FrozenUI 后，在页面中引入后即可使用。以 FrozenUI 的按钮为例：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"</span><span class="nt">></span>
<span class="nt"><title></span>FrozenUI Demo<span class="nt"></title></span>
<span class="c"><!-- 引入 FrozenUI --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"</span><span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="c"><!-- 使用 --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ui-btn-wrap"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"ui-btn"</span><span class="nt">></span>常规按钮<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"ui-btn disabled"</span><span class="nt">></span>不可点击按钮<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span></code></pre></figure>
<p>更多的使用示例，请参考 <a href="http://frozenui.github.io/frozenui/demo/index.html">http://frozenui.github.io/frozenui/demo/index.html</a></p>
<h2 id="如何开发">如何开发</h2>
<p>FrozenUI 使用 Grunt 作为编译系统，在你开发编译之前需要安装 <a href="https://nodejs.org/en/">node.js</a>（npm 已经包含在内) 和 <a href="https://gruntjs.com/">Grunt</a> 。</p>
<figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">git clone https://github.com/frozenui/frozenui.git
cd frozenui
npm install
grunt</code></pre></figure>
<p>运行 grunt 命令，会监听src目录下所有文件的变更，并且默认会在8080端口启动服务器，然后在浏览器打开 http://localhost:8080/。
<br /><br />
项目 clone 到本地后，可以看到文件组织结构，具体文件说明如下：</p>
<figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">FrozenUI/
├── release/
│ └── 编译生成文件
└── src/
│ └── css
│ └── 样式文件
│ └── scss
│ └── 存放 .scss源码
│ └── demo
│ └── 参考例子
│ └── font
│ └── 存放 icon的图片
│
└── tool/
└── 编译工具</code></pre></figure>
<!-- ## 使用进阶
FrozenUI 是一个非常灵活、轻量的组件库，遵循模块化和颗粒化的理念，除了上述中的常规使用，我们还有一些进阶的用法。
### 1、组件按需引用
按照项目实际需要来引入对应的组件，例如：项目中只有按钮和弹窗，那我就单独引入 button 和 dialog 组件即可。那么可以在项目 index.scss 这样编写：
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="k">@import</span> <span class="s">"path/src/sass/component/button/btn";</span>
<span class="k">@import</span> <span class="s">"path/src/sass/component/dialog/dialog";</span></code></pre></figure>
通过按需引用的方法，可以使得你的项目减少一些没必要的代码，从而减少样式体积。
### 2、自定义组件参数
FrozenUI 有一个配置所有组件的 variables 文件夹，如果项目中需要更改某一些通用参数，那么可以通过修改 variables 内的文件来解决，例如：统一修改所有按钮的颜色，那么可以修改 <code>src/scss/base/variables/component.scss</code> 文件，修改其中的 button 相关样式，演示代码如下：
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="nv">$button-bg-color</span><span class="p">:</span> <span class="mh">#333</span><span class="err">;</span>
<span class="nv">$button-text</span><span class="p">:</span> <span class="mh">#fff</span><span class="err">;</span></code></pre></figure>
通过该方法，可以让多页面场景更高效管理。常见的一键换肤功能也可以通过此方法快速实现。 -->
<h2 id="历史版本及代码规范">历史版本及代码规范</h2>
<p>2.0.0以前的历史版本修改记录： <a href="https://github.com/frozenui/frozenui/wiki/History">https://github.com/frozenui/frozenui/wiki/History</a></p>
<p>2.0.0版本的修改记录： <a href="https://github.com/frozenui/frozenui/wiki/History-2.0.0">https://github.com/frozenui/frozenui/wiki/History-2.0.0</a></p>
<p>组件css规范： <a href="https://github.com/frozenui/frozenui/wiki/CSS-Guide">https://github.com/frozenui/frozenui/wiki/CSS-Guide</a></p>
<p>通用代码规范： <a href="https://github.com/frozenui/frozenui/wiki/CSS-Guide">https://github.com/frozenui/frozenui/wiki/CSS-Guide</a></p>
</div>
</main>
<footer class="bd-footer text-muted">
<div class="container">
<ul class="bd-footer-links">
<li><a href="https://github.com/frozenui/frozenui">GitHub</a></li>
<li><a href="http://ryanbay.cn/vipstyle/qui/2.0.0/demo/html/index.html">DEMO</a></li>
<li><a href="http://frozenui.github.io/case.html">精彩H5</a></li>
<li><a target="_blank" href="https://cloudbase.net/?from=10003">云开发CloudBase</a></li>
<li><a href="tencent://message/?Menu=yes&uin=427632094">QQ群：427632094</a></li>
</ul>
<p></p>
<p>©2020 Deep Ocean Team</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/tether.min.js"></script>
<script src="/dist/js/bootstrap.js"></script>
<script src="/dist/js/qrcode.min.js"></script>
<script src="/dist/js/index.js"></script>
<script src="/assets/js/vendor/anchor.min.js"></script>
<script src="/assets/js/vendor/clipboard.min.js"></script>
<script src="/assets/js/vendor/holder.min.js"></script>
<script src="/assets/js/src/application.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script>
</script>
</body>
</html>