Skip to content

Z
zui

易企天创 / zui
10 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 b10c3689 编写于 作者: C Catouse
浏览文件
操作

* updated documents.

上级 0ccd2577
隐藏空白更改
内联 并排
Showing with 280 addition and 49 deletion
docs/basic.html
浏览文件 @ b10c3689
......@@ -18,7 +18,7 @@ base_url: "./"
<title>ZUI</title>
<link href="../dist/css/zui.min.css" rel="stylesheet">
<link href="css/zui.min.css" rel="stylesheet">
<link href="css/doc.css" rel="stylesheet">
</head>
<body>
......@@ -38,10 +38,13 @@ base_url: "./"
<li class="nav-heading">开始</li>
<li><a href="start.html#about">框架说明</a></li>
<li><a href="start.html#files">文件目录结构</a></li>
<li><a href="start.html#lite">关于简洁版</a></li>
<li><a href="start.html#grunt">编译及定制</a></li>
<li><a href="start.html#browsers">受支持的平台</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-heading">基础</li>
<li><a href="basic.html#hello">Hello world</a></li>
<li><a href="basic.html#global">全局样式表</a></li>
<li><a href="basic.html#ie">兼容IE浏览器</a></li>
<li><a href="basic.html#responsive">响应式设计</a></li>
......@@ -113,6 +116,39 @@ base_url: "./"
<div class="page-header">
<h1>基础</h1>
</div>
<section id="hello">
<div class="page-header">
<h2>Hello world</h2>
</div>
<p>使用ZUI进行构建现代应用非常简单。一般情况下，要使用ZUI仅依赖于jQuery，ZUI中的Javascript组件构建于jQuery之上。</p>
<p>下面给出一个非常简单的Hello world页面。</p>
<pre class="prettyprint">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-cn&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;title&gt;Hello world!&lt;/title&gt;
&lt;!-- zui --&gt;
&lt;link href=&quot;css/zui.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Hello, world!&lt;/h1&gt;
&lt;!-- jQuery (ZUI中的Javascript组件依赖于jQuery) --&gt;
&lt;script src=&quot;//code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- ZUI Javascript组件 --&gt;
&lt;script src=&quot;js/zui.min.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>如果你的网站需要兼容IE8，请参考“<a href="basic.html#ie">兼容IE浏览器</a>”章节。</p>
</section>
<section id="global">
<div class="page-header">
<h2>全局样式表</h2>
......@@ -124,17 +160,24 @@ base_url: "./"
<div class="page-header">
<h2>兼容IE浏览器</h2>
</div>
<p>因为IE浏览器与各大浏览器区别太大，为了尽可能的保证在所有浏览器中有一致的体验，很多时候需要单独对待IE浏览器。为了保证代码精简及一致，ZUI只支持IE8+。为了保证IE能够使用最新渲染模式而不是兼容模式，在html文档头部应加入以下代码：</p>
<p>因为IE浏览器与各大浏览器区别太大，为了尽可能的保证在所有浏览器中有一致的体验，很多时候需要单独对待IE浏览器。为了保证代码精简及一致，ZUI支持IE8-11。</p>
<h3>禁用IE兼容模式</h3>
<p>为了保证IE能够使用最新渲染模式而不是兼容模式，在html文档头部应加入以下代码：</p>
<pre class="prettyprint"><code>&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
...
</code></pre>
<p>国内众多浏览器推出“高速”模式（webkit内核）和“兼容”模式（IE内核），不过默认情况下使用“兼容”模式。将一下代码加入到页面中，可以让部分国产浏览器默认采用“高速”模式渲染页面：</p>
<pre class="prettyprint"><code>&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;</code></pre>
<p>目前只有<a href="http://se.360.cn/v6/help/meta.html" target="_blank">360浏览器</a>支持此<code>meta</code>标签。</p>
<p>针对IE7及更早的版本，应该给出提示，让用户升级浏览器。在<code>body</code>之后加入以下代码可以有选择性的出现浏览器升级提示，并给出链接引导用户访问<a href="http://abetterbrowser.org/">abetterbrowser.org</a>：</p>
<h3>更古老的浏览器</h3>
<p>针对IE7及更早的版本，应该给出提示，让用户升级浏览器。在<code>body</code>之后加入以下代码可以有选择性的出现浏览器升级提示，并给出链接引导用户访问<a href="http://browsehappy.com/">browsehappy.com</a>：</p>
<pre class="prettyprint"><code>&lt;body&gt;
&lt;!--[if lt IE 8]&gt;
&lt;p class=&quot;abetterbrowser&quot;&gt;您正在使用 &lt;strong&gt;过时的&lt;/strong&gt; 浏览器. 是时候 &lt;a href=&quot;http://abetterbrowser.org/&quot;&gt;更换一个更好的浏览器&lt;/a&gt; 来提升用户体验.&lt;/p&gt;
&lt;div class=&quot;alert alert-danger&quot;&gt;您正在使用 &lt;strong&gt;过时的&lt;/strong&gt; 浏览器. 是时候 &lt;a href=&quot;http://browsehappy.com/&quot;&gt;更换一个更好的浏览器&lt;/a&gt; 来提升用户体验.&lt;/div&gt;
&lt;![endif]--&gt;
...
</code></pre>
......@@ -225,19 +268,94 @@ base_url: "./"
<li><code>.visible-print</code>：在打印时显示，在浏览器正常浏览时隐藏。</li>
<li><code>.hidden-print</code>：在浏览器正常浏览时显示，在打印时隐藏。</li>
</ul>
<h3>禁用响应式布局</h3>
<p>有时你所开发应用仅针对一个设备或平台，并不需要响应式布局。即使这样，也建议你使用响应式布局，因为不需要额外的代码，而且为跨屏提供了可能性。</p>
<p>在ZUI中并没用一个全局的开关来控制是否启用响应式布局。如果确实要禁用该功能，请参考下面的建议：</p>
<ul>
<li>移除 <code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</code> 标签，禁用移动设备缩放可视窗口尺寸。</li>
<li>避免使用一些响应式工具类，例如<code>.visible-xs</code>、<code>.visible-sm</code>、<code>.visible-md</code>、<code>.visible-lg</code>等。</li>
<li>当使用栅格系统时避免使用 <code>.col-sm-*</code>、<code>.col-md-*</code>、<code>.col-lg-*</code>，统一使用 <code>.col-xs-*</code>。</li>
</ul>
</section>
<section id="grid">
<div class="page-header">
<h2>栅格系统</h2>
</div>
<ul>
<li>采用bootstrap3的网格设计。具体使用参考<a href="http://v3.bootcss.com/css/#grid">bootstrap3-grid</a></li>
<li>通过.container包含行（row），行再包含列（column）。</li>
<li>系统默认12列</li>
<li>分为col-xs-<em>/col-sm-</em>/col-md-<em>/col-lg-</em>四种设计分别对应超小屏幕(&lt;768)/小屏幕(&gt;=768)/中等屏幕(&gt;=992)/大屏幕(&gt;=1200)</li>
<li>通过col-xs-offset-<em>来向右偏移，通过col-xs-pull-</em>/col-xs-push-*来左右移动</li>
</ul>
<p>采用Bootstrap3的栅格设计。具体使用参考<a href="http://v3.bootcss.com/css/#grid" target="_blank">bootstrap3-grid</a>。</p>
<p>以下列出常用参数：</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>
超小屏幕
<small>手机 (&lt;768px)</small>
</th>
<th>
小屏幕
<small>平板 (≥768px)</small>
</th>
<th>
中等屏幕
<small>桌面显示器 (≥992px)</small>
</th>
<th>
大屏幕
<small>大桌面显示器 (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap">栅格系统行为</th>
<td>总是水平排列</td>
<td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
</tr>
<tr>
<th class="text-nowrap"><code>.container</code> 最大宽度</th>
<td>None （自动）</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th class="text-nowrap">类前缀</th>
<td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th class="text-nowrap">列（column）数</th>
<td colspan="4">12</td>
</tr>
<tr>
<th class="text-nowrap">最大列（column）宽</th>
<td class="text-muted">自动</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</tr>
<tr>
<th class="text-nowrap">槽（gutter）宽</th>
<td colspan="4">30px （每列左右均有 15px）</td>
</tr>
<tr>
<th class="text-nowrap">可嵌套</th>
<td colspan="4">是</td>
</tr>
<tr>
<th class="text-nowrap">偏移（Offsets）</th>
<td colspan="4">是</td>
</tr>
<tr>
<th class="text-nowrap">列排序</th>
<td colspan="4">是</td>
</tr>
</tbody>
</table>
</section>
<section id="type">
......@@ -269,7 +387,7 @@ base_url: "./"
<tr>
<th style="width:30%">元素</th>
<th>标签</th>
<th>像素大小</th>
<th>字体大小</th>
<th>说明</th>
</tr>
<tr>
......@@ -277,73 +395,73 @@ base_url: "./"
<h1>页面标题</h1>
</td>
<td><code>&lt;h1&gt;</code></td>
<td>38.5px</td>
<td>26px</td>
<td>在一个页面只有一个页面标题。</td>
</tr>
<tr>
<td><h2>标题</h2></td>
<td><code>&lt;h2&gt;</code></td>
<td>31.5px</td>
<td>22px</td>
<td>作为页面第二级标题，可能在一个页面中使用到多个二级标题。</td>
</tr>
<tr>
<td><h3>三级标题</h3></td>
<td><code>&lt;h3&gt;</code></td>
<td>24.5px 粗体</td>
<td>16px 粗体</td>
<td>页面第三级标题，嵌套在二级标题下使用。</td>
</tr>
<tr>
<td><h4>四级标题</h4></td>
<td><code>&lt;h4&gt;</code></td>
<td>17.5px 粗体</td>
<td>15px 粗体</td>
<td>页面第四级标题，嵌套在三级标题下使用。</td>
</tr>
<tr>
<td><h5>五级标题</h5></td>
<td><code>&lt;h5&gt;</code></td>
<td>14px 粗体 颜色灰色</td>
<td>13px 粗体 颜色灰色</td>
<td>页面第五级标题，嵌套在四级标题下使用。</td>
</tr>
<tr>
<td><h6>六级标题</h6></td>
<td><code>&lt;h6&gt;</code></td>
<td>11.9px 粗体 颜色灰色</td>
<td>12px 粗体 颜色灰色</td>
<td>页面第六级标题，嵌套在五级标题下使用。</td>
</tr>
<tr>
<td><p>这是一个段落</p></td>
<td><code>&lt;p&gt;</code></td>
<td>14px</td>
<td>13px</td>
<td>正文中大部分由段落组成。段落的行高为20px。段落间在垂直方向上有10px边距。</td>
</tr>
<tr>
<td><p class="lead">这是一个突出的段落</p></td>
<td><code>&lt;p class="lead"&gt;</code></td>
<td>21px</td>
<td>20px</td>
<td>突出的段落具有更大的字体，在一个段落上加<code>.lead</code>类。</td>
</tr>
<tr>
<td><strong>粗体文本</strong></td>
<td><code>&lt;strong&gt;</code></td>
<td>14px</td>
<td>13px</td>
<td>通常粗体文本用来强调内容。</td>
</tr>
<tr>
<td><em>斜体文本</em></td>
<td><code>&lt;em&gt;</code></td>
<td>14px</td>
<td>13px</td>
<td></td>
</tr>
<tr>
<td><small>小的文本</small></td>
<td><code>&lt;small&gt;</code></td>
<td>11.9px 颜色灰色</td>
<td>12px 颜色灰色</td>
<td>small文本字体只有正常字体大小的85%，通常为11.9px。</td>
</tr>
<tr>
<td><a href="#">超链接</a></td>
<td><code>&lt;a&gt;</code></td>
<td>14px</td>
<td>13px</td>
<td>超链接具有不同的颜色以区别其他文本，超链接仅当鼠标悬停时会增加下划线。</td>
</tr>
<tr>
......@@ -355,7 +473,7 @@ base_url: "./"
</ol>
</td>
<td><code>&lt;ol&gt;&lt;li&gt;...&lt;/ol&gt;</code></td>
<td>14px</td>
<td>13px</td>
<td>当组织一些并列项目且关注项目之间顺序时可以使用有序列表。</td>
</tr>
<tr>
......@@ -367,7 +485,7 @@ base_url: "./"
</ul>
</td>
<td><code>&lt;ul&gt;&lt;li&gt;...&lt;/ul&gt;</code></td>
<td>14px</td>
<td>13px</td>
<td>当组织一些并列项目但不关注项目之间顺序时可以使用无序列表。</td>
</tr>
<tr>
......@@ -375,7 +493,7 @@ base_url: "./"
<blockquote>这是一大段引用内容</blockquote>
</td>
<td><code>&lt;blockquote&gt;</code></td>
<td>14px</td>
<td>13px</td>
<td>用于显示一大段引用的内容。</td>
</tr>
<tr>
......@@ -383,7 +501,7 @@ base_url: "./"
<q>这是内嵌的引用</q>
</td>
<td><code>&lt;q&gt;</code></td>
<td>14px</td>
<td>13px</td>
<td>用于在正文行内显示引用的术语。</td>
</tr>
<tr>
......@@ -393,7 +511,7 @@ base_url: "./"
&lt;/div&gt;</code></pre>
</td>
<td><code>&lt;pre&gt;&lt;code&gt;...&lt;/code&gt;</code></td>
<td>14px 等宽字体</td>
<td>13px 等宽字体</td>
<td>代码区域会加上方框，并使用等宽字体显示，详细代码显示规定请参见节<a href="#prettify">代码高亮</a>。</td>
</tr>
</tbody>
......@@ -501,6 +619,15 @@ base_url: "./"
<div class="page-header">
<h2>主题</h2>
</div>
<p>ZUI中力求界面元素令人赏心悦目。不过如果你需要更多的个性化设置，这时你可以充分利用ZUI提供的主题样式表来个大换装。你只需要修改dist目录下的<code>theme.css</code>文件，并增加到你的项目引用中即可，不需要对原有文件做出修改。</p>
<p>如果你追求更深度的定制，可能需要了解<code>src/less</code>目录下的<code>theme.less</code>文件。修改这个文件也是非常简单，如果你只需要更换一下配色，那是简单不过，只需要将<code>@color-primary</code>变量设置一个新的值然后重新编译即可。</p>
<div class="alert alert-info">
在<code>theme.less</code>给出主要色彩值（<code>@color-primary</code>）会自动计算该色彩对应的配色方案。
</div>
<div class="example">
<button type="button" class="btn btn-success" id="changeTheme">立即换装</button>
</div>
</section>
</div>
......
docs/components.html
浏览文件 @ b10c3689
......@@ -18,7 +18,7 @@ base_url: "./"
<title>ZUI</title>
<link href="../dist/css/zui.min.css" rel="stylesheet">
<link href="css/zui.min.css" rel="stylesheet">
<link href="css/doc.css" rel="stylesheet">
</head>
<body>
......
docs/controls.html
浏览文件 @ b10c3689
......@@ -16,7 +16,7 @@ base_url: "./"
<title>ZUI</title>
<link href="../dist/css/zui.min.css" rel="stylesheet">
<link href="css/zui.min.css" rel="stylesheet">
<link href="css/doc.css" rel="stylesheet">
</head>
<body>
......
docs/css/doc.css
浏览文件 @ b10c3689
......@@ -132,7 +132,7 @@ a[target='_blank']:hover:after {content: '\e684'; opacity: 1; }
}
100% {
-webkit-box-shadow: 0 0 18px rgba(26,128,26, 0.8),0 0 12px rgba(71,164,71, 0.5);
border-color: rgba(26, 128, 26, 1.0);
border-color: rgba(26, 128, 26, 1.0);
}
}
.example
......
docs/explore.html
浏览文件 @ b10c3689
......@@ -16,7 +16,7 @@ base_url: "./"
<title>ZUI</title>
<link href="../dist/css/zui.min.css" rel="stylesheet">
<link href="css/zui.min.css" rel="stylesheet">
<link href="../assets/datetimepicker/css/datetimepicker.min.css" rel="stylesheet">
<link href="../assets/chosen/css/chosen.min.css" rel="stylesheet">
<link href="css/doc.css" rel="stylesheet">
......
docs/javascript.html
浏览文件 @ b10c3689
......@@ -16,7 +16,7 @@ base_url: "./"
<title>ZUI</title>
<link href="../dist/css/zui.min.css" rel="stylesheet">
<link href="css/zui.min.css" rel="stylesheet">
<link href="../assets/datetimepicker/css/datetimepicker.min.css" rel="stylesheet">
<link href="../assets/chosen/css/chosen.min.css" rel="stylesheet">
<link href="css/doc.css" rel="stylesheet">
......
docs/js/doc.js
浏览文件 @ b10c3689
......@@ -36,6 +36,14 @@ $(function()
}
});
$('#changeTheme').click(function()
{
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../dist/css/zui-theme.css';
document.getElementsByTagName('head')[0].appendChild(link);
});
$('#dashboard').dashboard();
$('[data-toggle="droppable"]').droppable(
......
docs/mindmap.html
浏览文件 @ b10c3689
......@@ -9,7 +9,7 @@
<title>ZUI</title>
<link href="../dist/css/zui.min.css" rel="stylesheet">
<link href="css/zui.min.css" rel="stylesheet">
<link href="../dist/css/zui-mindmap.min.css" rel="stylesheet">
<style>
#mindmap {background: #fafafa;}
......
docs/start.html
浏览文件 @ b10c3689
<!-- ---
<!--
layout: default
title: 框架说明
slug: start
lead: "了解设计规范."
base_url: "./"
--- -->
base_url: "./" -->
<!DOCTYPE html>
<html>
<head>
......@@ -16,7 +15,7 @@ base_url: "./"
<title>ZUI</title>
<link href="../dist/css/zui.min.css" rel="stylesheet">
<link href="css/zui.min.css" rel="stylesheet">
<link href="css/doc.css" rel="stylesheet">
</head>
<body>
......@@ -36,17 +35,21 @@ base_url: "./"
<li class="nav-heading">开始</li>
<li><a href="start.html#about">框架说明</a></li>
<li><a href="start.html#files">文件目录结构</a></li>
<li><a href="start.html#lite">关于简洁版</a></li>
<li><a href="start.html#grunt">编译及定制</a></li>
<li><a href="start.html#browsers">受支持的平台</a></li>
</ul>
<ul class="nav navbar-nav collapsed">
<li class="nav-heading">基础</li>
<li><a href="basic.html#hello">Hello world</a></li>
<li><a href="basic.html#global">全局样式表</a></li>
<li><a href="basic.html#ie">兼容IE浏览器</a></li>
<li><a href="basic.html#responsive">响应式设计</a></li>
<li><a href="basic.html#">栅格系统</a></li>
<li><a href="basic.html#type">文字排版</a></li>
<li><a href="basic.html#colorset">配色</a></li>
<li><a href="basic.html#scrollbars">滚动条</a></li>
<li><a href="basic.html#colorset">配色</a></li>
<li><a href="basic.html#themes">主题</a></li>
</ul>
<ul class="nav navbar-nav collapsed">
<li class="nav-heading">控件</li>
......@@ -103,10 +106,10 @@ base_url: "./"
<section id="about">
<div class="page-header">
<h2>框架说明</h2>
<h2>约定</h2>
</div>
<h3>UI元素类型及定义</h3>
<p>ZUI中包含各种各样的界面元素（或控件），例如按钮、表格、列表等，甚至一些特定场景用到的一组元素也会在ZUI中精心设计，例如评论列表。为了更好的展示我们的设计理念，把这些元素归为如下四类：</p>
<p>ZUI中包含各种各样的界面元素（或控件），例如按钮、列表、表格等，甚至一些特定场景用到的一组元素也会在ZUI中精心设计，例如评论列表。为了更好的展示我们的设计理念，把这些元素归为如下四类：</p>
<ul>
<li><strong>基本控件</strong>：用来构建网页应用的基本界面单元，例如按钮、文本标签、输入框等。</li>
<li><strong>组件</strong>：通过一个以上的基本控件组合而成的较复杂的界面单元。例如表单、菜单、表格等。</li>
......@@ -124,8 +127,8 @@ base_url: "./"
<h4>命名原则</h4>
<ul>
<li>所有控件、组件、视图、模块和行为的命名都应该使用最常见的名称，准确提现界面元素功能。例如菜单应该命名为menu，而不是navigation。</li>
<li>类型、状态及参数的命名均为元素名加上类型（或状态及参数名）前缀，中间用间隔号分隔，例如固定位置的菜单为<code>.menu-fixed</code> 。对于通用类型、状态或参数可以省略前缀，例如一个菜单项目处于激活状态，则只需命名为<code>.active</code> ，而不许命名为<code>.menu-active</code> 。</li>
<li>所有控件、组件、视图、模块和行为的命名均不加与当前元素功能无关的前缀和额外命名，例如一个导航菜单命名为<code>.nav</code> ，而不增加额外命名为<code>.ui.nav</code> 或者<code>.zui.nav</code> 。</li>
<li>类型、状态及参数的命名均为元素名加上类型（或状态及参数名）前缀，中间用间隔号分隔，例如固定位置的菜单为<code>.menu-fixed</code>。对于通用类型、状态或参数可以省略前缀，例如一个菜单项目处于激活状态，则只需命名为<code>.active</code>，而不许命名为<code>.menu-active</code>。</li>
<li>所有控件、组件、视图、模块和行为的命名均不加与当前元素功能无关的前缀和额外命名，例如一个导航菜单命名为<code>.nav</code>，而不增加额外命名为<code>.ui.nav</code>或者<code>.zui.nav</code>。</li>
</ul>
</section>
......@@ -134,7 +137,92 @@ base_url: "./"
<h2>文件目录结构</h2>
</div>
<p>还没写...</p>
<h3>预编译的内容</h3>
<p>下载预编译压缩包解压后将会得到以下目录结构：</p>
<pre>
zui/
├── css/
│ ├── zui.css
│ ├── zui.min.css
│ ├── zui.lite.css
│ ├── zui.lite.min.css
│ ├── zui-theme.css
│ └── zui-theme.min.css
├── js/
│ ├── zui.js
│ ├── zui.min.js
│ ├── zui.lite.js
│ └── zui.lite.min.js
└── fonts/
├── zenicon.eot
├── zenicon.svg
├── zenicon.ttf
└── zenicon.woff
</pre>
<p>css目录下提供了三种编译类型：‘zui’、‘zui.lite’、‘zui-theme’，其中‘zui.lite’为精简版样式（关于精简版请参考本文档后续章节），‘zui-theme’为zui的主题样式。每种编译类型均提供了压缩版本，对应的文件名为‘*.min.css’。js目录下提供对应的js文件。字体图标放在‘fonts’文件夹下。</p>
<h3>源码目录结构</h3>
<p>可以随时从Github上下载ZUI的源码。不仅仅包含所有开发源码文件，而且包含完整的文档和示例。如果你需要定制的编译版本更应该下载源码。以下简要说明源码目录结构。</p>
<pre>
zui/
├── src/ ZUI的源码目录
│ ├── less/
│ ├── js/
│ ├── fonts/
│ └── apps/ 一些自定义的编译配置
├── dist/ 预编译输出目录
│ ├── css/
│ ├── js/
│ └── fonts/
├── docs/ 文档
│ └── example/ 文档中用到的例子
├── assets/ 一些依赖的或者配合使用的其他资源，包含jquery等
├── Gruntfile.js Grunt编译脚本
└── index.html 文档首页
</pre>
</section>
<section id="lite">
<div class="page-header">
<h2>关于简洁版</h2>
</div>
<p>ZUI中包含了丰富的组件，但在构建一些轻量的应用时并不需要所有内容。ZUI预编译版本中提供了一些简洁的版本。包含了ZUI中绝大部分常用内容，经过压缩后体积更小。你可以在dist目录下找到文件名包含'.lite'的文件记为简洁的版本。</p>
<p>在后续文档中，会使用标签 <span class='label label-info'>LITE</span> 标注在简洁版中提供的内容。</p>
<p>如果你需要更精确的控制所需的内容，强烈建议下载我们的源码来进行自定义配置并编译独一无二的版本。</p>
</section>
<section id="grunt">
<div class="page-header">
<h2>编译及定制</h2>
</div>
<p>ZUI使用 <a href="http://gruntjs.com/">Grunt</a> 作为编译系统。如果不了解 Grunt 也没有关系，Grunt是一个非常棒而且容易上手的工具。下面给出简要步骤来准备编译ZUI，如果想了解更多请访问Grunt官方网站。</p>
<h3>安装Grunt</h3>
<p>Grunt构建在nodejs之上。在安装Grunt之前需要首先<a href="http://nodejs.org/download/" target="_blank">下载并安装node.js</a>。最新版的nodejs已包含npm（<a href="http://npmjs.org/" target="_blank">node packaged modules</a>）。npm是nodejs用来管理扩展包的工具。</p>
<p>安装nodejs之后，在命令行进行如下操作：</p>
<ol>
<li>在全局环境中安装<code>grunt-cli</code>：<code>npm install -g grunt-cli</code>。</li>
<li>进入ZUI源码目录，执行<code>npm install</code>命令。nmp将读取包配置文件<code>package.json</code>文件并自动安装所有依赖的扩展包。</li>
</ol>
<p>完成上述步骤就可以进行编译了。只需要进入ZUI中使用命令行输入对应的命令就可以启动编译任务。以下为ZUI内置的一些常用任务命令。</p>
<table class="table table-bordered">
<tr>
<td><code>grunt dist</code></td>
<td>编译css和js文件，并拷贝图标字体文件，所有新的文件放置在dist目录下。</td>
</tr>
<tr>
<td><code>grunt assets</code></td>
<td>拷贝ZUI依赖的第三方插件，并根据当前主题生成对应的样式表。所有新的文件放置在assets目录下。</td>
</tr>
<tr>
<td><code>grunt build</code></td>
<td>根据自定义配置生成css和js文件，所有新的文件放置在build文件夹下。目前ZUI源码中包含蝉知、禅道、然之的配置。</td>
</tr>
<tr>
<td><code>grunt</code></td>
<td>重新生成所有内容，但不包含自定义的内容。</td>
</tr>
</table>
</section>
<section id="browsers">
......
docs/views.html
浏览文件 @ b10c3689
......@@ -16,7 +16,7 @@ base_url: "./"
<title>ZUI</title>
<link href="../dist/css/zui.min.css" rel="stylesheet">
<link href="css/zui.min.css" rel="stylesheet">
<link href="../assets/datetimepicker/css/datetimepicker.min.css" rel="stylesheet">
<link href="../assets/chosen/css/chosen.min.css" rel="stylesheet">
<link href="css/doc.css" rel="stylesheet">
......
index.html
浏览文件 @ b10c3689
......@@ -14,7 +14,7 @@ base_url: "./"
<title>ZUI</title>
<link href="dist/css/zui.min.css" rel="stylesheet">
<link href="docs/css/zui.min.css" rel="stylesheet">
<link href="docs/css/doc.css" rel="stylesheet">
</head>
<body>
......@@ -34,10 +34,13 @@ base_url: "./"
<li class="nav-heading">开始</li>
<li><a href="docs/start.html#about">框架说明</a></li>
<li><a href="docs/start.html#files">文件目录结构</a></li>
<li><a href="docs/start.html#browsers">受支持的平台</a></li>
<li><a href="start.html#lite">关于简洁版</a></li>
<li><a href="start.html#grunt">编译及定制</a></li>
<li><a href="start.html#browsers">受支持的平台</a></li>
</ul>
<ul class="nav navbar-nav collapsed">
<li class="nav-heading">基础</li>
<li><a href="basic.html#hello">Hello world</a></li>
<li><a href="docs/basic.html#global">全局样式表</a></li>
<li><a href="docs/basic.html#ie">兼容IE浏览器</a></li>
<li><a href="docs/basic.html#responsive">响应式设计</a></li>
......@@ -146,15 +149,20 @@ base_url: "./"
<h2 class='text-success'>ZUI构建于众多优秀的开源项目之上</h2>
<p>非常感谢这些项目！</p>
<div class="row">
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://gruntjs.com/" class="card"><strong class="card-heading">Grunt</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://lesscss.org/" class="card"><strong class="card-heading">Less</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://necolas.github.io/normalize.css/" class="card"><strong class="card-heading">normalize</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://jquery.com/" class="card"><strong class="card-heading">jQuery</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://getbootstrap.com/" class="card"><strong class="card-heading">Bootstrap</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://kindeditor.net/" class="card"><strong class="card-heading">kindeditor</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://harvesthq.github.io/chosen/" class="card"><strong class="card-heading">Chosen</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://www.malot.fr/bootstrap-datetimepicker" class="card"><strong class="card-heading">Datetime picker</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://lesscss.org/" class="card"><strong class="card-heading">Less</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://fortawesome.github.io/Font-Awesome/" class="card"><strong class="card-heading">FontAwesome</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="https://code.google.com/p/google-code-prettify/" class="card"><strong class="card-heading">google code prettify</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://github.com/tzuryby/hotkeys" class="card"><strong class="card-heading">jQuery hotkey</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://bootboxjs.com/" class="card"><strong class="card-heading">Bootbox</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="https://code.google.com/p/explorercanvas/" class="card"><strong class="card-heading">Explorer canvas</strong></a></div>
<div class="col-md-3 col-sm-4"><a target="_blank" href="http://www.chartjs.org/" class="card"><strong class="card-heading">Chart.js</strong></a></div>
</div>
</div>
</div>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或