diff --git a/README.md b/README.md
index 02a47aa..6f717a8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,13 @@
 # decision-plugin-demos
 
 ## Stage1: DOM操作
+如果你并未深入阅读过FineUI使用文档,仅仅追求最快效率的实现简单的需求,我们提供了对DOM操作的支持.如何直接操作DOM:
+
+1. 元素选择器: 绝大多数的FineUI控件都会设置基础className,可以通过开发者工具检查元素,查看对应的className.但这样具有局限性,如果querySelector返回的结果不唯一怎么办?
+2. BI.Plugin.registerObject: 通过查询组件shortcut列表,可以注册组件,在组件渲染后获取组件的实例. `BI.Plugin.registerObject(key,cb)`
+
+下面几个示例列举了常见的使用场景,通过用Jquery对元素进行增删改:
+
 
 1. [修改平台LOGO](./dom/修改平台logo.md)
 2. [修改平台标题](./dom/修改平台标题.md)
@@ -9,4 +16,10 @@
 5. [侧栏移动到右侧](./dom/侧栏移动到右侧.md)
 6. [贴底隐藏的侧边栏](./dom/贴底隐藏的侧边栏.md)
 7. [按鼠标中键关闭标签](./dom/按鼠标中键关闭标签.md)
-8. [全屏状态下左右切换按钮](./dom/全屏状态下左右切换按钮.md)
\ No newline at end of file
+8. [全屏状态下左右切换按钮](./dom/全屏状态下左右切换按钮.md)
+9. [一个图标+文字的组件](./dom/一个图标_文字的组件.md)
+
+## Stage2: 布局组件
+使用布局组件前请先查阅[布局组件API](https://kms.finedevelop.com/pages/viewpage.action?pageId=58494216),了解一下基础布局的使用场景和API.
+应用布局组件的好处是我们只需关心想要什么形式的布局,而无需关系怎么实现,免去了写各种繁杂的样式处理居中,浮动,边距等问题.
+1. [一个图标+文字的组件](./layout/一个图标_文字的组件.md)
\ No newline at end of file
diff --git a/dom/一个图标_文字的组件.md b/dom/一个图标_文字的组件.md
new file mode 100644
index 0000000..66695eb
--- /dev/null
+++ b/dom/一个图标_文字的组件.md
@@ -0,0 +1,38 @@
+# 一个图标+文字的组件
+图标+文字的形式是很常见的组件,如果用Jquery实现一个这样的组件可以这样
+## js
+```
+// 创建一个图标+文字的组件
+var IconText = BI.inherit(BI.Widget, {
+
+    render: function () {
+
+        var container = $("<div class=\"plugin-icon-text\"></div>");
+        var icon = $("<span class=\"plugin-icon-text-icon\"></span>");
+        var text = $("<div class=\"plugin-icon-text-text\">这是一个图标+文字的组件</div>");
+        container.append(icon);
+        container.append(text);
+        this.element.append(container);
+    }
+});
+BI.shortcut("dec.plugin.icon_text", IconText);
+```
+## css
+```
+.plugin-icon-text-icon {
+  width: 24px;
+  height: 24px;
+  background: url("./icon/upload_success.png") center, center, no-repeat;
+  background-size: contain;
+}
+
+.plugin-icon-text {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 10px;
+}
+```
+
+## 效果预览
+![](../screenshorts/6.png)
\ No newline at end of file
diff --git a/layout/一个图标_文字的组件.md b/layout/一个图标_文字的组件.md
new file mode 100644
index 0000000..f3b1734
--- /dev/null
+++ b/layout/一个图标_文字的组件.md
@@ -0,0 +1,33 @@
+# 一个图标+文字的组件
+由[一个图标+文字的组件](../dom/一个图标_文字的组件.md)可以看到,我们手写了外层布局的样式,手动把icon和text添加到了container中.如果用FineUI提供的布局组件改怎么写呢?
+通过查阅[FineUI基础教程](https://kms.finedevelop.com/pages/viewpage.action?pageId=58494116)来知悉如何创建一个组件,以及一些基础控件的使用,想象一下,我们要实现的图标+文字组件是怎样组合的:一个水平方向的布局,内部为一个图标和文字.于是我们需要用到`bi.vertical_adapt`布局加 `bi.icon` `bi.label` 两个控件,而图标多数情况下我们是需要水平垂直居中的,因此还需要`bi.center_adapt` 容纳一下.   
+## js
+```
+    // 创建一个图标+文字的组件
+    var IconText = BI.inherit(BI.Widget, {
+
+        render: function () {
+            return {
+                type: "bi.vertical_adapt",  //  首先是垂直居中布局容纳两个子元素
+                items: [
+                    {
+                        type: "bi.center_adapt",  //  水平垂直居中布局
+                        cls: "setting-font",  //  图标定义的类名
+                        items: [
+                            {
+                                type: "bi.icon"  //  图标组件,<i>
+                            }
+                        ],
+                        width: 24,
+                        height: 24
+                    }, {
+                        type: "bi.label",  //  label文字标签
+                        height: 24,
+                        text: "这是一个图标+文字的组件"
+                    }
+                ]
+            };
+        }
+    });
+    BI.shortcut("dec.plugin.icon_text", IconText);
+```
\ No newline at end of file
diff --git a/screenshorts/6.png b/screenshorts/6.png
new file mode 100644
index 0000000..3498874
Binary files /dev/null and b/screenshorts/6.png differ
diff --git a/screenshorts/7.png b/screenshorts/7.png
new file mode 100644
index 0000000..758e19b
Binary files /dev/null and b/screenshorts/7.png differ