* improve document UI:

 	* add a new button in download;
 	* add text for user opened with 'file:' protocol.

index.html

@@ -45,9 +45,10 @@
         <div class="container">
           <div id="heading">
             <h1>ZUI</h1>
-            <p>一个基于Bootstrap深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。</p>
+            <p>一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。</p>
             <div id="download">
               <a href="docs/download/zui-1.4.0-dist.zip" class="btn btn-primary btn-lg">立即下载 <i class="icon icon-download-alt"></i></a>
+              <a href="#basic/download" class="btn btn-white btn-lg">快速使用 <i class="icon icon-hand-right"></i></a>
               <p><small>最新版本 <span class="zui-version"><i class='icon icon-spin icon-spinner-indicator'></i></span> &nbsp; <a style="color: #f1f1f1" href="https://github.com/easysoft/zui/archive/master.zip" target="_blank">下载源码</a></small></p>
             </div>
             <p>QQ群：384135104 &nbsp; <a href="http://forum.zui.sexy/forum/" style="color: #f1f1f1" target="_blank"><i class="icon icon-comments-alt"></i> 论坛</a></p>
@@ -102,6 +103,25 @@
       </div>
     </div>
 
+    <div id="fileProtocolTip" class="hidden">
+      <div class="container-fixed-sm">
+        <h1>不支持 <code>file://</code> 协议</h1>
+        <p>看起来，你正在使用 <code>file://</code> 协议访问 ZUI 文档首页。因为 ZUI 文档内容需要进行异步加载，你需要使用 <code>http://</code> 协议或 <code>https://</code> 协议来访问本文档。</p>
+        <p>如果下载了完整的 ZUI 源码包，且系统上已经安装有 <a href="https://nodejs.org/zh-cn/" target="_blank">Node.js</a> 环境，只需按照如下步骤即可立即正常访问文档：</p>
+        <ol>
+          <li>进入 ZUI 源码目录；</li>
+          <li>执行 <code>npm install</code>；</li>
+          <li>执行 <code>npm start</code>；</li>
+          <li>在浏览器中访问 <a href="http://127.0.0.1:8088">http://127.0.0.1:8088</a>。</li>
+        </ol>
+        <p>你也可以访问在线文档：</p>
+        <ul>
+          <li>官方网站：<a href="http://zui.sexy">http://zui.sexy</a></li>
+          <li>开发中的网站：<a href="http://easysoft.github.io/zui/">https://easysoft.github.io/zui/</a></li>
+        </ul>
+      </div>
+    </div>
+
     <div class="text-muted loader loading"><i class="icon icon-spin icon-spinner-indicator"></i> 加载中...</div>
 
     <div id="grid">

src/js/doc.js

@@ -10,6 +10,12 @@
 +(function(window, $) {
     'use strict';
 
+    if(window.location.protocol === 'file:') {
+        $('#fileProtocolTip').removeClass('hidden');
+        $('.loading.loader').removeClass('loading');
+        return;
+    }
+
     // Polyfill
     if(!String.prototype.endsWith) {
         String.prototype.endsWith = function(searchString, position) {

src/less/doc.less

@@ -726,10 +726,32 @@ body {
 }
 
 #download {
-  > .btn-primary {
+  > .btn-lg {
     border-color: #e5e5e5;
     border-color: rgba(255, 255, 255, .65);
     margin-bottom: 15px;
+
+    + .btn { margin-left: 10px }
+
+    > .icon {
+      position: relative;
+      margin-left: 6px;
+      margin-right: -3px;
+      top: -1px;
+    }
+
+    &.btn-white {
+      background: #fff;
+      color: @color-primary;
+      opacity: .9;
+
+      &:hover,
+      &:focus,
+      &:active {
+        opacity: 1;
+        color: @color-secondary;
+      }
+    }
   }
   padding-top: 20px;
   text-align: center;