* update document files.

4c80f9a5 · Catouse · 93ce3e21 · 4c80f9a5 · 4c80f9a5 · 4c80f9a5
5 changed file
--- a/docs/index.json
+++ b/docs/index.json
@@ -909,20 +909,13 @@
                "icon": "icon-comment-line",
                "desc": "弹出交互式面板",
                "name": "弹出面板",
+                "update": "1.5.0",
                "topics": [{
                    "name": "静态类型"
-                }, {
-                    "name": "不带箭头指示"
                }, {
                    "name": "动态演示"
                }, {
-                    "name": "指定html元素作为弹出内容"
-                }, {
-                    "name": "选项"
-                }, {
-                    "name": "方法"
-                }, {
-                    "name": "事件"
+                    "name": "用法"
                }],
                "filter": "tanchumianban tcmb"
            }, {
@@ -930,10 +923,13 @@
                "icon": "icon-collapse",
                "desc": "为元素提供折叠和展开功能",
                "name": "折叠",
+                "update": "1.5.0",
                "topics": [{
-                    "name": "类型"
+                    "name": "结构"
                }, {
-                    "name": "变化"
+                    "name": "折叠分组"
+                }, {
+                    "name": "使用方法"
                }],
                "filter": "zhedie zd"
            }, {

--- a/docs/part/javascript-collapse.md
+++ b/docs/part/javascript-collapse.md
@@ -7,134 +7,263 @@ filter: zhedie zd

 # 折叠

-## 使用方法
+折叠插件使用直观的动画来展示或显示内容。
+
+## 结构

-需要 [transition.js](http://v3.bootcss.com/javascript/#transitions) 支持。
+要实现折叠，一般需要两个元素：

-`.collapse` 隐藏条目, `.collapse.in` 显示条目。
+ - 折叠内容元素，包含使用动画来切换显示或隐藏的内容，需要添加 `.collapse` 类，如果被折叠内容在一开始就是显示的，还需要为其添加 `.in` 类；
+ - 触发元素，需要添加 `[data-toggle="collapse"]` 属性，并且使用 `[href]` 或 `[data-target="#selector"]` 属性来自定用于折叠内容元素。

-调用方式一：仅仅通过向页面元素添加 `data-toggle="collapse"` 和 `data-target` 就可以为其赋予控制可折叠页面元素的能力。 `data-target` 属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加 `.collapse` 。 如果你希望可折叠页面元素的默认状态是展开的，请添加 `.in` 。 为了给一组可折叠页面元素添加控制器，添加 `data-parent="#selector"` 即可
+### 示例

-调用方式二：手动触发 `$(".collapse").collapse()`
+<example>
+  <p>
+    <button type="button" class="btn" data-toggle="collapse" data-target="#collapseExample">使用 data-target 属性</button>
+    <a href="#collapseExample" data-toggle="collapse" class="btn btn-link">直接使用 href 属性</a>
+  </p>
+  <div class="collapse" id="collapseExample">
+    <div class="bg-primary with-padding">
+      <p>被折叠元素内容。</p>
+      <p>多个触发元素可以指向同一个折叠内容。</p>
+    </div>
+  </div>
+</example>
+
+```html
+<p>
+  <button type="button" class="btn" data-toggle="collapse" data-target="#collapseExample">使用 data-target 属性</button>
+  <a href="#collapseExample" data-toggle="collapse" class="btn btn-link">直接使用 href 属性</a>
+</p>
+<div class="collapse" id="collapseExample">
+  <div class="bg-primary with-padding">
+    <p>被折叠元素内容。</p>
+    <p>多个触发元素可以指向同一个折叠内容。</p>
+  </div>
+</div>
+```

-## 结合面板使用
+## 折叠分组

-<div class="example">
-  <div class="panel-group" id="accordion">
+多个折叠如果放置在同一个父级容器元素内，可以创建一个折叠分组（手风琴效果），只需要为每个触发元素添加 `[data-parent="#selector"]` 属性，其属性值指向父级容器即可。
+
+<example>
+  <div id="accordion">
+    <p>
+      <a href="#collapseExample1" data-toggle="collapse" data-parent="#accordion" class="btn btn-link">折叠 1</a>
+    </p>
+    <div class="collapse in" id="collapseExample1">
+      <div class="bg-primary with-padding">
+        <p>被折叠元素内容。</p>
+        <p>多个触发元素可以指向同一个折叠内容。</p>
+      </div>
+    </div>
+    <p>
+      <a href="#collapseExample2" data-toggle="collapse" data-parent="#accordion" class="btn btn-link collapsed">折叠 2</a>
+    </p>
+    <div class="collapse" id="collapseExample2">
+      <div class="bg-success with-padding">
+        <p>被折叠元素内容。</p>
+        <p>多个触发元素可以指向同一个折叠内容。</p>
+      </div>
+    </div>
+    <p>
+      <a href="#collapseExample3" data-toggle="collapse" data-parent="#accordion" class="btn btn-link collapsed">折叠 3</a>
+    </p>
+    <div class="collapse" id="collapseExample3">
+      <div class="bg-danger with-padding">
+        <p>被折叠元素内容。</p>
+        <p>多个触发元素可以指向同一个折叠内容。</p>
+      </div>
+    </div>
+  </div>
+</example>
+
+<style>
+#accordion > div + p {padding-top: 10px;}
+</style>
+
+### 结合面板组使用
+
+<example>
+  <div class="panel-group" id="accordionPanels" aria-multiselectable="true">
    <div class="panel panel-default">
-      <div class="panel-heading">
+      <div class="panel-heading" id="headingOne">
        <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Item 1</a>
+          <a data-toggle="collapse" data-parent="#accordionPanels" href="#collapseOne">
+            折叠面板 1
+          </a>
        </h4>
      </div>
-      <div id="collapseOne" class="panel-collapse collapse fade">
-        <div class="panel-body">
-          The content of Item1.
-          <code>.panel-collapse .collapse .fade</code>
-        </div>
+      <div id="collapseOne" class="panel-collapse collapse in">
+        <div class="panel-body">折叠面板内容 1</div>
      </div>
    </div>
    <div class="panel panel-default">
-      <div class="panel-heading">
+      <div class="panel-heading" id="headingTwo">
        <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Item 2</a>
+          <a class="collapsed" data-toggle="collapse" data-parent="#accordionPanels" href="#collapseTwo">
+            折叠面板 2
+          </a>
        </h4>
      </div>
-      <div id="collapseTwo" class="panel-collapse collapse in">
-        <div class="panel-body">
-          <p>
-            The content of Item2.
-            <code>.panel-collapse .collapse .in</code>
-            默认显示。
-          </p>
-        </div>
+      <div id="collapseTwo" class="panel-collapse collapse">
+        <div class="panel-body">折叠面板内容 2</div>
      </div>
    </div>
    <div class="panel panel-default">
-      <div class="panel-heading">
+      <div class="panel-heading" id="headingThree">
        <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Item 3</a>
+          <a class="collapsed" data-toggle="collapse" data-parent="#accordionPanels" href="#collapseThree">
+            折叠面板 3
+          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
-        <div class="panel-body">
-          The content of item3.
-          <code>.panel-collapse .collapse</code>
-        </div>
+        <div class="panel-body">折叠面板内容 3</div>
      </div>
    </div>
  </div>
+</example>
+
+```html
+<div class="panel-group" id="accordionPanels" aria-multiselectable="true">
+  <div class="panel panel-default">
+    <div class="panel-heading" id="headingOne">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordionPanels" href="#collapseOne">
+          折叠面板 1
+        </a>
+      </h4>
+    </div>
+    <div id="collapseOne" class="panel-collapse collapse in">
+      <div class="panel-body">折叠面板内容 1</div>
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading" id="headingTwo">
+      <h4 class="panel-title">
+        <a class="collapsed" data-toggle="collapse" data-parent="#accordionPanels" href="#collapseTwo">
+          折叠面板 2
+        </a>
+      </h4>
+    </div>
+    <div id="collapseTwo" class="panel-collapse collapse">
+      <div class="panel-body">折叠面板内容 2</div>
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading" id="headingThree">
+      <h4 class="panel-title">
+        <a class="collapsed" data-toggle="collapse" data-parent="#accordionPanels" href="#collapseThree">
+          折叠面板 3
+        </a>
+      </h4>
+    </div>
+    <div id="collapseThree" class="panel-collapse collapse">
+      <div class="panel-body">折叠面板内容 3</div>
+    </div>
+  </div>
 </div>
+```

-## 结合按钮使用
+## 使用方法

-<div class="example" contenteditable="true">
-  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapseButton">hulala</button>
-  <div id="collapseButton" class="in" style="height: auto;">Ho la la hu la la, hu la hu la.</div>
-</div>
+### 手动初始化
+
+通常情况下，直接使用 `[data-*]` 属性就可以使折叠正常工作，但也提供了手动使用 JavaScript 代码进行初始化方式。

-## 方法和事件
+ - `$().collapse()`
+ - `$().collapse(options)`

-<table class="table table-bordered table-striped">
+其中 `options` 参数为可以选的，用于指定初始化的选项，可用选项如下：
+
+<table class="table table-bordered">
  <thead>
    <tr>
-      <th style="width: 80px;">方法</th>
-      <th>例子</th>
+      <th>选项</th>
+      <th>类型</th>
+      <th>默认值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
-      <td>.collapse(options)</td>
-      <td>`$('#myCollapse').collapse({ toggle: false })`</td>
-      <td>赋予页面元素可折叠功能。接受一个可选的object作为参数。</td>
-    </tr>
-    <tr>
-      <td>.collapse('toggle')</td>
-      <td>`$('#myCollapse').collapse('toggle')`</td>
-      <td>展示或隐藏一个可折叠的页面元素。</td>
+      <td>`parent`</td>
+      <td>selector | `false`</td>
+      <td>`false`</td>
+      <td>可用设定一个选择器字符串，用于指定折叠分组的父级元素。</td>
    </tr>
    <tr>
-      <td>.collapse('show')</td>
-      <td>`$('#myCollapse').collapse('show')`</td>
-      <td>展示一个可折叠页面元素。</td>
-    </tr>
-    <tr>
-      <td>.collapse('hide')</td>
-      <td>`$('#myCollapse').collapse('hide')`</td>
-      <td>隐藏一个可折叠页面元素。</td>
+      <td>`toggle`</td>
+      <td>'true' | `false`</td>
+      <td>`true`</td>
+      <td>是否在初始化时显示折叠内容。</td>
    </tr>
  </tbody>
 </table>

-<table class="table table-bordered table-striped">
+```javascript
+$('#myCollapseContent').collapse({
+   toggle: false
+});
+```
+
+### 方法
+
+#### `$().collapse('show')`
+
+显示折叠内容。
+
+#### `$().collapse('hide')`
+
+隐藏折叠内容。
+
+#### `$().collapse('toggle')`
+
+切换显示折叠内容。
+
+#### 调用方法
+
+```javascript
+// 显示折叠内容
+$('#myCollapseContent').collapse('show')
+```
+
+### 事件
+
+当折叠内容显示或隐藏时会在折叠内容元素上触发以下事件：
+
+<table class="table table-bordered">
  <thead>
    <tr>
-      <th style="width: 80px;">事件</th>
-      <th>使用</th>
+      <th>事件</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
-      <td>show.zui.collapse</td>
-      <td>`$('#myCollapse').on('show.zui.collapse', function () { // do something… })`</td>
-      <td>当 `show` 方法被调用时，此事件将被立即触发。</td>
+      <td>`show.zui.collapse`</td>
+      <td>当折叠内容显示时触发。</td>
    </tr>
    <tr>
-      <td>shown.zui.collapse</td>
-      <td>`$('#myCollapse').on('shown.zui.collapse', function () { // do something… })`</td>
-      <td>当可折叠页面元素显示出来之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
+      <td>`shown.zui.collapse`</td>
+      <td>当折叠内容显示后触发，此时动画已执行完毕。</td>
    </tr>
    <tr>
-      <td>hide.zui.collapse</td>
-      <td>`$('#myCollapse').on('hide.zui.collapse', function () { // do something… })`</td>
-      <td>当 `hide` 方法被调用时，此事件将被立即触发。</td>
+      <td>`hide.zui.collapse`</td>
+      <td>当折叠内容隐藏时触发。</td>
    </tr>
    <tr>
-      <td>hidden.zui.collapse</td>
-      <td>`$('#myCollapse').on('hidden.zui.collapse', function () { // do something… })`</td>
-      <td>当可折叠页面元素隐藏之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
+      <td>`hidden.zui.collapse`</td>
+      <td>当折叠内容隐藏后触发，此时动画已执行完毕。</td>
    </tr>
  </tbody>
 </table>
+
+```
+$('#myCollapseContent').on('hidden.zui.collapse', function () {
+    console.log('折叠内容已隐藏。');
+})
+```
--- a/docs/part/javascript-popover.md
+++ b/docs/part/javascript-popover.md
@@ -8,7 +8,7 @@ filter: tanchumianban tcmb
 # 弹出面板

 <style>
-.popover-examples .popover
+.example-popover-static .popover
 {
  position: relative;
  display: block;
@@ -21,303 +21,315 @@ filter: tanchumianban tcmb

 ## 静态类型

-<div class="example popover-examples">
+<div class="example example-popover-static clearfix">
  <div class="popover top">
    <div class="arrow"></div>
-    <h3 class="popover-title">Popover top</h3>
+    <h3 class="popover-title">从上方弹出</h3>
    <div class="popover-content">
-      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-      Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+      <h4>江雪 <small>唐·柳宗元</small></h4>
+      <p>千山鸟飞绝，万径人踪灭。</p>
+      <p>孤舟蓑笠翁，独钓寒江雪。</p>
    </div>
  </div>
  <div class="popover right">
    <div class="arrow"></div>
-    <h3 class="popover-title">Popover right</h3>
+    <h3 class="popover-title">从右侧弹出</h3>
    <div class="popover-content">
-      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-      Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+      <h4>江雪 <small>唐·柳宗元</small></h4>
+      <p>千山鸟飞绝，万径人踪灭。</p>
+      <p>孤舟蓑笠翁，独钓寒江雪。</p>
    </div>
  </div>
  <div class="popover bottom">
    <div class="arrow"></div>
-    <h3 class="popover-title">Popover bottom</h3>
+    <h3 class="popover-title">从下方弹出</h3>
    <div class="popover-content">
-      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-      Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+      <h4>江雪 <small>唐·柳宗元</small></h4>
+      <p>千山鸟飞绝，万径人踪灭。</p>
+      <p>孤舟蓑笠翁，独钓寒江雪。</p>
    </div>
  </div>
  <div class="popover left">
    <div class="arrow"></div>
-    <h3 class="popover-title">Popover left</h3>
+    <h3 class="popover-title">从左侧弹出</h3>
    <div class="popover-content">
-      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-      Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+      <h4>江雪 <small>唐·柳宗元</small></h4>
+      <p>千山鸟飞绝，万径人踪灭。</p>
+      <p>孤舟蓑笠翁，独钓寒江雪。</p>
    </div>
  </div>
-  <div class="clearfix"></div>
-</div>
-
-### 不带箭头指示
-
-<div class="example popover-examples">
-  <div class="popover">
-    <div class="arrow"></div>
-    <h3 class="popover-title">Popover top</h3>
+  <div class="popover left">
+    <h3 class="popover-title">不带箭头</h3>
    <div class="popover-content">
-      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
-      Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+      <h4>江雪 <small>唐·柳宗元</small></h4>
+      <p>千山鸟飞绝，万径人踪灭。</p>
+      <p>孤舟蓑笠翁，独钓寒江雪。</p>
    </div>
  </div>
-  <div class="clearfix"></div>
 </div>

-## 动态演示
+<template class="pre-scrollable linenums"/>

-<div class="example">
-  <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="我是内容！" data-original-title="我时标题">打开弹出框</a>
+```html
+<div class="popover top">
+  <div class="arrow"></div>
+  <h3 class="popover-title">从上方弹出</h3>
+  <div class="popover-content">
+    <h4>江雪 <small>唐·柳宗元</small></h4>
+    <p>千山鸟飞绝，万径人踪灭。</p>
+    <p>孤舟蓑笠翁，独钓寒江雪。</p>
+  </div>
 </div>
-
-### 在不同方向弹出
-
-<div class="example text-center">
-  <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="我是内容。" data-original-title="我时标题" title="">左侧弹框</button>
-  <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="我是内容。" data-original-title="我时标题" title="">上方弹框</button>
-  <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="我是内容。" data-original-title="我时标题" title="">下方弹框</button>
-  <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="我是内容。" data-original-title="我时标题" title="">右侧弹框</button>
+<div class="popover right">
+  <div class="arrow"></div>
+  <h3 class="popover-title">从右侧弹出</h3>
+  <div class="popover-content">
+    <h4>江雪 <small>唐·柳宗元</small></h4>
+    <p>千山鸟飞绝，万径人踪灭。</p>
+    <p>孤舟蓑笠翁，独钓寒江雪。</p>
+  </div>
 </div>
-
-### 指定html元素作为弹出内容
-
-<div class="example">
-  <a href="##" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="right" data-target="$next">打开弹出框</a>
-  <div id="popoverContent1" class="popover">
-    <h3 class="popover-title">Popover top</h3>
-    <table class="table">
-      <tbody><tr>
-        <td>Lorem ipsum dolor.</td>
-        <td>Nisi, ad, quisquam!</td>
-        <td>Eum, excepturi, placeat.</td>
-      </tr>
-      <tr>
-        <td>Lorem ipsum dolor.</td>
-        <td>Explicabo, nobis, nesciunt!</td>
-        <td>Sequi, doloribus, natus.</td>
-      </tr>
-      <tr>
-        <td>Lorem ipsum dolor.</td>
-        <td>Ipsum, suscipit, quibusdam?</td>
-        <td>Minus, tenetur, neque.</td>
-      </tr>
-    </tbody></table>
+<div class="popover bottom">
+  <div class="arrow"></div>
+  <h3 class="popover-title">从下方弹出</h3>
+  <div class="popover-content">
+    <h4>江雪 <small>唐·柳宗元</small></h4>
+    <p>千山鸟飞绝，万径人踪灭。</p>
+    <p>孤舟蓑笠翁，独钓寒江雪。</p>
+  </div>
+</div>
+<div class="popover left">
+  <div class="arrow"></div>
+  <h3 class="popover-title">从左侧弹出</h3>
+  <div class="popover-content">
+    <h4>江雪 <small>唐·柳宗元</small></h4>
+    <p>千山鸟飞绝，万径人踪灭。</p>
+    <p>孤舟蓑笠翁，独钓寒江雪。</p>
  </div>
 </div>
+<div class="popover left">
+  <h3 class="popover-title">不带箭头</h3>
+  <div class="popover-content">
+    <h4>江雪 <small>唐·柳宗元</small></h4>
+    <p>千山鸟飞绝，万径人踪灭。</p>
+    <p>孤舟蓑笠翁，独钓寒江雪。</p>
+  </div>
+</div>
+```

-## 用法
+## 动态演示

-通过JavaScript启用弹出框：
+<div class="example">
+  <button class="btn btn-danger" data-toggle="popover" title="江雪" data-content="千山鸟飞绝，万径人踪灭。">显示/隐藏弹出面板</button>
+</div>

-```
-$('#example').popover(options)</code></pre>
+```html
+<button class="btn btn-danger" data-toggle="popover" title="江雪" data-content="千山鸟飞绝，万径人踪灭。">显示/隐藏弹出面板</button>
 ```

-### 使用要点
+```javascript
+$('[data-toggle="popover"]').popover();
+```

-*   弹出框依赖 [工具提示插件](#javascript/tooltips) ，因此需要先加载工具提示插件。
-*   出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 **你必须自己初始化他们**。
-*   弹出框在按钮组和输入框组中使用时，需要额外的设置：当提示框与 `.btn-group` 或 `.input-group` 联合使用时，你需要指定 `container: 'body'`选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
-*   在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来：为了给 `disabled` 或 `.disabled` 元素添加弹出框时，将需要增加弹出框的页面元素包裹在一个 `<div>` 中，然后对这个 `<div>` 元素应用弹出框。
+### 在不同方向弹出

-## 选项
-
-可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到`data-`之后，例如`data-animation=""`。
-
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 100px;">名称</th>
-        <th style="width: 100px;">类型</th>
-        <th style="width: 50px;">默认值</th>
-        <th>描述</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>animation</td>
-        <td>boolean</td>
-        <td>true</td>
-        <td>是否应用淡入淡出动画。</td>
-      </tr>
-      <tr>
-        <td>html</td>
-        <td>boolean</td>
-        <td>false</td>
-        <td>
-          是否允许内容中包含html。
-        </td>
-      </tr>
-      <tr>
-        <td>placement</td>
-        <td>string | function</td>
-        <td>'right'</td>
-        <td>
-          top | bottom | left | right | auto.
-          <br>
-          显示位置
-        </td>
-      </tr>
-      <tr>
-        <td>selector</td>
-        <td>string</td>
-        <td>false</td>
-        <td>
-          当需要给动态的DOM元素应用工具提示时，需要手动制定选择器。
-        </td>
-      </tr>
-      <tr>
-        <td>trigger</td>
-        <td>string</td>
-        <td>'click'</td>
-        <td>click | hover | focus | manual，决定交互方式。</td>
-      </tr>
-      <tr>
-        <td>title</td>
-        <td>string | function</td>
-        <td>''</td>
-        <td>
-          标题
-        </td>
-      </tr>
-      <tr>
-        <td>content</td>
-        <td>string | function</td>
-        <td>''</td>
-        <td>
-          内容
-        </td>
-      </tr>
-      <tr>
-        <td>delay</td>
-        <td>number | object</td>
-        <td>0</td>
-        <td>
-          <p>
-            是否延迟展示。
-          </p>
-          <p>
-            <code>delay: { show: 500, hide: 100 }</code>
-          </p>
-        </td>
-      </tr>
-      <tr>
-        <td>container</td>
-        <td>string | false</td>
-        <td>false</td>
-        <td>
-          <p>
-            决定相对位置的父级容器。
-          </p>
-        </td>
-      </tr>
-      <tr>
-        <td>tipClass</td>
-        <td>string</td>
-        <td></td>
-        <td>为动态生成的<code>div.popover</code>标签添加额外的CSS CLASS。</td>
-      </tr>
-      <tr>
-        <td>tipId</td>
-        <td>string</td>
-        <td></td>
-        <td>为动态生成的<code>div.popover</code>标签设置一个id属性。</td>
-      </tr>
-    </tbody>
-  </table>
+<div class="example text-center">
+  <button type="button" class="btn" data-toggle="popover" data-placement="left" data-content="千山鸟飞绝，万径人踪灭。" title="江雪">从左侧弹出</button>
+  <button type="button" class="btn" data-toggle="popover" data-placement="top" data-content="千山鸟飞绝，万径人踪灭。" title="江雪">从上方弹出</button>
+  <button type="button" class="btn" data-toggle="popover" data-placement="bottom" data-content="千山鸟飞绝，万径人踪灭。" title="江雪">从下方弹出</button>
+  <button type="button" class="btn" data-toggle="popover" data-placement="right" data-content="千山鸟飞绝，万径人踪灭。" title="江雪">从右侧弹出</button>
 </div>

-<div>
-  <h4>为单个弹出框应用data属性</h4>
-  <p>对单个弹出框可以通过data属性单独指定选项，如上所示。</p>
-</div>
+```html
+<button type="button" class="btn" data-toggle="popover" data-placement="left" data-content="千山鸟飞绝，万径人踪灭。" title="江雪">从左侧弹出</button>
+```

-## 方法
+```html
+<button type="button" class="btn" data-toggle="popover" data-placement="top" data-content="千山鸟飞绝，万径人踪灭。" title="江雪">从上方弹出</button>
+```

+```html
+<button type="button" class="btn" data-toggle="popover" data-placement="bottom" data-content="千山鸟飞绝，万径人踪灭。" title="江雪">从下方弹出</button>
 ```
-$('#element').popover(options)
+
+```html
+<button type="button" class="btn" data-toggle="popover" data-placement="right" data-content="千山鸟飞绝，万径人踪灭。" title="江雪">从右侧弹出</button>
+```
+
+```javascript
+$('[data-toggle="popover"]').popover();
 ```

-为一组元素初始化弹出框。
+## 用法

-### .popover('show')
+### 初始化
+
+出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 **你必须自己初始化他们**。
+
+ - `$().popover()`
+ - `$().popover(options)`
+
+参数 `options` 用于设置初始化选项，是可以选的。初始化选项也可以通过元素上的 `[data-*]` 属性来设置。
+
+### 选项
+
+可用的初始化选项如下：
+
+<table class="table table-bordered table-striped">
+  <thead>
+    <tr>
+      <th style="width: 100px;">名称</th>
+      <th style="width: 100px;">类型</th>
+      <th style="width: 50px;">默认值</th>
+      <th>描述</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`animation`</td>
+      <td>`true`、`false`</td>
+      <td>`true`</td>
+      <td>是否应用淡入淡出动画。</td>
+    </tr>
+    <tr>
+      <td>`container`</td>
+      <td>字符串或 `false`</td>
+      <td>`false`</td>
+      <td>可以设置为一个 CSS 选择器字符串用于指定动态创建的弹出面板元素被添加到的父级容器元素，例如 `container: 'body'`。默认为 `false`，此时动态创建的弹出面板元素被添加到触发元素所在的父级元素。</td>
+    </tr>
+    <tr>
+      <td>`content`</td>
+      <td>字符串或函数</td>
+      <td>`''`</td>
+      <td>用设定弹出面板显示的内容，如果指定为函数，则应该在函数内返回用于内容的字符串。</td>
+    </tr>
+    <tr>
+      <td>`delay`</td>
+      <td>数字或对象</td>
+      <td>`0`</td>
+      <td>如果指定为数字，则在指定数值的毫秒数后再显示。如果指定为对象，则可以分别为显示或隐藏之前延迟的数值，例如：`delay: { show: 500, hide: 100 }`。</td>
+    </tr>
+    <tr>
+      <td>`html`</td>
+      <td>`true`、`false`</td>
+      <td>`false`</td>
+      <td>是否允许弹出面板内容包含 HTML 格式源码。如果设置为 false，则仅仅使用 jQuery 的 text() 方法来设置弹出面板内容。</td>
+    </tr>
+    <tr>
+      <td>`placement`</td>
+      <td>字符串或函数</td>
+      <td>`'right'`</td>
+      <td>设置弹出面板显示的位置，可选值有：`'top'`, `'bottom'`, `'left'`, `'right'`, `'auto'`。如果设置为 `'auto'`，则会自动决定位置。也可以指定为一个函数，来动态返回应该显示的位置。</td>
+    </tr>
+    <tr>
+      <td>`selector`</td>
+      <td>字符串或 `false`</td>
+      <td>`false`</td>
+      <td>如果指定了该选项，则会在代理元素来触发显示弹出面板，这样可以对于一些动态内容使用弹出面板。</td>
+    </tr>
+    <tr>
+      <td>`template`</td>
+      <td>字符串</td>
+      <td>`'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'`</td>
+      <td>HTML 模板字符串用来创建弹出面板显示内容元素。要求顶级元素必须有 `.popover` 类，弹出面板的内容会设置为 `.popover-content` 的内容，标题会设置为 `.popover-title` 的内容，`.arrow` 将作为箭头元素。</td>
+    </tr>
+    <tr>
+      <td>`title`</td>
+      <td>字符串或函数</td>
+      <td>`''`</td>
+      <td>用设定弹出面板显示的标题，如果指定为函数，则应该在函数内返回用于标题的字符串。</td>
+    </tr>
+    <tr>
+      <td>`trigger`</td>
+      <td>`string`</td>
+      <td>`'click'`</td>
+      <td>指定哪些事件会触发显示弹出面板，多个事件用空格隔开，可选值包括：`'click'`、`'hover'`、`'focus'`、`'manual'`。如果设定为 `'manual'` 则需要用户通过 JavaScript 手动显示或隐藏弹出面板。</td>
+    </tr>
+    <tr>
+      <td>`tipClass`</td>
+      <td>字符串</td>
+      <td>`''`</td>
+      <td>为动态生成的 `.popover` 元素添加额外的 CSS 类。</td>
+    </tr>
+    <tr>
+      <td>`tipId`</td>
+      <td>字符串</td>
+      <td>`''`</td>
+      <td>为动态生成的 `.popover` 元素设置 `[id]` 属性。</td>
+    </tr>
+  </tbody>
+</table>
+
+### 方法
+
+#### <span class="code">$().popover('show')</span>

 显示弹出框。

 ```
-$('#element').popover('show');
+$('#myPopover').popover('show');
 ```

-### .popover('hide')
+#### <span class="code">$().popover('hide')</span>

 隐藏弹出框。

 ```
-$('#element').popover('hide');
+$('#myPopover').popover('hide');
 ```

-### .popover('toggle')
+#### <span class="code">$().popover('toggle')</span>

 展示或隐藏弹出框。

 ```
-$('#element').popover('toggle');
+$('#myPopover').popover('toggle');
 ```

-### .popover('destroy')
+#### <span class="code">$().popover('destroy')</span>

 隐藏并销毁弹出框。

 ```
-$('#element').popover('destroy');
+$('#myPopover').popover('destroy');
 ```

-## 事件
-
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 150px;">事件类型</th>
-        <th>描述</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>show.zui.popover</td>
-        <td>
-          当
-          <code>show</code>
-          方法被调用之后，此事件将被立即触发。
-        </td>
-      </tr>
-      <tr>
-        <td>shown.zui.popover</td>
-        <td>当弹出框展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
-      </tr>
-      <tr>
-        <td>hide.zui.popover</td>
-        <td>
-          当
-          <code>hide</code>
-          方法被调用之后，此事件被触发。
-        </td>
-      </tr>
-      <tr>
-        <td>hidden.zui.popover</td>
-        <td>当弹出框被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+### 事件
+
+当弹出面板显示或隐藏时会在触发元素上触发如下事件：
+
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th style="width: 150px;">事件类型</th>
+      <th>描述</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`show.zui.popover`</td>
+      <td>当 `show`方法被调用之后，此事件将被立即触发。</td>
+    </tr>
+    <tr>
+      <td>`shown.zui.popover`</td>
+      <td>当弹出框展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
+    </tr>
+    <tr>
+      <td>`hide.zui.popover`</td>
+      <td>当 `hide`方法被调用之后，此事件被触发。</td>
+    </tr>
+    <tr>
+      <td>`hidden.zui.popover`</td>
+      <td>当弹出框被隐藏之后（同时 CSS 过渡效果执行完之后），此事件被触发。</td>
+    </tr>
+  </tbody>
+</table>
+
+### 使用要点
+
+*   弹出框依赖 [工具提示插件](#javascript/tooltips) ，因此需要先加载工具提示插件。
+*   弹出框在按钮组和输入框组中使用时，需要额外的设置：当提示框与 `.btn-group` 或 `.input-group` 联合使用时，你需要指定 `container: 'body'`选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
+*   在禁止使用的页面元素上使用弹出框时需要额外增加一个元素将其包裹起来：为了给 `disabled` 或 `.disabled` 元素添加弹出框时，将需要增加弹出框的页面元素包裹在一个 `<div>` 中，然后对这个 `<div>` 元素应用弹出框。

 <script>
 function afterPageLoad() {

--- a/docs/part/javascript-tab.md
+++ b/docs/part/javascript-tab.md
@@ -23,9 +23,9 @@ filter: biaoqianye bqy

 <example class="example-tabs-with-nav">
  <ul class="nav nav-tabs">
-    <li class="active"><a href="###" data-tab="#tabContent1">标签1</a></li>
-    <li><a href="###" data-tab="#tabContent2">标签2</a></li>
-    <li><a href="###" data-tab="#tabContent3">标签3</a></li>
+    <li class="active"><a data-tab href="#tabContent1">标签1</a></li>
+    <li><a data-tab href="#tabContent2">标签2</a></li>
+    <li><a data-tab href="#tabContent3">标签3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tabContent1">
@@ -46,9 +46,9 @@ filter: biaoqianye bqy

 ```html
 <ul class="nav nav-tabs">
-  <li class="active"><a href="###" data-tab="#tabContent1">标签1</a></li>
-  <li><a href="###" data-tab="#tabContent2">标签2</a></li>
-  <li><a href="###" data-tab="#tabContent3">标签3</a></li>
+  <li class="active"><a data-tab href="#tabContent1">标签1</a></li>
+  <li><a data-tab href="#tabContent2">标签2</a></li>
+  <li><a data-tab href="#tabContent3">标签3</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane active" id="tabContent1">

--- a/docs/part/view-datatable.md
+++ b/docs/part/view-datatable.md
@@ -455,6 +455,11 @@ $('table.datatable').datatable({
 *   `'up'`：默认使用升序排序；</td>
      <td>如果排序启用时定义此列是否可以排序。</td>
    </tr>
+    <tr>
+      <td>`ignore`</td>
+      <td>`true` | `false`(默认)</td>
+      <td>是否在构建数据表格时忽略该列，不会在页面显示。</td>
+    </tr>
  </tbody>
 </table>

@@ -469,11 +474,26 @@ $('table.datatable').datatable({
      <th>合法值</th>
      <th>说明</th>
    </tr>
+    <tr>
+      <td>`id`</td>
+      <td>全局唯一字符串</td>
+      <td>该行的唯一编号，如果不指定则由程序按顺序生成。</td>
+    </tr>
    <tr>
      <td>`checked`</td>
      <td>`true` | `false`(默认)</td>
      <td>此行数据在开始时是否为选中状态。</td>
    </tr>
+    <tr>
+      <td>`cssClass`</td>
+      <td>字符串，默认 `''`</td>
+      <td>用于添加到生成的行元素 `<tr>` 上的 CSS 类。</td>
+    </tr>
+    <tr>
+      <td>`css`</td>
+      <td>字符串，默认 `''`</td>
+      <td>用设置 `<tr>` 上的 `[style]` 属性，用于自定义行样式。</td>
+    </tr>
    <tr>
      <td>`data`</td>
      <td>数组</td>