* update document: "control-*.html".

40a85e27 · Catouse · bd06ca05 · 40a85e27 · 40a85e27 · 40a85e27
9 changed file
--- a/docs/part/control-breadcrumb.html
+++ b/docs/part/control-breadcrumb.html
-<ul class="breadcrumb">
-  <li>
-    <a href="#">Home</a>
-  </li>
-  <li>
-    <a href="#">Library</a>
-  </li>
-  <li class="active">Data</li>
-</ul>
+<section>
+  <header><h3>示例</h3></header>
+  <article>
+    <div class="example">
+      <ol class="breadcrumb">
+        <li><i class="icon icon-home"></i> 首页</li>
+      </ol>
+      <ol class="breadcrumb">
+        <li><a href="#"><i class="icon icon-home"></i> 首页</a></li>
+        <li><a href="#">目录</a></li>
+      </ol>
+      <ol class="breadcrumb">
+        <li><a href="#"><i class="icon icon-home"></i> 首页</a></li>
+        <li><a href="#">目录</a></li>
+        <li class="active">存档</li>
+      </ol>
+    </div>
+    <pre><code>&lt;ol class=&quot;breadcrumb&quot;&gt;
+  &lt;li&gt;&lt;a href=&quot;your/url/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href=&quot;your/url/&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
+  &lt;li class=&quot;active&quot;&gt;Data&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+  </article>
+</section>
--- a/docs/part/control-button.html
+++ b/docs/part/control-button.html
@@ -8,7 +8,7 @@
  </header>
  <article>
    <p>按钮根据表现形式有如下类型：</p>
-    <table class="table">
+    <table class="table table-responsive">
      <tbody>
        <tr>
          <th class="col-md-4">按钮</th>
@@ -16,26 +16,41 @@
        </tr>
        <tr>
          <td><button class="btn btn-primary">主要按钮</button></td>
-          <td>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-primary&quot; type="button"&gt;主要按钮&lt;/button&gt;
+&lt;a class=&quot;btn btn-primary&quot; href=&quot;your/url/&quot;&gt;主要按钮&lt;/a&gt;</code></pre>
+            <p>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</p>
+          </td>
        </tr>
        <tr>
          <td><button class="btn btn-default">标准按钮</button></td>
-          <td>页面上的普通按钮，例如取消表单、重置输入等。</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;标准按钮&lt;/button&gt;</code></pre>
+            <p>页面上的普通按钮，例如取消表单、重置输入等。</p>
+          </td>
        </tr>
        <tr>
          <td><button class="btn btn-link">链接按钮</button></td>
          <td>
-          链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</td>
+          <pre><code>&lt;button class=&quot;btn btn-link&quot; type=&quot;button&quot;&gt;链接按钮&lt;/button&gt;</code></pre>
+          <p>链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</p></td>
        </tr>
        <tr>
          <td>
            <div class="btn-group">
-              <button class="btn btn-default">按钮组</button> <button class=
-              "btn btn-default">第二个</button> <button class=
-              "btn btn-default">第三个</button>
+              <button class="btn">按钮组</button> <button class=
+              "btn">第二个</button> <button class=
+              "btn">第三个</button>
            </div>
          </td>
-          <td>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。</td>
+          <td>
+            <pre><code>&lt;div class=&quot;btn-group&quot;&gt;
+  &lt;button class=&quot;btn&quot;&gt;按钮组&lt;/button&gt;
+  &lt;button class=&quot;btn&quot;&gt;第二个&lt;/button&gt;
+  &lt;button class=&quot;btn&quot;&gt;第三个&lt;/button&gt;
+&lt;/div&gt;</code></pre>
+            <p>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。</p>
+          </td>
        </tr>
      </tbody>
    </table>
@@ -50,34 +65,49 @@
    <table class="table">
      <tbody>
        <tr>
-          <th class="col-md-6">实例</th>
+          <th class="col-md-4">实例</th>
          <th>描述</th>
        </tr>
        <tr>
-          <td><button class="btn btn-lg btn-primary" type="button">较大的按钮</button>
-          <button class="btn btn-lg" type="button">较大的按钮</button></td>
-          <td>较大的按钮，通常用在英雄页面或者大屏幕中。</td>
+          <td><button class="btn btn-lg btn-primary" type="button">大尺寸按钮</button>
+          <button class="btn btn-lg" type="button">大尺寸按钮</button></td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-lg&quot; type=&quot;button&quot;&gt;大尺寸按钮&lt;/button&gt;</code></pre>
+            <p>大尺寸按钮。</p>
+          </td>
        </tr>
        <tr>
          <td><button class="btn btn-primary" type="button">默认大小</button>
          <button class="btn btn-default" type="button">默认大小</button></td>
-          <td>默认大小</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;默认大小按钮&lt;/button&gt;</code></pre>
+            <p>默认大小。</p>
+          </td>
        </tr>
        <tr>
          <td><button class="btn btn-sm btn-primary" type="button">较小的按钮</button>
          <button class="btn btn-sm" type="button">较小的按钮</button></td>
-          <td>较小的按钮</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-sm &quot; type=&quot;button&quot;&gt;较小的按钮&lt;/button&gt;</code></pre>
+            <p>较小的按钮。</p>
+          </td>
        </tr>
        <tr>
          <td><button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
          <button class="btn btn-mini" type="button">迷你按钮</button></td>
-          <td></td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-mini &quot; type=&quot;button&quot;&gt;迷你按钮&lt;/button&gt;</code></pre>
+            <p>迷你按钮。</p>
+          </td>
        </tr>
        <tr>
          <td><button class="btn btn-large btn-block btn-primary" type=
          "button">块状按钮</button> <button class=
          "btn btn-large btn-block btn-default" type="button">块状按钮</button></td>
-          <td>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-block &quot; type=&quot;button&quot;&gt;迷你按钮&lt;/button&gt;</code></pre>
+            <p>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</p>
+          </td>
        </tr>
      </tbody>
    </table>
@@ -94,51 +124,103 @@
          <th>描述</th>
        </tr>
        <tr>
-          <td><button class="btn btn-default">带图标的按钮</button></td>
-          <td>在按钮上使用图标有时能起到点睛之笔的效果。</td>
+          <td><button class="btn btn-default"><i class="icon icon-star"></i> 带图标的按钮</button></td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn &quot; type=&quot;button&quot;&gt;&lt;i class=&quot;icon icon-star&quot;&gt;&lt;/i&gt; 带图标的按钮&lt;/button&gt;</code></pre>
+            在按钮上使用图标有时能起到点睛之笔的效果。
+          </td>
        </tr>
        <tr>
          <td><button type="button" class="btn btn-primary active" data-toggle=
          "button">状态切换按钮</button></td>
-          <td>状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态，再次点击取消选中状态。</td>
+          <td>
+            <pre><code>&lt;button data-toggle=&quot;button&quot; class=&quot;btn &quot; type=&quot;button&quot;&gt;状态切换按钮&lt;/button&gt;</code></pre>
+            <p>状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态（为按钮增加Class <code>.active</code>），再次点击取消选中状态。</p>
+          </td>
        </tr>
        <tr>
          <td>
-            <div class="btn-group" data-toggle="buttons-checkbox">
-              <button type="button" class="btn btn-default">Left</button>
-              <button type="button" class="btn btn-default">Middle</button>
-              <button type="button" class="btn btn-default">Right</button>
+            <div class="btn-group" data-toggle="buttons">
+              <label class="btn active">
+                <input type="checkbox" checked> 多选1
+              </label>
+              <label class="btn">
+                <input type="checkbox"> 多选2
+              </label>
+              <label class="btn">
+                <input type="checkbox"> 多选3
+              </label>
            </div>
          </td>
-          <td>当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件（复选框）。</td>
+          <td>
+            <pre><code>&lt;div class=&quot;btn-group&quot; data-toggle=&quot;buttons&quot;&gt;
+  &lt;label class=&quot;btn active&quot;&gt;
+    &lt;input type=&quot;checkbox&quot; checked&gt; 多选1
+  &lt;/label&gt;
+  &lt;label class=&quot;btn&quot;&gt;
+    &lt;input type=&quot;checkbox&quot;&gt; 多选2
+  &lt;/label&gt;
+  &lt;label class=&quot;btn&quot;&gt;
+    &lt;input type=&quot;checkbox&quot;&gt; 多选3
+  &lt;/label&gt;
+&lt;/div&gt;</code></pre>
+            <p>为按钮组中的每个按钮使用<code>&lt;label&gt;</code>标签，并在其中包含checkbox类型的表单控件就可以启用一个按钮组的多选组件。其机制同于表单中的多项选择控件（复选框）。</p>
+          </td>
        </tr>
        <tr>
          <td>
-            <div class="btn-group" data-toggle="buttons-radio">
-              <button type="button" class="btn btn-default">Left</button>
-              <button type="button" class="btn btn-default">Middle</button>
-              <button type="button" class="btn btn-default">Right</button>
+            <div class="btn-group" data-toggle="buttons">
+              <label class="btn btn-primary active">
+                <input type="radio" name="options" id="option1" checked> 单选1
+              </label>
+              <label class="btn btn-primary">
+                <input type="radio" name="options" id="option2"> 单选2
+              </label>
+              <label class="btn btn-primary">
+                <input type="radio" name="options" id="option3"> 单选3
+              </label>
            </div>
          </td>
-          <td>当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。</td>
+          <td>
+            <pre><code>&lt;div class=&quot;btn-group&quot; data-toggle=&quot;buttons&quot;&gt;
+  &lt;label class=&quot;btn btn-primary active&quot;&gt;
+    &lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option1&quot; checked&gt; 单选1
+  &lt;/label&gt;
+  &lt;label class=&quot;btn btn-primary&quot;&gt;
+    &lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option2&quot;&gt; 单选2
+  &lt;/label&gt;
+  &lt;label class=&quot;btn btn-primary&quot;&gt;
+    &lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option3&quot;&gt; 单选3
+  &lt;/label&gt;
+&lt;/div&gt;</code></pre>
+            <p>为按钮组中的每个按钮使用<code>&lt;label&gt;</code>标签，并在其中包含radio类型的表单控件就可以启用一个按钮组的单选组件。其机制同于表单中的单项选择控件。</p>
        </tr>
        <tr>
+          <td><button id="loadingBtnExample" type="button" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button></td>
          <td>
-            <div class="btn-group" data-toggle="buttons-radio"></div>
+            <pre><code>&lt;button id=&quot;loadingBtnExample&quot; type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-loading-text=&quot;正在加载...&quot;&gt;加载状态&lt;/button&gt;</code></pre>
+            <pre><code>$('#loadingBtnExample').on('click', function() {
+    var $btn = $(this);
+    $btn.button('loading');
+
+    // 此处使用 setTimeout 来模拟你的复杂功能逻辑
+    setTimeout(function() {
+        $btn.button('reset');
+    }, 2000);
+});</code></pre>
+            <p>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换&quot;正在加载&quot;，直至操作完成。</p>
+            <p>你需要手动为按钮启用加载状态特性。</p>
          </td>
-          <td>在互斥的状态切换组中使用图标更加简洁明了。</td>
-        </tr>
-        <tr>
-          <td><button type="button" class="btn btn-primary" data-loading-text=
-          "正在加载...">加载状态</button></td>
-          <td>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换&quot;正在加载&quot;，直至操作完成。</td>
        </tr>
        <tr>
          <td>
-            <a href="#" class="btn btn-primary disabled">已禁用的操作</a> <a href="#"
-            class="btn disabled">禁用的操作</a>
+            <a disabled href="#" class="btn btn-primary disabled">已禁用的操作</a> <a disabled href="#" class="btn disabled">禁用的操作</a>
+          </td>
+          <td>
+            <pre><code>&lt;a disabled href=&quot;your/url/&quot; class=&quot;btn disabled&quot;&gt;禁用的操作&lt;/a&gt;</code></pre>
+            <p>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</p>
+            <p>为按钮增加CLASS <code>.disabled</code> 即可让一个按钮使用被禁用的外观。你或许还需要为按钮增加<code>disabled</code>属性来禁用用户点击等操作。</p>
          </td>
-          <td>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</td>
        </tr>
      </tbody>
    </table>
@@ -152,34 +234,66 @@
    <table class="table">
      <tbody>
        <tr>
-          <th class="col-md-3">实例</th>
+          <th class="col-md-4">实例</th>
          <th>描述</th>
        </tr>
        <tr>
-          <td><button type="button" class="btn btn-default">默认</button></td>
-          <td>带渐变的标准灰色按钮</td>
+          <td><button type="button" class="btn">默认</button></td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn &quot; type=&quot;button&quot;&gt;默认&lt;/button&gt;</code></pre>
+            <p>默认外观按钮</p>
+          </td>
        </tr>
        <tr>
          <td><button type="button" class="btn btn-primary">主要</button></td>
-          <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-primary &quot; type=&quot;button&quot;&gt;主要&lt;/button&gt;</code></pre>
+            <p>提供额外的视觉感, 可在一系列的按钮中指出主要操作</p>
+          </td>
        </tr>
        <tr>
          <td><button type="button" class="btn btn-info">信息</button></td>
-          <td>默认样式的替代样式</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-info &quot; type=&quot;button&quot;&gt;信息&lt;/button&gt;</code></pre>
+            <p>默认样式的替代样式</p>
+          </td>
        </tr>
        <tr>
          <td><button type="button" class="btn btn-success">成功</button></td>
-          <td>表示成功或积极的动作</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-success &quot; type=&quot;button&quot;&gt;成功&lt;/button&gt;</code></pre>
+            <p>表示成功或积极的动作</p>
+          </td>
        </tr>
        <tr>
          <td><button type="button" class="btn btn-warning">警告</button></td>
-          <td>提醒应该谨慎采取这个动作</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-warning &quot; type=&quot;button&quot;&gt;警告&lt;/button&gt;</code></pre>
+            <p>提醒应该谨慎采取这个动作</p>
+          </td>
        </tr>
        <tr>
          <td><button type="button" class="btn btn-danger">危险</button></td>
-          <td>表示这个动作危险或存在危险</td>
+          <td>
+            <pre><code>&lt;button class=&quot;btn btn-danger &quot; type=&quot;button&quot;&gt;危险&lt;/button&gt;</code></pre>
+            <p>表示这个动作危险或存在危险</p>
+          </td>
        </tr>
      </tbody>
    </table>
  </article>
 </section>
+
+<script>
+function afterPageLoad() {
+    $('#loadingBtnExample').on('click', function() {
+        var $btn = $(this);
+        $btn.button('loading');
+
+        // 此处使用 setTimeout 来模拟你的复杂功能逻辑
+        setTimeout(function() {
+            $btn.button('reset');
+        }, 2000);
+    });
+}
+</script>
--- a/docs/part/control-divider.html
+++ b/docs/part/control-divider.html
@@ -4,5 +4,6 @@
    <div class="example">
      <hr>
    </div>
+    <pre><code>&lt;hr&gt;</code></pre>
  </article>
 </section>
--- a/docs/part/control-header.html
+++ b/docs/part/control-header.html
 <section>
-  <header><h3>标准内容标题</h3></header>
+  <header><h3>普通标题</h3></header>
  <article>
    <p>内容标题用来对一段内容进行总结。内容标题有1-6个级别，用html中的<code>h1</code>、<code>h2</code>...<code>h6</code>来应用样式</p>
    <table class="table">
      <thead>
        <tr>
-          <th style="width:30%">元素</th>
+          <th style="width:30%">实例</th>
          <th>标签</th>
          <th>像素大小</th>
          <th>说明</th>
@@ -17,7 +17,7 @@
            <h1>Heading1 一级标题</h1>
          </td>
          <td><code>&lt;h1&gt;</code></td>
-          <td>28px</td>
+          <td>20px</td>
          <td>在一个页面（或在<code>hgroup</code>标记的范围内）只有一个页面标题。</td>
        </tr>
        <tr>
@@ -33,7 +33,7 @@
            <h3>Heading3 三级标题</h3>
          </td>
          <td><code>&lt;h3&gt;</code></td>
-          <td>20px 粗体</td>
+          <td>16px 粗体</td>
          <td>页面第三级标题，嵌套在二级标题下使用。</td>
        </tr>
        <tr>
@@ -41,7 +41,7 @@
            <h4>Heading4 四级标题</h4>
          </td>
          <td><code>&lt;h4&gt;</code></td>
-          <td>16px 粗体</td>
+          <td>14px 粗体</td>
          <td>页面第四级标题，嵌套在三级标题下使用。</td>
        </tr>
        <tr>
@@ -49,7 +49,7 @@
            <h5>Heading5 五级标题</h5>
          </td>
          <td><code>&lt;h5&gt;</code></td>
-          <td>14px 粗体 颜色灰色</td>
+          <td>13px 粗体 颜色灰色</td>
          <td>页面第五级标题，嵌套在四级标题下使用。</td>
        </tr>
        <tr>
@@ -62,41 +62,28 @@
        </tr>
      </tbody>
    </table>
+    <pre><code>&lt;h1&gt;Heading1 一级标题&lt;/h1&gt;
+&lt;h1&gt;Heading2 二级标题&lt;/h1&gt;
+&lt;h1&gt;Heading3 三级标题&lt;/h1&gt;
+&lt;h1&gt;Heading4 四级标题&lt;/h1&gt;
+&lt;h1&gt;Heading5 五级标题&lt;/h1&gt;
+&lt;h1&gt;Heading6 六级标题&lt;/h1&gt;</code></pre>
  </article>
 </section>

 <section>
-  <header><h3>带额外内容的标题</h3></header>
-  <article>
-    <p>标题中可以加入解释性的文本，这些文本通过一个<code>small</code>标签加入。</p>
-    <div class="example" contenteditable="true">
-      <h1>Heading1 标题1 <small>额外的标题 secondary headings</small></h1>
-      <h2>Heading2 标题2 <small>额外的标题 secondary headings</small></h2>
-      <h3>Heading3 标题3 <small>额外的标题 secondary headings</small></h3>
-      <h4>Heading4 标题4 <small>额外的标题 secondary headings</small></h4>
-      <h5>Heading5 标题5 <small>额外的标题 secondary headings</small></h5>
-      <h6>Heading6 标题6 <small>额外的标题 secondary headings</small></h6>
-    </div>
-  </article>
-</section>
-
-<section>
-  <header><h3>单独一行的文本</h3></header>
-  <article>
-    <div class="example" contenteditable="true">
-      <h2>Heading1 标题1 <small class="block">这是关于标题的解释性文本 secondary
-      headings</small></h2>
-    </div>
-  </article>
-</section>
-
-<section>
-  <header><h3>带图标的标题</h3></header>
+  <header><h3>包含副标题</h3></header>
  <article>
-    <p>页面标题使用额外的<code>div.header</code>来为页面内容提供更多的样式控制，与其他控件完美整合在一起。</p>
+    <p>标题中可以显示一个副标题。副标题的文本通过一个<code>small</code>标签加入。</p>
    <div class="example" contenteditable="true">
-      <h2><i class="icon icon-film"></i> 带图标的标题</h2>
+      <h1>Heading1 标题1 <small>副标题 secondary headings</small></h1>
+      <h2>Heading2 标题2 <small>副标题 secondary headings</small></h2>
+      <h3>Heading3 标题3 <small>副标题 secondary headings</small></h3>
+      <h4>Heading4 标题4 <small>副标题 secondary headings</small></h4>
+      <h5>Heading5 标题5 <small>副标题 secondary headings</small></h5>
+      <h6>Heading6 标题6 <small>副标题 secondary headings</small></h6>
    </div>
+    <pre><code>&lt;h1&gt;Heading1 标题 &lt;small&gt;副标题&lt;/small&gt;&lt;/h1&gt;</code></pre>
  </article>
 </section>

@@ -107,5 +94,6 @@
    <div class="example" contenteditable="true">
      <h3 class="header-dividing">标题</h3>
    </div>
+    <pre><code>&lt;h1 class=&quot;header-dividing&quot;&gt;Heading1 一级标题&lt;/h1&gt;</code></pre>
  </article>
 </section>
--- a/docs/part/control-icon.html
+++ b/docs/part/control-icon.html
@@ -58,7 +58,7 @@
  <article>
    <p>使用一个单独的<code>&lt;span&gt;</code>标签或者<code>&lt;i&gt;</code>并增加对应的CSS类名即可，用来作为图标的标签不需要包含任何文本也不应该如此。</p>
    <pre class="prettyprint"><code>&lt;i class=&quot;icon icon-star&quot;&gt;&lt;/i&gt;</code></pre>
-    <p>使用图标字体有一个好处就是图标就是文本字符，所有能用于文本的样式都可以用于图标，这样就可以随意定义图标的大小、颜色，甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式，包含如下内容：</p>
+    <p>使用图标字体有一个特大好处就是图标就是文本字符，所有能用于文本的样式都可以用于图标，这样就可以随意定义图标的大小、颜色，甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式，包含如下内容：</p>
    <ul>
      <li>图标应具备统一的颜色，如果有交互行为样式也应该保持一致；</li>
      <li>图标的大小应该保持一致，正文中的图标大小应为14px，标题中的图标可以为28px；</li>
@@ -73,21 +73,21 @@

 <script>
 function afterPageLoad() {
-  if($.doc) {
-    var url = $('body').hasClass('layout-page') ? '../icons.json' : 'docs/icons.json';
-    $.doc.loadData(url, function(data){
-      var iconCount = 0;
-      var $list = $('<ul class="clearfix"></ul>');
-      $.each(data, function(name, icon){
-        iconCount++;
-        var $li = $('<li><a href="#search/icon-' + name + '"><i class="icon-' + name + '"></i> ' + name + '</a></li>');
-        icon.id = name;
-        $li.data('icon', icon);
-        $list.append($li);
-      });
-      $('#iconsExample').empty().append($list);
-      $('#pageBody .icons-count').text(iconCount);
-    });
-  }
+    if($.doc) {
+        var url = $('body').hasClass('layout-page') ? '../icons.json' : 'docs/icons.json';
+        $.doc.loadData(url, function(data) {
+            var iconCount = 0;
+            var $list = $('<ul class="clearfix"></ul>');
+            $.each(data, function(name, icon) {
+                iconCount++;
+                var $li = $('<li><a href="#search/icon-' + name + '"><i class="icon-' + name + '"></i> ' + name + '</a></li>');
+                icon.id = name;
+                $li.data('icon', icon);
+                $list.append($li);
+            });
+            $('#iconsExample').empty().append($list);
+            $('#pageBody .icons-count').text(iconCount);
+        });
+    }
 }
 </script>
--- a/docs/part/control-image.html
+++ b/docs/part/control-image.html
@@ -3,27 +3,24 @@
    <h3>圆角图片</h3>
  </header>
  <article>
-    <p><code>.img-rounded</code></p>
-    <div class="example"><img src="docs/img/img1.jpg" width="200px" height="200px"
-    class="img-rounded" alt=""></div>    
+    <div class="example"><img src="docs/img/img1.jpg" width="200px" height="200px" class="img-rounded" alt="圆角图片"></div>
+    <pre><code>&lt;img src=&quot;http://zui.sexy/docs/img/img1.jpg&quot; width=&quot;200px&quot; height=&quot;200px&quot; class=&quot;img-rounded&quot; alt=&quot;圆角图片&quot;&gt;</code></pre>
  </article>
 </section>

 <section>
  <header><h3>圆形图片</h3></header>
  <article>
-    <p><code>.img-circle</code></p>
-    <div class="example"><img src="docs/img/img2.jpg" width="200px" height="200px"
-    class="img-circle" alt=""></div>
+    <div class="example"><img src="docs/img/img2.jpg" width="200px" height="200px" class="img-circle" alt="圆形图片"></div>
+    <pre><code>&lt;img src=&quot;http://zui.sexy/docs/img/img2.jpg&quot; width=&quot;200px&quot; height=&quot;200px&quot; class=&quot;img-circle&quot; alt=&quot;圆形图片&quot;&gt;</code></pre>
  </article>
 </section>

 <section>
  <header><h3>缩略图</h3></header>
  <article>
-    <p><code>.img-thumbnail</code></p>
-    <div class="example"><img src="docs/img/img3.jpg" width="200px" height="200px"
-    class="img-thumbnail" alt=""></div>
+    <div class="example"><img src="docs/img/img3.jpg" width="200px" height="200px" class="img-thumbnail" alt="缩略图"></div>
+    <pre><code>&lt;img src=&quot;http://zui.sexy/docs/img/img3.jpg&quot; width=&quot;200px&quot; height=&quot;200px&quot; class=&quot;img-thumbnail&quot; alt=&quot;缩略图&quot;&gt;</code></pre>
  </article>
 </section>

@@ -32,9 +29,14 @@
    <h3>响应式图片</h3>
  </header>
  <article>
-    <p>图片最大宽度将不会超过父级容器。<code>.img-responsive</code></p>
-    <div style="width: 250px;" class="example panel"><img src="docs/img/img4.jpg" class=
-    "img-responsive" alt=""></div>
+    <p>图片最大宽度将不会超过父级容器。</p>
+    <div class="example">
+      <div style="width: 250px;" class="panel">
+        <div class="panel-heading">我的宽度限定为250px</div>
+        <img src="docs/img/img4.jpg" class="img-responsive" alt="响应式图片测试">
+      </div>
+    </div>
+    <pre><code>&lt;img src=&quot;http://zui.sexy/docs/img/img4.jpg&quot; width=&quot;200px&quot; height=&quot;200px&quot; class=&quot;img-responsive&quot; alt=&quot;响应式图片测试&quot;&gt;</code></pre>
  </article>
 </section>


--- a/docs/part/control-label.html
+++ b/docs/part/control-label.html
 <section>
  <header><h3>基本样式</h3></header>
  <article>
-    <table class="table" style="text-align:center">
-      <tbody>
-        <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>
-      </tbody>
-    </table>    
+    <div class="example">
+      <span class="label">标签</span>
+      <span class="label">Tag</span>
+    </div>
+    <pre><code></code>&lt;span class=&quot;label&quot;&gt;标签&lt;/span&gt;</pre>
+  </article>
+</section>
+
+<section>
+  <header>
+    <h3>标签和徽标的颜色</h3>
+  </header>
+  <article>
+    <div class="example">
+      <span class="label">Default</span>
+      <span class="label label-primary">Primary</span>
+      <span class="label label-success">Success</span>
+      <span class="label label-info">Info</span>
+      <span class="label label-warning">Warning</span>
+      <span class="label label-danger">Danger</span>
+    </div>
+    <pre><code></code>&lt;span class=&quot;label&quot;&gt;Default&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-primary&quot;&gt;Primary&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-success&quot;&gt;Success&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-info&quot;&gt;Info&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-warning&quot;&gt;Warning&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-danger&quot;&gt;Danger&lt;/span&gt;</pre>
  </article>
 </section>

@@ -52,7 +35,7 @@
  <header><h3>徽标</h3></header>
  <article>
    <p><code>.label-badge</code></p>
-    <div class="example" contenteditable="true">
+    <div class="example">
      <span class="label label-badge">12</span> <span class=
      "label label-badge label-primary">Primary</span> <span class=
      "label label-badge label-success">Success</span> <span class=
@@ -60,16 +43,32 @@
      "label label-badge label-warning">Warning</span> <span class=
      "label label-badge label-danger">Danger</span>
    </div>
-    <p>小圆点徽标</p>
-    <div class="example" contenteditable="true">
+    <pre><code></code>&lt;span class=&quot;label label-badge&quot;&gt;Default&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-badge label-primary&quot;&gt;Primary&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-badge label-success&quot;&gt;Success&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-badge label-info&quot;&gt;Info&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-badge label-warning&quot;&gt;Warning&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-badge label-danger&quot;&gt;Danger&lt;/span&gt;</pre>
+
+    <h4>小圆点徽标</h4>
+    <div class="example">
      <span class="label label-dot">12</span> <span class=
+      "label label-dot label-info">Primary</span> <span class=
+      "label label-dot label-info">Success</span> <span class=
      "label label-dot label-info">Info</span> <span class=
      "label label-dot label-warning">Warning</span> <span class=
      "label label-dot label-danger">Danger</span>
    </div>
-    <p>按钮中的徽标</p>
-    <div class="example" contenteditable="true">
-      <button class="btn">列表 <span class="label label-badge">12</span></button>
+    <pre><code></code>&lt;span class=&quot;label label-dot&quot;&gt;Default&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-dot label-primary&quot;&gt;Primary&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-dot label-success&quot;&gt;Success&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-dot label-info&quot;&gt;Info&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-dot label-warning&quot;&gt;Warning&lt;/span&gt;</pre>
+    <pre><code></code>&lt;span class=&quot;label label-dot label-danger&quot;&gt;Danger&lt;/span&gt;</pre>
+
+    <h4>按钮中的徽标</h4>
+    <div class="example">
+      <button class="btn">我的消息 <span class="label label-badge">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-badge label-primary">12</span></button> <button class="btn">处理错误
      <span class="label label-badge label-success">12</span></button>
@@ -107,57 +106,22 @@
      "label label-dot">12</span></button> <button class="btn btn-danger">联系人
      <span class="label label-dot">12</span></button>
    </div>
-    <p>列表组中的徽标和标签</p>
-    <div class="example list-group" contenteditable="true">
-      <a href="#" class="list-group-item">用div &gt; a实现，实现整行点击 <span class=
-      "label label-primary">Primary</span></a> <a href="#" class=
-      "list-group-item">todo</a> <a href="#" class="list-group-item">story
-      <span class="label label-badge label-primary">Primary</span></a> <a href="#"
-      class="list-group-item active">task active</a> <a href="#" class=
-      "list-group-item">bug <span class=
-      "label label-badge label-warning">Warning</span></a> <a href="#" class=
-      "list-group-item">case <span class=
-      "label label-badge label-danger pull-right">123</span></a>
-    </div>    
-  </article>
-</section>
+    <pre><code>&lt;button class=&quot;btn&quot;&gt;列表 &lt;span class=&quot;label label-badge&quot;&gt;12&lt;/span&gt;&lt;/button&gt;</code></pre>

-<section>
-  <header>
-    <h3>标签和徽标的颜色</h3>
-  </header>
-  <article>
-    <table class="table" style="text-align:left">
-      <tbody>
-        <tr>
-          <th width="200px">标签</th>
-          <th>描述</th>
-        </tr>
-        <tr>
-          <td><span class="label">Default</span></td>
-          <td><code>.label-default</code></td>
-        </tr>
-        <tr>
-          <td><span class="label label-primary">Primary</span></td>
-          <td><code>.label-primary</code></td>
-        </tr>
-        <tr>
-          <td><span class="label label-success">Success</span></td>
-          <td><code>.label-success</code></td>
-        </tr>
-        <tr>
-          <td><span class="label label-info">Info</span></td>
-          <td><code>.label-info</code></td>
-        </tr>
-        <tr>
-          <td><span class="label label-warning">Warning</span></td>
-          <td><code>.label-warning</code></td>
-        </tr>
-        <tr>
-          <td><span class="label label-danger">Danger</span></td>
-          <td><code>.label-danger</code></td>
-        </tr>
-      </tbody>
-    </table>
+    <h4>列表组中的徽标和标签</h4>
+    <div class="example">
+      <div class="list-group">
+        <a href="#" class="list-group-item">Project <span class="label label-success">New</span></a>
+        <a href="#" class="list-group-item">todo</a>
+        <a href="#" class="list-group-item">story<span class="label label-badge label-primary">3 stories</span></a>
+        <a href="#" class="list-group-item">task<span class="label label-info label-badge pull-right">10 tasks</span></a>
+        <a href="#" class="list-group-item">bug <span class="label label-badge label-warning">2 bugs</span></a>
+        <a href="#" class="list-group-item">case <span class="label label-badge label-danger pull-right">100+</span></a>
+      </div>
+    </div>
+    <pre><code>&lt;div class=&quot;example&quot; contenteditable=&quot;true&quot;&gt;
+  &lt;div class=&quot;list-group&quot;&gt;
+    &lt;a href=&quot;#&quot; class=&quot;list-group-item&quot;&gt;Project &lt;span class=&quot;label label-success&quot;&gt;New&lt;/span&gt;&lt;/a&gt;
+    ...</code></pre>
  </article>
 </section>
--- a/docs/part/control-progressbar.html
+++ b/docs/part/control-progressbar.html
+<style>
+.progress {margin-bottom: 0;}
+</style>
 <article>
  <p>提供工作或动作的实时反馈，只用简单且灵活的进度条。</p>
  <p>进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer
@@ -17,11 +20,19 @@
          <td>
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
-                <span class="sr-only">40% Complete (success)</span>
+                <span class="sr-only"><span class="progressbar-value">40</span>% Complete (success)</span>
              </div>
            </div>
+            <p><strong class="text-primary"><span class="progressbar-value">40</span>%</strong></p>
+          </td>
+          <td>
+            <pre><code>&lt;div class=&quot;progress&quot;&gt;
+  &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;<span class="progressbar-value">40</span>&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: <span class="progressbar-value">40</span>%&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;40% Complete (success)&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            <p>默认的进度条。为<code>.progress-bar</code>应用CSS的width值（%）来更改进度值。</p>
          </td>
-          <td>默认的进度条</td>
        </tr>
      </tbody>
    </table>
@@ -34,68 +45,73 @@
    <p>为了一致的样式，进度条颜色使用与按钮相同的类。</p>
    <table class="table col-md-12">
      <tbody><tr>
-        <th width="40%">进度条</th>
+        <th width="40%">进度条。</th>
        <th>描述</th>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
-              <span class="sr-only">40% Complete (success)</span>
+              <span class="sr-only"><span class="progressbar-value">40</span>% Complete (success)</span>
            </div>
          </div>
+          <p><strong class="text-primary"><span class="progressbar-value">40</span>%</strong></p>
+        </td>
+        <td>
+          <p>主要/默认</p>
        </td>
-        <td>主要/默认</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
-              <span class="sr-only">40% Complete (success)</span>
+              <span class="sr-only"><span class="progressbar-value">40</span>% Complete (success)</span>
            </div>
          </div>
+          <p><strong class="text-info"><span class="progressbar-value">40</span>%</strong></p>
+        </td>
+        <td>
+          <p>信息：<code>.progress-bar-info</code></p>
        </td>
-        <td>信息</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
-              <span class="sr-only">40% Complete (success)</span>
+              <span class="sr-only"><span class="progressbar-value">40</span>% Complete (success)</span>
            </div>
          </div>
+          <p><strong class="text-success"><span class="progressbar-value">40</span>%</strong></p>
+        </td>
+        <td>
+          <p>成功：<code>.progress-bar-success</code></p>
        </td>
-        <td>成功</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
-              <span class="sr-only">60% Complete (warning)</span>
+              <span class="sr-only"><span class="progressbar-value">60</span>% Complete (warning)</span>
            </div>
          </div>
+          <p><strong class="text-warning"><span class="progressbar-value">40</span>%</strong></p>
+        </td>
+        <td>
+          <p>警告：<code>.progress-bar-warning</code></p>
        </td>
-        <td>警告</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
-            <span class="sr-only">80% Complete (danger)</span>
+            <span class="sr-only"><span class="progressbar-value">80</span>% Complete (danger)</span>
            </div>
          </div>
+          <p><strong class="text-danger"><span class="progressbar-value">40</span>%</strong></p>
        </td>
-        <td>危险</td>
-      </tr>
-      <tr>
        <td>
-          <div class="progress">
-            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
-              <span class="sr-only">40% Complete (success)</span>
-            </div>
-          </div>
+          <p>危险：<code>.progress-bar-danger</code></p>
        </td>
-        <td>成功</td>
      </tr>
    </tbody></table>
  </article>
@@ -114,38 +130,85 @@
        <td>
          <div class="progress progress-striped">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
-              <span class="sr-only">40% Complete (success)</span>
+              <span class="sr-only"><span class="progressbar-value">40</span>% Complete (success)</span>
            </div>
          </div>
+          <p><strong class="text-success"><span class="progressbar-value">40</span>%</strong></p>
        </td>
-        <td>条纹效果</td>
+        <td>条纹效果：<code>.progress-striped</code></td>
      </tr>
      <tr>
        <td>
          <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
-              <span class="sr-only">45% Complete</span>
+              <span class="sr-only"><span class="progressbar-value">45</span>% Complete</span>
            </div>
          </div>
+          <p><strong class="text-info"><span class="progressbar-value">40</span>%</strong></p>
        </td>
-        <td><p>运动效果。给<code>.progress-striped</code>加上<code>.active</code>使它由右向左运动。在IE的所有版本不可用。</p></td>
+        <td><p>动画效果。给<code>.progress-striped</code>加上<code>.active</code>使它由右向左运动。在IE的所有版本不可用。</p></td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 35%">
-              <span class="sr-only">35% Complete (success)</span>
+              <span class="sr-only"><span class="progressbar-value">35</span>% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 20%">
-              <span class="sr-only">20% Complete (warning)</span>
+              <span class="sr-only"><span class="progressbar-value">20</span>% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 10%">
-              <span class="sr-only">10% Complete (danger)</span>
+              <span class="sr-only"><span class="progressbar-value">10</span>% Complete (danger)</span>
            </div>
          </div>
        </td>
        <td><p>堆叠效果。把多个进度条放入同一个<code>.progress</code>，使它们堆叠。</p></td>
      </tr>
    </tbody></table>
+    <pre><code>&lt;!-- 条纹效果 --&gt;
+&lt;div class=&quot;progress progress-striped&quot;&gt;
+  &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar progress-bar-success&quot; aria-valuenow=&quot;<span class="progressbar-value">40</span>&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: <span class="progressbar-value">40</span>%&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;40% Complete (success)&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    <pre><code>&lt;!-- 动画效果 --&gt;
+&lt;div class=&quot;progress progress-striped active&quot;&gt;
+  &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar progress-bar-success&quot; aria-valuenow=&quot;<span class="progressbar-value">40</span>&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: <span class="progressbar-value">40</span>%&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;40% Complete (success)&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    <pre><code>&lt;!-- 堆叠效果 --&gt;
+&lt;div class=&quot;progress&quot;&gt;
+  &lt;div class=&quot;progress-bar progress-bar-success&quot; style=&quot;width: 35%&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;35% Complete (success)&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;progress-bar progress-bar-warning&quot; style=&quot;width: 20%&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;20% Complete (warning)&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;progress-bar progress-bar-danger&quot; style=&quot;width: 10%&quot;&gt;
+    &lt;span class=&quot;sr-only&quot;&gt;10% Complete (danger)&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
  </article>
 </section>
+
+<script>
+function afterPageLoad() {
+    var changeProgressBar = function() {
+        var $progressbar = $(this);
+        var $bar = $progressbar.children('.progress-bar');
+        if($bar.length === 1) {
+            var val = Math.round(Math.random() *  100);
+            $bar.css('width', val + '%').closest('tr').find('.progressbar-value').text(val);
+        } else {
+            var total = 100;
+            $bar.each(function() {
+                var val = Math.round(Math.random() *  Math.min(70, total));
+                total -= val;
+                $(this).css('width', val + '%').find('.progressbar-value').text(val);
+            })
+        }
+    }
+    $('#pageContent').on('mouseenter', '.progress', changeProgressBar);
+}
+</script>
--- a/docs/part/control-textbox.html
+++ b/docs/part/control-textbox.html
@@ -7,52 +7,87 @@
          <th width="200px">文本框</th>
          <th>描述</th>
        </tr>
+        <tr>
+          <td><input type="text" class="form-control" placeholder=
+          "用户名"></td>
+          <td><pre><code>&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;用户名&quot;&gt;</code></pre></td>
+        </tr>
        <tr>
          <td><input type="email" class="form-control" placeholder=
-          "Enter email"></td>
-          <td>input type=&#39;email&#39;</td>
+          "电子邮件"></td>
+          <td>
+            <pre><code>&lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;电子邮件&quot;&gt;</code></pre>
+          </td>
        </tr>
        <tr>
-          <td><input type="text" class="form-control" placeholder=
-          "Text input"></td>
-          <td>input type=&#39;text&#39;</td>
+          <td>
+            <div class="checkbox"><label><input type="checkbox"> 复选框</label></div>
+            <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled="disabled"> 被禁用的复选框 </label> </div>
+          </td>
+          <td>
+            <pre><code>&lt;div class=&quot;checkbox&quot;&gt;
+  &lt;label&gt;
+    &lt;input type=&quot;checkbox&quot;&gt; 复选框
+  &lt;/label&gt;
+&lt;/div&gt;</code></pre>
+            <pre><code>&lt;div class=&quot;checkbox disabled&quot;&gt;
+  &lt;label&gt;
+    &lt;input disabled type=&quot;checkbox&quot;&gt; 被禁用的复选框
+  &lt;/label&gt;
+&lt;/div&gt;</code></pre>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="radio"><label><input type="radio" name="radioOptionsExample" id="radioOptionsExample1"> 单选框1</label></div>
+            <div class="radio"><label><input type="radio" name="radioOptionsExample" id="radioOptionsExample2"> 单选框2</label></div>
+            <div class="radio disabled"> <label> <input type="radio" value="" disabled="disabled" name="radioOptionsExample" id="radioOptionsExample3"> 被禁用的单选框 </label> </div>
+          </td>
+          <td>
+            <pre><code>&lt;div class="radio"&gt;
+  &lt;label&gt;
+    &lt;input type="radio" name="radioOptionsExample" id="radioOptionsExample1"&gt; 单选框1
+  &lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="radio"&gt;
+  &lt;label&gt;
+    &lt;input type="radio" name="radioOptionsExample" id="radioOptionsExample2"&gt; 单选框2
+  &lt;/label&gt;
+&lt;/div&gt;</code></pre>
+            <pre><code>&lt;div class="radio disabled"&gt; 
+  &lt;label&gt;
+    &lt;input type="radio" value="" disabled="disabled" name="radioOptionsExample" id="radioOptionsExample3"&gt; 被禁用的单选框 
+  &lt;/label&gt;
+&lt;/div&gt;</code></pre>
+          </td>
        </tr>
        <tr>
-          <td><input type="checkbox" value=""></td>
-          <td>input type=&#39;checkbox&#39;</td>
+          <td>
+          <textarea class="form-control" rows="3" placeholder="可以输入多行文本"></textarea></td>
+          <td>
+            <pre><code>&lt;textarea class=&quot;form-control&quot; rows=&quot;3&quot; placeholder=&quot;可以输入多行文本&quot;&gt;&lt;/textarea&gt;</code></pre>
+          </td>
        </tr>
        <tr>
-          <td><input type="radio" checked></td>
-          <td>input type=&#39;radio&#39;&#39;</td>
+          <td><input type="file" value="" class="form-control"></td>
+          <td><pre><code>&lt;input type=&quot;file&quot; class=&quot;form-control&quot; value=&quot;&quot;&gt;</code></pre></td>
        </tr>
        <tr>
          <td>
-          <textarea class="form-control" rows="3"></textarea></td>
-          <td>textarea row=&#39;3&#39;</td>
-        </tr>
-        <tr>
-          <td><input type="file" value=""></td>
-          <td>file</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>
+            <select class="form-control">
+              <option value="">请选择一种水果</option>
+              <option value="apple">苹果</option>
+              <option value="banana">香蕉</option>
+              <option value="orange">桔子</option>
+            </select>
+          </td>
+          <td><pre><code>&lt;select class=&quot;form-control&quot;&gt;
+  &lt;option value=&quot;&quot;&gt;请选择一种水果&lt;/option&gt;
+  &lt;option value=&quot;apple&quot;&gt;苹果&lt;/option&gt;
+  &lt;option value=&quot;banana&quot;&gt;香蕉&lt;/option&gt;
+  &lt;option value=&quot;orange&quot;&gt;桔子&lt;/option&gt;
+  ...
+&lt;/select&gt;</code></pre></td>
        </tr>
      </tbody>
    </table>    
@@ -70,45 +105,56 @@
        </tr>
        <tr>
          <td><input class="form-control" type="text" placeholder=
-          "Disabled input here..." disabled>
+          "此文本框被禁用" disabled>
          <br></td>
-          <td>禁用：input type=&#39;text&#39; diabled</td>
+          <td><pre><code>&lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;此文本框被禁用&quot; disabled&gt;</code></pre></td>
        </tr>
        <tr>
-          <td><input class="form-control form-focus" type="text" placeholder=
-          "Focused input here...">
+          <td><input class="form-control" autofocus type="text" placeholder="请激活此文本框">
          <br></td>
-          <td>焦点：input type=&#39;text&#39; class=&#39;form-focus&#39;</td>
+          <td><pre><code>&lt;input class=&quot;form-control form-focus&quot; autofocus type=&quot;text&quot; placeholder=&quot;请激活此文本框&quot;&gt;</code></pre></td>
        </tr>
        <tr>
          <td>
            <div class="has-warning">
              <input class="form-control" type="text" placeholder=
-              "Has warnig input here...">
+              "好像不对。">
            </div>
            <br>
          </td>
-          <td>has-warning</td>
+          <td>
+            <pre><code>&lt;div class=&quot;has-warning&quot;&gt;
+  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Warning...&quot;&gt;
+&lt;/div&gt;</code></pre>
+          </td>
        </tr>
        <tr>
          <td>
            <div class="has-error">
              <input class="form-control" type="text" placeholder=
-              "Has error input here...">
+              "错的。">
            </div>
            <br>
          </td>
-          <td>has-error</td>
+          <td>
+            <pre><code>&lt;div class=&quot;has-error&quot;&gt;
+  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Warning...&quot;&gt;
+&lt;/div&gt;</code></pre>
+          </td>
        </tr>
        <tr>
          <td>
            <div class="has-success">
              <input class="form-control" type="text" placeholder=
-              "Has success input here...">
+              "对的！">
            </div>
            <br>
          </td>
-          <td>has-success</td>
+          <td>
+            <pre><code>&lt;div class=&quot;has-success&quot;&gt;
+  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Warning...&quot;&gt;
+&lt;/div&gt;</code></pre>
+          </td>
        </tr>
      </tbody>
    </table>    
@@ -116,7 +162,7 @@
 </section>

 <section>
-  <header><h3>高度变化</h3></header>
+  <header><h3>尺寸</h3></header>
  <article>
    <table class="table">
      <tbody>
@@ -125,19 +171,17 @@
          <th>描述</th>
        </tr>
        <tr>
-          <td><input class="form-control input-lg" type="text" placeholder=
-          ".input-lg"></td>
-          <td>.input-lg</td>
+          <td><input class="form-control input-lg" type="text" placeholder="较大尺寸的文本框"></td>
+          <td><pre><code>&lt;input class=&quot;form-control input-lg&quot; type=&quot;text&quot; placeholder=&quot;较大尺寸的文本框&quot;&gt;</code></pre></td>
        </tr>
        <tr>
          <td><input class="form-control" type="text" placeholder=
-          "Default input"></td>
-          <td>Default iinput</td>
+          "默认尺寸的文本框"></td>
+          <td><pre><code>&lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;默认尺寸的文本框&quot;&gt;</code></pre></td>
        </tr>
        <tr>
-          <td><input class="form-control input-sm" type="text" placeholder=
-          ".input-sm"></td>
-          <td>.input-sm</td>
+          <td><input class="form-control input-sm" type="text" placeholder="小尺寸的文本框"></td>
+          <td><pre><code>&lt;input class=&quot;form-control input-sm&quot; type=&quot;text&quot; placeholder=&quot;小尺寸的文本框&quot;&gt;</code></pre></td>
        </tr>
      </tbody>
    </table>
@@ -145,18 +189,32 @@
 </section>

 <section>
-  <header><h3>宽度变化</h3></header>
+  <header><h3>使用网格</h3></header>
  <article>
-    <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">
+    <p>使用网格来使用水平布局。</p>
+    <div class="example">
+      <div class="row">
+        <div class="col-xs-3">
+          <input type="text" class="form-control" placeholder=".col-xs-2">
+        </div>
+        <div class="col-xs-4">
+          <input type="text" class="form-control" placeholder=".col-xs-3">
+        </div>
+        <div class="col-xs-5">
+          <input type="text" class="form-control" placeholder=".col-xs-4">
+        </div>
      </div>
    </div>
+    <pre><code>&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-xs-3&quot;&gt;
+    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;.col-xs-2&quot;&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;col-xs-4&quot;&gt;
+    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;.col-xs-3&quot;&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;col-xs-5&quot;&gt;
+    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;.col-xs-4&quot;&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
  </article>
 </section>