From 106219d5c6b07128b9cc4edc80a4088db589dc93 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Tue, 5 Nov 2013 14:48:56 +0800
Subject: [PATCH]  * update document.

---
 assets/css/doc.css    |  10 ++-
 examples/labels.html  | 141 +++++++++++++++++++++---------------------
 examples/textbox.html | 113 +++++++++++++++++----------------
 3 files changed, 139 insertions(+), 125 deletions(-)
diff --git a/assets/css/doc.css b/assets/css/doc.css
index a4ca3e59c..61cd7c1da 100644
--- a/assets/css/doc.css
+++ b/assets/css/doc.css
@@ -1,6 +1,14 @@
+body
+{
+  background-color: #f1f1f1;
+}
 article
 {
-  padding: 20px;
+  padding: 40px;
+  max-width: 1000px;
+  margin: 30px auto;
+  background-color: #fff;
+  border:1px solid #ddd;
 }
 .segment
 {
diff --git a/examples/labels.html b/examples/labels.html
index a825c45d4..263866889 100644
--- a/examples/labels.html
+++ b/examples/labels.html
@@ -5,82 +5,85 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>ZUI</title>
+  <link href="../dist/css/zui.css" rel="stylesheet">
+  <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
   <script type="text/javascript" src="../assets/js/less.js"></script>
 </head>
 
 <body>
-  <section id='labels' class="page-section">
-    <div class="page-header"><h1>标签</h1></div>
+  <article>
+    <section id='labels' class="page-section">
+      <div class="page-header"><h1>标签</h1></div>
+      <h3>类型</h3>
+      <h4>基本类型</h4>
+      <table class="table" style='text-align:center'>
+        <tr>
+          <th width='200px'>标签</th>
+          <th>描述</th>
+        </tr>
+        <tr>
+          <td><h1><span class="label">New</span></h1></td>
+          <td>h1</td>
+        </tr>
+        <tr>
+          <td><h2><span class="label">New</span></h2></td>
+          <td>h2</td>
+        </tr>
+        <tr>
+          <td><h3><span class="label">New</span></h3></td>
+          <td>h3</td>
+        </tr>
+        <tr>
+          <td><h4><span class="label">New</span></h4></td>
+          <td>h4</td>
+        </tr>
+        <tr>
+          <td><h5><span class="label">New</span></h5></td>
+          <td>h5</td>
+        </tr>
+        <tr>
+          <td><h6><span class="label">New</span></h6></td>
+          <td>h6</td>
+        </tr>
+      </table>
+     
 
-    <h3>类型</h3>
-    <h4>基本类型</h4>
-    <table class="table" style='text-align:center'>
-      <tr>
-        <th width='200px'>标签</th>
-        <th>描述</th>
-      </tr>
-      <tr>
-        <td><h1><span class="label">New</span></h1></td>
-        <td>h1</td>
-      </tr>
-      <tr>
-        <td><h2><span class="label">New</span></h2></td>
-        <td>h2</td>
-      </tr>
-      <tr>
-        <td><h3><span class="label">New</span></h3></td>
-        <td>h3</td>
-      </tr>
-      <tr>
-        <td><h4><span class="label">New</span></h4></td>
-        <td>h4</td>
-      </tr>
-      <tr>
-        <td><h5><span class="label">New</span></h5></td>
-        <td>h5</td>
-      </tr>
-      <tr>
-        <td><h6><span class="label">New</span></h6></td>
-        <td>h6</td>
-      </tr>
-    </table>
-   
-
-    <h3>变化</h3>
-    <h4>颜色</h4>
-    <table class="table" style='text-align:left'>
-      <tr>
-        <th width='200px'>标签</th>
-        <th>描述</th>
-      </tr>
-      <tr>
-        <td><span class="label">Default</span></td>
-        <td>label-default</td>
-      </tr>
-      <tr>
-        <td><span class="label label-primary">Primary</span></td>
-        <td>label-primary</td>
-      </tr>
-      <tr>
-        <td><span class="label label-success">Success</span></td>
-        <td>label-success</td>
-      </tr>
-      <tr>
-        <td><span class="label label-info">Info</span></td>
-        <td>label-info</td>
-      </tr>
-      <tr>
-        <td><span class="label label-warning">Warning</span></td>
-        <td>label-warning</td>
-      </tr>
-      <tr>
-        <td><span class="label label-danger">Danger</span></td>
-        <td>label-danger</td>
-      </tr>
-    </table>
-  </section>
+      <h3>变化</h3>
+      <h4>颜色</h4>
+      <table class="table" style='text-align:left'>
+        <tr>
+          <th width='200px'>标签</th>
+          <th>描述</th>
+        </tr>
+        <tr>
+          <td><span class="label">Default</span></td>
+          <td>label-default</td>
+        </tr>
+        <tr>
+          <td><span class="label label-primary">Primary</span></td>
+          <td>label-primary</td>
+        </tr>
+        <tr>
+          <td><span class="label label-success">Success</span></td>
+          <td>label-success</td>
+        </tr>
+        <tr>
+          <td><span class="label label-info">Info</span></td>
+          <td>label-info</td>
+        </tr>
+        <tr>
+          <td><span class="label label-warning">Warning</span></td>
+          <td>label-warning</td>
+        </tr>
+        <tr>
+          <td><span class="label label-danger">Danger</span></td>
+          <td>label-danger</td>
+        </tr>
+      </table>
+    </section>
+  </article>
 </body>
 </html>
 
diff --git a/examples/textbox.html b/examples/textbox.html
index 6c9ff2b0c..afe272e0c 100644
--- a/examples/textbox.html
+++ b/examples/textbox.html
@@ -5,71 +5,74 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>ZUI</title>
+  <link href="../dist/css/zui.css" rel="stylesheet">
+  <link href="../assets/css/doc.css" rel="stylesheet">
   <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
   <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
   <script type="text/javascript" src="../assets/js/less.js"></script>
 </head>
 
 <body>
-  <section id='textbox' class="page-section">
-    <div class="page-header"><h1>文本框</h1></div>
+  <article>
+    <section id='textbox' class="page-section">
+      <div class="page-header"><h1>文本框</h1></div>
 
-    <h3>类型</h3>
-    <h4>基本类型</h4>
-    <table class="table">
-      <tr>
-        <th width='200px'>文本框</th>
-        <th>描述</th>
-      </tr>
-      <tr>
-        <td><input type="text" class='form-control' placeholder="Text input"></td>
-        <td>input type='text'</td>
-      </tr>
-      <tr>
-        <td><textarea class='form-control' rows="3"></textarea></td>
-        <td>textarea row='3'</td>
-      </tr>
-      <tr>
-        <td>
-          <select class="form-control">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-        </td>
-        <td>select </td>
-      <tr>
-    </table>
-   
+      <h3>类型</h3>
+      <h4>基本类型</h4>
+      <table class="table">
+        <tr>
+          <th width='200px'>文本框</th>
+          <th>描述</th>
+        </tr>
+        <tr>
+          <td><input type="text" class='form-control' placeholder="Text input"></td>
+          <td>input type='text'</td>
+        </tr>
+        <tr>
+          <td><textarea class='form-control' rows="3"></textarea></td>
+          <td>textarea row='3'</td>
+        </tr>
+        <tr>
+          <td>
+            <select class="form-control">
+              <option>1</option>
+              <option>2</option>
+              <option>3</option>
+              <option>4</option>
+              <option>5</option>
+            </select>
+          </td>
+          <td>select </td>
+        <tr>
+      </table>
 
-    <h3>状态</h3>
-    <table class="table">
-      <tr>
-        <th width='200px'>文本框</th>
-        <th>描述</th>
-      </tr>
-      <tr>
-        <td><input class="form-control"  type="text" placeholder="Disabled input here..." disabled><br /></td>
-        <td>禁用：input type='text' diabled</td>
-      </tr>
-    </table>
+      <h3>状态</h3>
+      <table class="table">
+        <tr>
+          <th width='200px'>文本框</th>
+          <th>描述</th>
+        </tr>
+        <tr>
+          <td><input class="form-control"  type="text" placeholder="Disabled input here..." disabled><br /></td>
+          <td>禁用：input type='text' diabled</td>
+        </tr>
+      </table>
 
-    <h3>变化</h3>
-    <h4>宽度</h4>
-    <div class="row">
-      <div class="col-xs-2">
-        <input type="text" class="form-control" placeholder=".col-xs-2">
+      <h3>变化</h3>
+      <h4>宽度</h4>
+      <div class="row">
+        <div class="col-xs-2">
+          <input type="text" class="form-control" placeholder=".col-xs-2">
+        </div>
+        <div class="col-xs-3">
+          <input type="text" class="form-control" placeholder=".col-xs-3">
+        </div>
+        <div class="col-xs-4">
+          <input type="text" class="form-control" placeholder=".col-xs-4">
+        </div>
       </div>
-      <div class="col-xs-3">
-        <input type="text" class="form-control" placeholder=".col-xs-3">
-      </div>
-      <div class="col-xs-4">
-        <input type="text" class="form-control" placeholder=".col-xs-4">
-      </div>
-    </div>
-  </section>
+    </section>
+  </article>
 </body>
 </html>
 
-- 
GitLab


标签	描述
Default	label-default
Primary	label-primary
Success	label-success
Info	label-info
Warning	label-warning
Danger	label-danger