使用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浏览器”章节。
+因为IE浏览器与各大浏览器区别太大，为了尽可能的保证在所有浏览器中有一致的体验，很多时候需要单独对待IE浏览器。为了保证代码精简及一致，ZUI只支持IE8+。为了保证IE能够使用最新渲染模式而不是兼容模式，在html文档头部应加入以下代码：
+因为IE浏览器与各大浏览器区别太大，为了尽可能的保证在所有浏览器中有一致的体验，很多时候需要单独对待IE浏览器。为了保证代码精简及一致，ZUI支持IE8-11。
+ +为了保证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之后加入以下代码可以有选择性的出现浏览器升级提示，并给出链接引导用户访问abetterbrowser.org：
针对IE7及更早的版本，应该给出提示，让用户升级浏览器。在body之后加入以下代码可以有选择性的出现浏览器升级提示，并给出链接引导用户访问browsehappy.com：
<body>
<!--[if lt IE 8]>
- <p class="abetterbrowser">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://abetterbrowser.org/">更换一个更好的浏览器</a> 来提升用户体验.</p>
+ <div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div>
<![endif]-->
...
.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） | +是 | +|||
| 列排序 | +是 | +|||
<h1><h2><h3><h4><h5><h6>这是一个段落
<p>这是一个突出的段落
<p class="lead">.lead类。<strong><em><small><a><ol><li>...</ol><ul><li>...</ul>这是一大段引用内容
<blockquote>这是内嵌的引用
<q><pre><code>...</code>ZUI中力求界面元素令人赏心悦目。不过如果你需要更多的个性化设置，这时你可以充分利用ZUI提供的主题样式表来个大换装。你只需要修改dist目录下的theme.css文件，并增加到你的项目引用中即可，不需要对原有文件做出修改。
如果你追求更深度的定制，可能需要了解src/less目录下的theme.less文件。修改这个文件也是非常简单，如果你只需要更换一下配色，那是简单不过，只需要将@color-primary变量设置一个新的值然后重新编译即可。
theme.less给出主要色彩值（@color-primary）会自动计算该色彩对应的配色方案。
+