基础
Hello world
使用ZUI进行构建现代应用非常简单。一般情况下，要使用ZUI仅依赖于jQuery，ZUI中的Javascript组件构建于jQuery之上。
下面给出一个非常简单的Hello world页面。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello world!</title>
<!-- zui -->
<link href="css/zui.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- ZUI Javascript组件 -->
<script src="js/zui.min.js"></script>
</body>
</html>
如果你的网站需要兼容IE8，请参考“兼容IE浏览器”章节。
全局样式表
ZUI使用 normalize 来重置样式，这样尽可能保证在所有浏览器中有一致的体验。
兼容IE浏览器
因为IE浏览器与各大浏览器区别太大，为了尽可能的保证在所有浏览器中有一致的体验，很多时候需要单独对待IE浏览器。为了保证代码精简及一致，ZUI支持IE8-11。
禁用IE兼容模式
为了保证IE能够使用最新渲染模式而不是兼容模式，在html文档头部应加入以下代码：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
国内众多浏览器推出“高速”模式（webkit内核）和“兼容”模式（IE内核），不过默认情况下使用“兼容”模式。将一下代码加入到页面中，可以让部分国产浏览器默认采用“高速”模式渲染页面：
<meta name="renderer" content="webkit">目前只有360浏览器支持此meta标签。
更古老的浏览器
针对IE7及更早的版本，应该给出提示，让用户升级浏览器。在body之后加入以下代码可以有选择性的出现浏览器升级提示，并给出链接引导用户访问browsehappy.com：
<body>
<!--[if lt IE 8]>
<div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div>
<![endif]-->
...
因为IE8及早期版本不支持HTML5标签，所以针对IE8浏览器，我们引入html5shiv来使得HTML5标签在IE8中也能使用。在HTML文档的script区域加入以下代码（示例中html5shiv库来自maxcdn）：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
因为IE8及早期版本同样不支持media query来实现响应式布局，我们同样可以通过条件注释引入respond.js来帮助ie实现该功能。（示例中的respond.js来自maxcdn，可以和html5shiv共享同一个条件注释区域。）
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
响应式布局
现代web应用应该支持响应式布局。栅格系统已提供良好的基础构建响应式布局页面，同时也提供一些辅助工具类来控制内容在不同设备的展现方式。
在ZUI中提供针对4中不同尺寸的设备屏幕进行分别控制。
| 屏幕 | 名称 | 尺寸 |
|---|---|---|
| 超小屏幕（手机） | xs | <768px |
| 小屏幕（平板） | sm | >=768px |
| 中等屏幕（笔记本电脑） | md | >=992px |
| 大屏幕（桌面电脑） | lg | >=1200px |
针对4种屏幕类型各定义两种辅助类来在不同的设备上显示或隐藏内容。
| 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | |
|---|---|---|---|---|
| .visible-xs | 可见 | 隐藏 | 隐藏 | 隐藏 |
| .visible-sm | 隐藏 | 可见 | 隐藏 | 隐藏 |
| .visible-md | 隐藏 | 隐藏 | 可见 | 隐藏 |
| .visible-lg | 隐藏 | 隐藏 | 隐藏 | 可见 |
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
其中显示辅助类.visible-xs、.visible-sm、.visible-md、.visible-lg可以组合使用，同理对于隐藏辅助类也可以组合使用以达到不同的效果。但不要将显示辅助类和隐藏辅助类混合使用。
ZUI也提供用来控制打印机的显示与隐藏的辅助类。显示和隐藏不能同时使用。
.visible-print：在打印时显示，在浏览器正常浏览时隐藏。.hidden-print：在浏览器正常浏览时显示，在打印时隐藏。
禁用响应式布局
有时你所开发应用仅针对一个设备或平台，并不需要响应式布局。即使这样，也建议你使用响应式布局，因为不需要额外的代码，而且为跨屏提供了可能性。
在ZUI中并没用一个全局的开关来控制是否启用响应式布局。如果确实要禁用该功能，请参考下面的建议：
- 移除
<meta name="viewport" content="width=device-width, initial-scale=1">标签，禁用移动设备缩放可视窗口尺寸。 - 避免使用一些响应式工具类，例如
.visible-xs、.visible-sm、.visible-md、.visible-lg等。 - 当使用栅格系统时避免使用
.col-sm-*、.col-md-*、.col-lg-*，统一使用.col-xs-*。
栅格系统
采用Bootstrap3的栅格设计。具体使用参考bootstrap3-grid。
以下列出常用参数：
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
排版
字体
在ZUI中我们定义了三种字体家族已适应不同的场合。这些字体在中英文环境下都能够很好的显示。
| 无衬线字体 | "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif |
|---|---|
| 衬线字体 | Georgia, "Times New Roman", Times, serif |
| 等宽字体 | Monaco, Menlo, Consolas, "Courier New", monospace |
使用无衬线字体来作为页面的默认字体，因为无衬线字体非常适合在屏幕上显示；衬线字体作为一个额外的选择，但并不推荐在小字号中使用，但可以用于特殊文字或者标题中；等宽字体用来显示程序代码。
默认的字体大小为 13px，以保证在所有屏幕上都能有最佳效果。ZUI中也允许使用更小号的字体，不过不要小于 12px。默认行高为字体大小的1.38倍，一般为18px。一至六级标题的行高为字体大小的1.2。
文字排版
字是组成页面的重要内容，一个好的排版是构建好的用户界面的基石。应根据我们的设计原则来进行文字排版。下表中列举了web设计时会用到的文字排版方式。
| 元素 | 标签 | 字体大小 | 说明 |
|---|---|---|---|
页面标题 |
<h1> |
26px | 在一个页面只有一个页面标题。 |
标题 |
<h2> |
22px | 作为页面第二级标题，可能在一个页面中使用到多个二级标题。 |
三级标题 |
<h3> |
16px 粗体 | 页面第三级标题，嵌套在二级标题下使用。 |
四级标题 |
<h4> |
15px 粗体 | 页面第四级标题，嵌套在三级标题下使用。 |
五级标题 |
<h5> |
13px 粗体 颜色灰色 | 页面第五级标题，嵌套在四级标题下使用。 |
六级标题 |
<h6> |
12px 粗体 颜色灰色 | 页面第六级标题，嵌套在五级标题下使用。 |
这是一个段落 |
<p> |
13px | 正文中大部分由段落组成。段落的行高为20px。段落间在垂直方向上有10px边距。 |
这是一个突出的段落 |
<p class="lead"> |
20px | 突出的段落具有更大的字体，在一个段落上加.lead类。 |
| 粗体文本 | <strong> |
13px | 通常粗体文本用来强调内容。 |
| 斜体文本 | <em> |
13px | |
| 小的文本 | <small> |
12px 颜色灰色 | small文本字体只有正常字体大小的85%，通常为11.9px。 |
| 超链接 | <a> |
13px | 超链接具有不同的颜色以区别其他文本，超链接仅当鼠标悬停时会增加下划线。 |
|
<ol><li>...</ol> |
13px | 当组织一些并列项目且关注项目之间顺序时可以使用有序列表。 |
|
<ul><li>...</ul> |
13px | 当组织一些并列项目但不关注项目之间顺序时可以使用无序列表。 |
这是一大段引用内容 |
<blockquote> |
13px | 用于显示一大段引用的内容。 |
这是内嵌的引用 |
<q> |
13px | 用于在正文行内显示引用的术语。 |
|
<pre><code>...</code> |
13px 等宽字体 | 代码区域会加上方框，并使用等宽字体显示，详细代码显示规定请参见节代码高亮。 |
滚动条
ZUI也针对浏览器的滚动条进行了样式优化。
浏览器兼容性
滚动条样式目前仅支持Webkit内核浏览器。
滚动条样式测试
一些文字
更多的文字
更多的文字
更多的文字
长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本。
较宽的内容。
配色
ZUI的界面应该简洁，易于识别，让人感觉舒适而不失严谨。所使用的配色应该尽可能达到该目的。
ZUI的配色表包含三部分：主要颜色，灰度颜色及额外颜色。
主要颜色
包含3～5种颜色，决定了ZUI界面整体色调。虽然并没有强制的规则来决定如何指定主要颜色，但最好是使用同一色调的不同明度的颜色。一般选取2深色+2浅色+1强调色。主要颜色会用在菜单、导航、链接、高亮选项等。
在ZUI的默认配色方案中，主要颜色均为同一色系。
灰度颜色
灰度颜色强制使用同一色调不同亮度的一组颜色。在无特别需求的情况下，一般使用黑色灰度。灰度颜色会用在块的背景，边框，次要的文本上。灰度颜色为界面创建了层次感，加深了内容与内容间的边界，更易于体现内容的重要程度。
额外颜色
额外的颜色为特殊控件提供的更多的色彩选择。例如各种级别的消息框，特殊作用的按钮，特殊文本等。
配色设计要点
- 配色表中的每种颜色都可以在亮度上上下浮动10%左右来生成一个相近但又有些许不同的颜色作为边框及悬停渐变使用。
- 在界面中运用的所有配色尽量使用配色表中已列明的颜色；
- 优先使用主要颜色和灰度颜色，仅在特殊的按钮或消息时才使用额外颜色；
主题
ZUI中力求界面元素令人赏心悦目。不过如果你需要更多的个性化设置，这时你可以充分利用ZUI提供的主题样式表来个大换装。你只需要修改dist目录下的theme.css文件，并增加到你的项目引用中即可，不需要对原有文件做出修改。
如果你追求更深度的定制，可能需要了解src/less目录下的theme.less文件。修改这个文件也是非常简单，如果你只需要更换一下配色，那是简单不过，只需要将@color-primary变量设置一个新的值然后重新编译即可。
theme.less给出主要色彩值（@color-primary）会自动计算该色彩对应的配色方案。