diff --git a/src/core/wrapper/layout/adapt/absolute.center.js b/src/core/wrapper/layout/adapt/absolute.center.js
index a808f53c2a..60838983e6 100644
--- a/src/core/wrapper/layout/adapt/absolute.center.js
+++ b/src/core/wrapper/layout/adapt/absolute.center.js
@@ -6,7 +6,7 @@
 BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.AbsoluteCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-absolute-center-layout",
+            baseCls: "bi-abs-c-a",
             hgap: 0,
             lgap: 0,
             rgap: 0,
diff --git a/src/core/wrapper/layout/adapt/absolute.horizontal.js b/src/core/wrapper/layout/adapt/absolute.horizontal.js
index d7e9c6f049..293970c7bf 100644
--- a/src/core/wrapper/layout/adapt/absolute.horizontal.js
+++ b/src/core/wrapper/layout/adapt/absolute.horizontal.js
@@ -6,7 +6,7 @@
 BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.AbsoluteHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-absolute-horizontal-layout",
+            baseCls: "bi-abs-h-a",
             hgap: 0,
             lgap: 0,
             rgap: 0,
diff --git a/src/core/wrapper/layout/adapt/absolute.vertical.js b/src/core/wrapper/layout/adapt/absolute.vertical.js
index 3fd98837db..bebebc2df7 100644
--- a/src/core/wrapper/layout/adapt/absolute.vertical.js
+++ b/src/core/wrapper/layout/adapt/absolute.vertical.js
@@ -6,7 +6,7 @@
 BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.AbsoluteVerticalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-absolute-vertical-layout",
+            baseCls: "bi-abs-v-a",
             hgap: 0,
             lgap: 0,
             rgap: 0,
diff --git a/src/core/wrapper/layout/adapt/adapt.center.js b/src/core/wrapper/layout/adapt/adapt.center.js
index 10a3c2166f..4158a3ccc1 100644
--- a/src/core/wrapper/layout/adapt/adapt.center.js
+++ b/src/core/wrapper/layout/adapt/adapt.center.js
@@ -6,7 +6,7 @@
 BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-center-adapt-layout",
+            baseCls: "bi-c-a",
             horizontalAlign: BI.HorizontalAlign.Center,
             columnSize: [],
             scrollx: false,
diff --git a/src/core/wrapper/layout/adapt/adapt.horizontal.js b/src/core/wrapper/layout/adapt/adapt.horizontal.js
index f4e0d136d6..fb98bc9304 100644
--- a/src/core/wrapper/layout/adapt/adapt.horizontal.js
+++ b/src/core/wrapper/layout/adapt/adapt.horizontal.js
@@ -6,7 +6,7 @@
 BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.HorizontalAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-horizontal-adapt-layout",
+            baseCls: "bi-h-a",
             verticalAlign: BI.VerticalAlign.Top,
             columnSize: [],
             scrollx: false,
diff --git a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
index 8f69a852d3..5a9cb61607 100644
--- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
@@ -10,7 +10,7 @@
 BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-left-right-vertical-adapt-layout",
+            baseCls: "bi-lr-v-a",
             items: {},
             llgap: 0,
             lrgap: 0,
@@ -78,7 +78,7 @@ BI.shortcut("bi.left_right_vertical_adapt", BI.LeftRightVerticalAdaptLayout);
 BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-left-vertical-adapt-layout",
+            baseCls: "bi-l-v-a",
             items: [],
             lgap: 0,
             rgap: 0,
@@ -124,7 +124,7 @@ BI.shortcut("bi.left_vertical_adapt", BI.LeftVerticalAdaptLayout);
 BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.RightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-right-vertical-adapt-layout",
+            baseCls: "bi-r-v-a",
             items: [],
             lgap: 0,
             rgap: 0,
@@ -166,4 +166,4 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
         this.layout.populate.apply(this, arguments);
     }
 });
-BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout);
\ No newline at end of file
+BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout);
diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js
index 9696303ebb..27d6992f4a 100644
--- a/src/core/wrapper/layout/adapt/adapt.table.js
+++ b/src/core/wrapper/layout/adapt/adapt.table.js
@@ -6,7 +6,7 @@
 BI.TableAdaptLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-table-adapt-layout",
+            baseCls: "bi-t-a",
             columnSize: [],
             verticalAlign: BI.VerticalAlign.Top,
             horizontalAlign: BI.HorizontalAlign.Left,
@@ -53,7 +53,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
         // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
         // 2、不能给多个td设置最大宽度，这样只会平分宽度
         // 3、多百分比宽度就算了
-        td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit});
+        td.element.css({"max-width": BI.isNumber(o.columnSize[i]) ? (o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit) : width});
         if (i === 0) {
             td.element.addClass("first-element");
         }
diff --git a/src/core/wrapper/layout/adapt/adapt.vertical.js b/src/core/wrapper/layout/adapt/adapt.vertical.js
index cd9255b117..82fa8b2972 100644
--- a/src/core/wrapper/layout/adapt/adapt.vertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.vertical.js
@@ -5,7 +5,7 @@
  */
 BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: {
-        baseCls: "bi-vertical-adapt-layout",
+        baseCls: "bi-v-a",
         horizontalAlign: BI.HorizontalAlign.Left,
         columnSize: [],
         scrollx: false,
diff --git a/src/core/wrapper/layout/adapt/auto.horizontal.js b/src/core/wrapper/layout/adapt/auto.horizontal.js
index 4483dde7f7..6e840a09c1 100644
--- a/src/core/wrapper/layout/adapt/auto.horizontal.js
+++ b/src/core/wrapper/layout/adapt/auto.horizontal.js
@@ -6,7 +6,7 @@
 BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.HorizontalAutoLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-horizon-auto-layout",
+            baseCls: "bi-h-o",
             hgap: 0,
             lgap: 0,
             rgap: 0,
diff --git a/src/core/wrapper/layout/adapt/inline.center.js b/src/core/wrapper/layout/adapt/inline.center.js
index d81256a0ab..78fe7175ea 100644
--- a/src/core/wrapper/layout/adapt/inline.center.js
+++ b/src/core/wrapper/layout/adapt/inline.center.js
@@ -11,7 +11,7 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
 
     props: function () {
         return BI.extend(BI.InlineCenterAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-inline-center-adapt-layout",
+            baseCls: "bi-i-c-a",
             horizontalAlign: BI.HorizontalAlign.Center,
             verticalAlign: BI.VerticalAlign.Middle,
             columnSize: [],
@@ -42,7 +42,7 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
             position: "relative",
             "vertical-align": o.verticalAlign
         });
-        w.element.addClass("inline-center-adapt-item");
+        w.element.addClass("i-c-a-item");
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
                 "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
diff --git a/src/core/wrapper/layout/adapt/inline.horizontal.js b/src/core/wrapper/layout/adapt/inline.horizontal.js
index 1553ee89b2..79ed9e99fc 100644
--- a/src/core/wrapper/layout/adapt/inline.horizontal.js
+++ b/src/core/wrapper/layout/adapt/inline.horizontal.js
@@ -11,7 +11,7 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
 
     props: function () {
         return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-inline-horizontal-adapt-layout",
+            baseCls: "bi-i-h-a",
             horizontalAlign: BI.HorizontalAlign.Center,
             verticalAlign: BI.VerticalAlign.Top,
             columnSize: [],
@@ -42,7 +42,7 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
             position: "relative",
             "vertical-align": o.verticalAlign
         });
-        w.element.addClass("inline-horizontal-adapt-item");
+        w.element.addClass("i-h-a-item");
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
                 "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
diff --git a/src/core/wrapper/layout/adapt/inline.vertical.js b/src/core/wrapper/layout/adapt/inline.vertical.js
index ef960c1300..9938ab582d 100644
--- a/src/core/wrapper/layout/adapt/inline.vertical.js
+++ b/src/core/wrapper/layout/adapt/inline.vertical.js
@@ -11,7 +11,7 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
 
     props: function () {
         return BI.extend(BI.InlineVerticalAdaptLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-inline-vertical-adapt-layout",
+            baseCls: "bi-i-v-a",
             horizontalAlign: BI.HorizontalAlign.Left,
             verticalAlign: BI.VerticalAlign.Middle,
             columnSize: [],
@@ -42,7 +42,7 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
             position: "relative",
             "vertical-align": o.verticalAlign
         });
-        w.element.addClass("inline-vertical-adapt-item");
+        w.element.addClass("i-v-a-item");
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({
                 "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
diff --git a/src/core/wrapper/layout/flex/flex.center.js b/src/core/wrapper/layout/flex/flex.center.js
index 6f2856201b..23c81d318b 100644
--- a/src/core/wrapper/layout/flex/flex.center.js
+++ b/src/core/wrapper/layout/flex/flex.center.js
@@ -8,7 +8,7 @@
 BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-center-adapt-layout",
+            baseCls: "bi-f-c",
             verticalAlign: BI.VerticalAlign.Middle,
             horizontalAlign: BI.HorizontalAlign.Center,
             hgap: 0,
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.center.js b/src/core/wrapper/layout/flex/flex.horizontal.center.js
index a58c5e6a6c..ef5baa4d4b 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.center.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.center.js
@@ -7,7 +7,7 @@
 BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-horizontal-center-adapt-layout",
+            baseCls: "bi-f-h-c",
             verticalAlign: BI.VerticalAlign.Top,
             rowSize: [],
             scrolly: false,
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js
index 0b95e803d5..89550608dc 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@@ -8,7 +8,7 @@
 BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-horizontal-layout",
+            baseCls: "bi-f-h",
             verticalAlign: BI.VerticalAlign.Top,
             horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
diff --git a/src/core/wrapper/layout/flex/flex.vertical.center.js b/src/core/wrapper/layout/flex/flex.vertical.center.js
index b037f01628..d67ca1ce8e 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.center.js
@@ -8,7 +8,7 @@
 BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-center-adapt-layout",
+            baseCls: "bi-f-v-c",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
             scrollx: false,
diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js
index c6d73d683b..28d8fd2223 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@@ -7,7 +7,7 @@
 BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-vertical-layout",
+            baseCls: "bi-f-v",
             horizontalAlign: BI.HorizontalAlign.Left,
             verticalAlign: BI.VerticalAlign.Top,
             rowSize: [],
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
index 44d0b78eb2..c02c4ad3a2 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
@@ -8,7 +8,7 @@
 BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-scrollable-center-adapt-layout clearfix",
+            baseCls: "bi-f-s-c clearfix",
             horizontalAlign: BI.HorizontalAlign.Center,
             verticalAlign: BI.VerticalAlign.Middle,
             columnSize: [],
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
index dded39a4ff..4e110f2220 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
@@ -8,7 +8,7 @@
 BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            baseCls: "bi-f-s-v-c clearfix",
             verticalAlign: BI.VerticalAlign.Top,
             rowSize: [],
             scrollable: true,
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
index 7dfe72fa86..064560b5d8 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -8,7 +8,7 @@
 BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
+            baseCls: "bi-f-s-h clearfix",
             verticalAlign: BI.VerticalAlign.Top,
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
@@ -25,7 +25,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
index ebc8406964..f9d9421add 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
@@ -8,7 +8,7 @@
 BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
+            baseCls: "bi-f-s-v-c clearfix",
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
             scrollx: false,
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
index 77a1ba9d8a..3e170b9a7b 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@@ -8,7 +8,7 @@
 BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-flex-scrollable-vertical-layout clearfix",
+            baseCls: "bi-f-s-v clearfix",
             horizontalAlign: BI.HorizontalAlign.Left,
             verticalAlign: BI.VerticalAlign.Top,
             rowSize: [],
@@ -25,7 +25,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-wrapper h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/layout.absolute.js b/src/core/wrapper/layout/layout.absolute.js
index ee5dde1e79..570487683d 100644
--- a/src/core/wrapper/layout/layout.absolute.js
+++ b/src/core/wrapper/layout/layout.absolute.js
@@ -6,7 +6,7 @@
 BI.AbsoluteLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.AbsoluteLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-absolute-layout",
+            baseCls: "bi-abs",
             hgap: null,
             vgap: null,
             lgap: null,
diff --git a/src/core/wrapper/layout/layout.adaptive.js b/src/core/wrapper/layout/layout.adaptive.js
index 4b679debe4..f94a8c503e 100644
--- a/src/core/wrapper/layout/layout.adaptive.js
+++ b/src/core/wrapper/layout/layout.adaptive.js
@@ -1,7 +1,7 @@
 BI.AdaptiveLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.AdaptiveLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-adaptive-layout",
+            baseCls: "bi-adaptive",
             hgap: null,
             vgap: null,
             lgap: null,
diff --git a/src/core/wrapper/layout/layout.border.js b/src/core/wrapper/layout/layout.border.js
index a6a412a51a..6962f0dd34 100644
--- a/src/core/wrapper/layout/layout.border.js
+++ b/src/core/wrapper/layout/layout.border.js
@@ -7,7 +7,7 @@
 BI.BorderLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.BorderLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-border-layout",
+            baseCls: "bi-border",
             items: {}
         });
     },
diff --git a/src/core/wrapper/layout/layout.card.js b/src/core/wrapper/layout/layout.card.js
index f0133de6e9..a48684ea7e 100644
--- a/src/core/wrapper/layout/layout.card.js
+++ b/src/core/wrapper/layout/layout.card.js
@@ -9,7 +9,7 @@
 BI.CardLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.CardLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-card-layout",
+            baseCls: "bi-card",
             items: []
         });
     },
diff --git a/src/core/wrapper/layout/layout.division.js b/src/core/wrapper/layout/layout.division.js
index 82021b130a..7d29123175 100644
--- a/src/core/wrapper/layout/layout.division.js
+++ b/src/core/wrapper/layout/layout.division.js
@@ -7,7 +7,7 @@
 BI.DivisionLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.DivisionLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-division-layout",
+            baseCls: "bi-division",
             columns: null,
             rows: null,
             items: []
diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js
index a577bd9d9f..362281eb5b 100644
--- a/src/core/wrapper/layout/layout.flow.js
+++ b/src/core/wrapper/layout/layout.flow.js
@@ -10,7 +10,7 @@
 BI.FloatLeftLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FloatLeftLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-float-left-layout clearfix",
+            baseCls: "bi-left clearfix",
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -86,7 +86,7 @@ BI.shortcut("bi.left", BI.FloatLeftLayout);
 BI.FloatRightLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FloatRightLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-float-right-layout clearfix",
+            baseCls: "bi-right clearfix",
             hgap: 0,
             vgap: 0,
             lgap: 0,
diff --git a/src/core/wrapper/layout/layout.grid.js b/src/core/wrapper/layout/layout.grid.js
index 7db7e7240e..49f47bea6d 100644
--- a/src/core/wrapper/layout/layout.grid.js
+++ b/src/core/wrapper/layout/layout.grid.js
@@ -7,7 +7,7 @@
 BI.GridLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.GridLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-grid-layout",
+            baseCls: "bi-grid",
             columns: null,
             rows: null,
             items: []
diff --git a/src/core/wrapper/layout/layout.horizontal.js b/src/core/wrapper/layout/layout.horizontal.js
index c75dd97a5a..831f98f138 100644
--- a/src/core/wrapper/layout/layout.horizontal.js
+++ b/src/core/wrapper/layout/layout.horizontal.js
@@ -6,7 +6,7 @@
 BI.HorizontalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.HorizontalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-horizontal-layout",
+            baseCls: "bi-h",
             verticalAlign: BI.VerticalAlign.Top,
             horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
@@ -60,7 +60,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
         // 2、不能给多个td设置最大宽度，这样只会平分宽度
         // 3、多百分比宽度就算了
-        td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit});
+        td.element.css({"max-width": BI.isNumber(o.columnSize[i]) ? (o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit) : width});
         if (i === 0) {
             td.element.addClass("first-element");
         }
diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js
index 06a79a4cd3..864b8b35df 100644
--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@@ -11,7 +11,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
 
     props: function () {
         return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-inline-layout",
+            baseCls: "bi-i",
             hgap: 0,
             vgap: 0,
             lgap: 0,
diff --git a/src/core/wrapper/layout/layout.lattice.js b/src/core/wrapper/layout/layout.lattice.js
index 9d1baf4372..b9779db944 100644
--- a/src/core/wrapper/layout/layout.lattice.js
+++ b/src/core/wrapper/layout/layout.lattice.js
@@ -10,7 +10,7 @@
 BI.LatticeLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.LatticeLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-lattice-layout clearfix"
+            baseCls: "bi-lattice clearfix"
             // columnSize: [0.2, 0.2, 0.6],
         });
     },
@@ -52,4 +52,4 @@ BI.LatticeLayout = BI.inherit(BI.Layout, {
         this._mount();
     }
 });
-BI.shortcut("bi.lattice", BI.LatticeLayout);
\ No newline at end of file
+BI.shortcut("bi.lattice", BI.LatticeLayout);
diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js
index 93af1f51af..7938d63479 100644
--- a/src/core/wrapper/layout/layout.table.js
+++ b/src/core/wrapper/layout/layout.table.js
@@ -7,7 +7,7 @@
 BI.TableLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.TableLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-table-layout",
+            baseCls: "bi-t",
             scrolly: true,
             columnSize: [200, 200, "fill"],
             rowSize: 30,  // or [30,30,30]
diff --git a/src/core/wrapper/layout/layout.tape.js b/src/core/wrapper/layout/layout.tape.js
index bdb1684744..ec52a41df8 100644
--- a/src/core/wrapper/layout/layout.tape.js
+++ b/src/core/wrapper/layout/layout.tape.js
@@ -6,7 +6,7 @@
 BI.HTapeLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.HTapeLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-h-tape-layout",
+            baseCls: "bi-h-tape",
             hgap: 0,
             vgap: 0,
             lgap: 0,
diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js
index 1448d3f8cf..a54f56e121 100644
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@@ -6,7 +6,7 @@
 BI.TdLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-td-layout",
+            baseCls: "bi-td",
             columnSize: [200, 200, 200],
             hgap: 0,
             vgap: 0,
diff --git a/src/core/wrapper/layout/layout.vertical.js b/src/core/wrapper/layout/layout.vertical.js
index 58f8c75480..4b30e670e8 100644
--- a/src/core/wrapper/layout/layout.vertical.js
+++ b/src/core/wrapper/layout/layout.vertical.js
@@ -6,7 +6,7 @@
 BI.VerticalLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.VerticalLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-vertical-layout",
+            baseCls: "bi-v",
             hgap: 0,
             vgap: 0,
             lgap: 0,
diff --git a/src/core/wrapper/layout/layout.window.js b/src/core/wrapper/layout/layout.window.js
index 7f40b6b74c..3bba16d1ea 100644
--- a/src/core/wrapper/layout/layout.window.js
+++ b/src/core/wrapper/layout/layout.window.js
@@ -6,7 +6,7 @@
 BI.WindowLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.WindowLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-window-layout",
+            baseCls: "bi-window",
             columns: 3,
             rows: 2,
             hgap: 0,
diff --git a/src/core/wrapper/layout/middle/middle.center.js b/src/core/wrapper/layout/middle/middle.center.js
index 0ee299c5b8..f1a27125a5 100644
--- a/src/core/wrapper/layout/middle/middle.center.js
+++ b/src/core/wrapper/layout/middle/middle.center.js
@@ -6,7 +6,7 @@
 BI.CenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.CenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-center-layout",
+            baseCls: "bi-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
diff --git a/src/core/wrapper/layout/middle/middle.float.center.js b/src/core/wrapper/layout/middle/middle.float.center.js
index 7d1edf7190..b4e6bf090d 100644
--- a/src/core/wrapper/layout/middle/middle.float.center.js
+++ b/src/core/wrapper/layout/middle/middle.float.center.js
@@ -6,7 +6,7 @@
 BI.FloatCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.FloatCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-float-center-layout",
+            baseCls: "bi-float-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
diff --git a/src/core/wrapper/layout/middle/middle.horizontal.js b/src/core/wrapper/layout/middle/middle.horizontal.js
index 569027a675..3cdc7c5cd9 100644
--- a/src/core/wrapper/layout/middle/middle.horizontal.js
+++ b/src/core/wrapper/layout/middle/middle.horizontal.js
@@ -6,7 +6,7 @@
 BI.HorizontalCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.HorizontalCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-horizontal-center-layout",
+            baseCls: "bi-h-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
diff --git a/src/core/wrapper/layout/middle/middle.vertical.js b/src/core/wrapper/layout/middle/middle.vertical.js
index 0065dd62ec..a7040cbead 100644
--- a/src/core/wrapper/layout/middle/middle.vertical.js
+++ b/src/core/wrapper/layout/middle/middle.vertical.js
@@ -6,7 +6,7 @@
 BI.VerticalCenterLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.VerticalCenterLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-vertical-center-layout",
+            baseCls: "bi-v-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less
index 2c8f4301f2..ab5fbac8fe 100644
--- a/src/less/core/wrapper/flex.horizontal.less
+++ b/src/less/core/wrapper/flex.horizontal.less
@@ -28,7 +28,7 @@
   flex-direction: row;
 }
 
-.bi-flex-horizontal-layout {
+.bi-f-h {
   .flex();
 
   .horizontal();
diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less
index d1fe9a73d0..fef267687c 100644
--- a/src/less/core/wrapper/flex.vertical.less
+++ b/src/less/core/wrapper/flex.vertical.less
@@ -28,7 +28,7 @@
   flex-direction: row;
 }
 
-.bi-flex-vertical-layout {
+.bi-f-v {
   .flex();
   .vertical();
 
diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less
index d0bb627b99..4bcdb037d4 100644
--- a/src/less/core/wrapper/flex.wrapper.horizontal.less
+++ b/src/less/core/wrapper/flex.wrapper.horizontal.less
@@ -28,7 +28,7 @@
   flex-direction: row;
 }
 
-.bi-flex-scrollable-horizontal-layout {
+.bi-f-s-h {
   & .flex-scrollable-horizontal-layout-wrapper {
     .flex();
     .horizontal();
diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less
index c429b32aba..19ad874bcf 100644
--- a/src/less/core/wrapper/flex.wrapper.vertical.less
+++ b/src/less/core/wrapper/flex.wrapper.vertical.less
@@ -28,8 +28,8 @@
   flex-direction: row;
 }
 
-.bi-flex-scrollable-vertical-layout {
-  & .flex-scrollable-vertical-layout-wrapper {
+.bi-f-s-v {
+  & .f-s-v-w {
     .flex();
     .vertical();
 
diff --git a/src/less/core/wrapper/inline.center.less b/src/less/core/wrapper/inline.center.less
index 019ab0826b..6752693375 100644
--- a/src/less/core/wrapper/inline.center.less
+++ b/src/less/core/wrapper/inline.center.less
@@ -1,4 +1,4 @@
-.bi-inline-center-adapt-layout {
+.bi-i-c-a {
   &:after {
     display: inline-block;
     width: 0;
@@ -7,7 +7,7 @@
     content: ' ';
   }
 
-  & > .inline-center-adapt-item {
+  & > .i-c-a-item {
     display: inline-block;
 
     &.x-icon {
diff --git a/src/less/core/wrapper/inline.horizontal.less b/src/less/core/wrapper/inline.horizontal.less
index fe8c1cd91b..faa62ae5c7 100644
--- a/src/less/core/wrapper/inline.horizontal.less
+++ b/src/less/core/wrapper/inline.horizontal.less
@@ -1,4 +1,4 @@
-.bi-inline-horizontal-adapt-layout {
+.bi-i-h-a {
   &:after {
     display: inline-block;
     width: 0;
@@ -7,7 +7,7 @@
     content: ' ';
   }
 
-  & > .inline-horizontal-adapt-item {
+  & > .i-h-a-item {
     display: inline-block;
 
     &.x-icon {
diff --git a/src/less/core/wrapper/inline.vertical.less b/src/less/core/wrapper/inline.vertical.less
index 7118353266..534ecefcb3 100644
--- a/src/less/core/wrapper/inline.vertical.less
+++ b/src/less/core/wrapper/inline.vertical.less
@@ -1,4 +1,4 @@
-.bi-inline-vertical-adapt-layout {
+.bi-i-v-a {
   &:after {
     display: inline-block;
     width: 0;
@@ -7,7 +7,7 @@
     content: ' ';
   }
 
-  & > .inline-vertical-adapt-item {
+  & > .i-v-a-item {
     display: inline-block;
 
     &.x-icon {