diff --git a/docs/spec/layout/demo/aside-collapse.md b/docs/spec/layout/demo/aside-collapse.md
index c7c03127c8..aaad584f34 100644
--- a/docs/spec/layout/demo/aside-collapse.md
+++ b/docs/spec/layout/demo/aside-collapse.md
@@ -24,9 +24,9 @@ const AsideCollapse = React.createClass({
   render() {
     const collapse = this.state.collapse;
     return (
-      <div className={collapse ? "ant-layout-aside ant-layout-aside-collapse" : "ant-layout-aside"}>
-        <aside className="ant-layout-sider">
-          <div className="ant-layout-logo"></div>
+      <div className={collapse ? "layout-aside layout-aside-collapse" : "layout-aside"}>
+        <aside className="layout-sider">
+          <div className="layout-logo"></div>
           <Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
             <Menu.Item key="user">
               <Icon type="user" />
@@ -49,27 +49,25 @@ const AsideCollapse = React.createClass({
               {!collapse && <span className="nav-text">导航五</span>}
             </Menu.Item>
           </Menu>
-          <div className="ant-aside-action" onClick={this.onCollapseChange}>
+          <div className="aside-action" onClick={this.onCollapseChange}>
             {collapse ? <Icon type="right" /> : <Icon type="left" />}
           </div>
         </aside>
-        <div className="ant-layout-main">
-          <div className="ant-layout-header"></div>
-          <div className="ant-layout-breadcrumb">
+        <div className="layout-main">
+          <div className="layout-header"></div>
+          <div className="layout-container">
             <Breadcrumb>
               <Breadcrumb.Item>首页</Breadcrumb.Item>
               <Breadcrumb.Item>应用列表</Breadcrumb.Item>
               <Breadcrumb.Item>某应用</Breadcrumb.Item>
             </Breadcrumb>
-          </div>
-          <div className="ant-layout-container">
-            <div className="ant-layout-content">
+            <div className="layout-content">
               <div style={{ height: 220 }}>
                 内容区域
               </div>
             </div>
           </div>
-          <div className="ant-layout-footer">
+          <div className="layout-footer">
           Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
           </div>
         </div>
@@ -82,78 +80,77 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
 ````
 
 ````css
-.ant-layout-aside {
+.layout-aside {
   position: relative;
   min-height: 100%;
 }
 
-.ant-layout-aside .ant-layout-logo {
-  width: 150px;
+.layout-aside .layout-logo {
   height: 32px;
   background: #333;
-  border-radius: 6px;
-  margin: 16px 24px 16px 28px;
-  transition: all 0.3s ease;
+  border-radius: 4px;
+  margin: 16px 24px;
+  transition: all .3s;
 }
 
-.ant-layout-aside-collapse .ant-layout-logo {
+.layout-aside-collapse .layout-logo {
   width: 32px;
   margin: 16px;
-  transition: all 0.3s ease;
+  transition: all .3s;
 }
 
-.ant-layout-aside .ant-layout-sider {
+.layout-aside .layout-sider {
   width: 224px;
   background: #404040;
   position: absolute;
   overflow: visible;
   padding-bottom: 24px;
   height: 100%;
-  transition: all 0.3s ease;
+  transition: all .3s;
 }
 
-.ant-layout-aside-collapse .ant-layout-sider {
+.layout-aside-collapse .layout-sider {
   width: 64px;
-  transition: all 0.3s ease;
+  transition: all .3s;
 }
 
-.ant-layout-aside .ant-layout-sider > .ant-menu {
+.layout-aside .layout-sider > .menu {
   margin-bottom: 20px;
 }
 
-.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
+.layout-aside .layout-sider > .menu > .menu-item {
   margin: 16px 0;
 }
 
-.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
+.layout-aside .layout-sider > .menu > .menu-item .nav-text {
   vertical-align: baseline;
   display: inline-block;
 }
 
-.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
+.layout-aside .layout-sider > .menu > .menu-item > .anticon {
   transition: font-size .3s;
 }
 
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
+.layout-aside-collapse .layout-sider > .menu > .menu-item {
   transition: all 0s ease;
 }
 
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
+.layout-aside-collapse .layout-sider > .menu > .menu-item > .anticon {
   font-size: 16px;
   display: inline-block;
 }
 
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
+.layout-aside-collapse .layout-sider > .menu > .menu-item .nav-text {
   display: none;
 }
 
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
+.layout-aside-collapse .layout-sider > .menu > .menu-item:hover {
   background: #2db7f5;
   color: #fff;
   transition: all 0s ease;
 }
 
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text {
+.layout-aside-collapse .layout-sider > .menu > .menu-item:hover .nav-text {
   display: inline-block;
   vertical-align: top;
   background: #2db7f5;
@@ -163,7 +160,7 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
 }
 
 /* 实际使用中需要改成 position: fixed */
-.ant-layout-aside .ant-aside-action {
+.layout-aside .aside-action {
   height: 42px;
   width: 224px;
   position: absolute;
@@ -173,44 +170,42 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
   text-align: center;
   line-height: 42px;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all .3s;
 }
 
-.ant-layout-aside-collapse .ant-aside-action {
+.layout-aside-collapse .aside-action {
   width: 64px;
-  transition: all 0.3s ease;
+  transition: all .3s;
 }
 
-.ant-layout-aside .ant-layout-header {
+.layout-aside .layout-header {
   background: #fff;
   height: 64px;
   border-bottom: 1px solid #e9e9e9;
 }
 
-.ant-layout-aside .ant-layout-breadcrumb {
-  margin: 7px 0 -17px 24px;
-}
-
-.ant-layout-aside .ant-layout-main {
+.layout-aside .layout-main {
   margin-left: 224px;
-  transition: all 0.3s ease;
+  transition: all .3s;
 }
 
-.ant-layout-aside-collapse .ant-layout-main {
+.layout-aside-collapse .layout-main {
   margin-left: 64px;
-  transition: all 0.3s ease;
+  transition: all .3s;
 }
 
-.ant-layout-aside .ant-layout-container {
-  margin: 24px 16px;
+.layout-aside .layout-container {
+  margin: 12px 16px 24px;
 }
 
-.ant-layout-aside .ant-layout-content {
+.layout-aside .layout-content {
   background: #fff;
   padding: 24px;
+  margin-top: 12px;
+  border-radius: 4px;
 }
 
-.ant-layout-aside .ant-layout-footer {
+.layout-aside .layout-footer {
   height: 64px;
   line-height: 64px;
   text-align: center;
diff --git a/docs/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md
index f1d00763b7..5ae2b0a3f6 100644
--- a/docs/spec/layout/demo/aside.md
+++ b/docs/spec/layout/demo/aside.md
@@ -14,9 +14,9 @@ const SubMenu = Menu.SubMenu;
 
 ReactDOM.render(
   <BrowserDemo>
-    <div className="ant-layout-aside">
-      <aside className="ant-layout-sider">
-        <div className="ant-layout-logo"></div>
+    <div className="layout-aside">
+      <aside className="layout-sider">
+        <div className="layout-logo"></div>
         <Menu mode="inline" theme="dark"
           defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
           <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
@@ -39,23 +39,21 @@ ReactDOM.render(
           </SubMenu>
         </Menu>
       </aside>
-      <div className="ant-layout-main">
-        <div className="ant-layout-header"></div>
-        <div className="ant-layout-breadcrumb">
+      <div className="layout-main">
+        <div className="layout-header"></div>
+        <div className="layout-container">
           <Breadcrumb>
             <Breadcrumb.Item>首页</Breadcrumb.Item>
             <Breadcrumb.Item>应用列表</Breadcrumb.Item>
             <Breadcrumb.Item>某应用</Breadcrumb.Item>
           </Breadcrumb>
-        </div>
-        <div className="ant-layout-container">
-          <div className="ant-layout-content">
+          <div className="layout-content">
             <div style={{ height: 590 }}>
               内容区域
             </div>
           </div>
         </div>
-        <div className="ant-layout-footer">
+        <div className="layout-footer">
         Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
         </div>
       </div>
@@ -65,20 +63,19 @@ ReactDOM.render(
 ````
 
 ````css
-.ant-layout-aside {
+.layout-aside {
   position: relative;
   min-height: 100%;
 }
 
-.ant-layout-aside .ant-layout-logo {
-  width: 150px;
+.layout-aside .layout-logo {
   height: 32px;
   background: #333;
-  border-radius: 6px;
-  margin: 16px 24px 16px 28px;
+  border-radius: 4px;
+  margin: 16px 24px;
 }
 
-.ant-layout-aside .ant-layout-sider {
+.layout-aside .layout-sider {
   width: 224px;
   background: #404040;
   position: absolute;
@@ -87,34 +84,32 @@ ReactDOM.render(
   height: 100%;
 }
 
-.ant-layout-aside .ant-layout-sider > .ant-menu {
+.layout-aside .layout-sider > .menu {
   margin-bottom: 20px;
 }
 
-.ant-layout-aside .ant-layout-header {
+.layout-aside .layout-header {
   background: #fff;
   height: 64px;
   border-bottom: 1px solid #e9e9e9;
 }
 
-.ant-layout-aside .ant-layout-breadcrumb {
-  margin: 7px 0 -17px 24px;
-}
-
-.ant-layout-aside .ant-layout-main {
+.layout-aside .layout-main {
   margin-left: 224px;
 }
 
-.ant-layout-aside .ant-layout-container {
-  margin: 24px 16px;
+.layout-aside .layout-container {
+  margin: 12px 16px 24px;
 }
 
-.ant-layout-aside .ant-layout-content {
+.layout-aside .layout-content {
   background: #fff;
   padding: 24px;
+  margin-top: 12px;
+  border-radius: 4px;
 }
 
-.ant-layout-aside .ant-layout-footer {
+.layout-aside .layout-footer {
   height: 64px;
   line-height: 64px;
   text-align: center;
diff --git a/docs/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md
index 2b15ce835c..381ec2375d 100644
--- a/docs/spec/layout/demo/ceiling.md
+++ b/docs/spec/layout/demo/ceiling.md
@@ -13,9 +13,9 @@ import BrowserDemo from 'site/theme/template/BrowserDemo';
 
 ReactDOM.render(
   <BrowserDemo>
-    <div className="ant-layout-ceiling-demo">
-      <div className="ant-layout-ceiling">
-        <div className="ant-layout-wrapper">
+    <div className="layout-ceiling-demo">
+      <div className="layout-ceiling">
+        <div className="layout-wrapper">
           <ul className="right">
             <li>xxx@example.com</li>
             <li>|</li>
@@ -25,9 +25,9 @@ ReactDOM.render(
           </ul>
         </div>
       </div>
-      <div className="ant-layout-header">
-        <div className="ant-layout-wrapper">
-          <div className="ant-layout-logo"></div>
+      <div className="layout-header">
+        <div className="layout-wrapper">
+          <div className="layout-logo"></div>
         </div>
       </div>
     </div>
@@ -36,11 +36,11 @@ ReactDOM.render(
 ````
 
 ````css
-.ant-layout-ceiling-demo {
+.layout-ceiling-demo {
   height: 100%;
 }
 
-.ant-layout-ceiling {
+.layout-ceiling {
   font-size: 12px;
   height: 30px;
   line-height: 30px;
@@ -48,31 +48,31 @@ ReactDOM.render(
   color: #ddd;
 }
 
-.ant-layout-ceiling .right {
+.layout-ceiling .right {
   float: right;
 }
 
-.ant-layout-ceiling ul li {
+.layout-ceiling ul li {
   display: inline-block;
   margin: 0 4px;
 }
 
-.ant-layout-ceiling-demo .ant-layout-wrapper {
+.layout-ceiling-demo .layout-wrapper {
   padding: 0 50px;
 }
 
-.ant-layout-ceiling-demo .ant-layout-header {
+.layout-ceiling-demo .layout-header {
   background: #fff;
   height: 64px;
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: 1px solid #e9e9e9;
 }
 
-.ant-layout-ceiling-demo .ant-layout-logo {
+.layout-ceiling-demo .layout-logo {
   width: 120px;
   height: 32px;
   background: #eee;
-  border-radius: 6px;
-  margin: 16px 28px 16px 0;
+  border-radius: 4px;
+  margin: 16px 24px 16px 0;
   float: left;
 }
 ````
diff --git a/docs/spec/layout/demo/top-aside.md b/docs/spec/layout/demo/top-aside.md
index 4295dbaead..2ea446976b 100644
--- a/docs/spec/layout/demo/top-aside.md
+++ b/docs/spec/layout/demo/top-aside.md
@@ -12,10 +12,10 @@ const SubMenu = Menu.SubMenu;
 
 ReactDOM.render(
   <BrowserDemo>
-    <div className="ant-layout-topaside">
-      <div className="ant-layout-header">
-        <div className="ant-layout-wrapper">
-          <div className="ant-layout-logo"></div>
+    <div className="layout-topaside">
+      <div className="layout-header">
+        <div className="layout-wrapper">
+          <div className="layout-logo"></div>
           <Menu theme="dark" mode="horizontal"
             defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
             <Menu.Item key="1">导航一</Menu.Item>
@@ -24,8 +24,8 @@ ReactDOM.render(
           </Menu>
         </div>
       </div>
-      <div className="ant-layout-subheader">
-        <div className="ant-layout-wrapper">
+      <div className="layout-subheader">
+        <div className="layout-wrapper">
           <Menu mode="horizontal"
             defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
             <Menu.Item key="1">二级导航</Menu.Item>
@@ -34,16 +34,14 @@ ReactDOM.render(
           </Menu>
         </div>
       </div>
-      <div className="ant-layout-wrapper">
-        <div className="ant-layout-breadcrumb">
-          <Breadcrumb>
-            <Breadcrumb.Item>首页</Breadcrumb.Item>
-            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
-            <Breadcrumb.Item>某应用</Breadcrumb.Item>
-          </Breadcrumb>
-        </div>
-        <div className="ant-layout-container">
-          <aside className="ant-layout-sider">
+      <div className="layout-wrapper">
+        <Breadcrumb>
+          <Breadcrumb.Item>首页</Breadcrumb.Item>
+          <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+          <Breadcrumb.Item>某应用</Breadcrumb.Item>
+        </Breadcrumb>
+        <div className="layout-container">
+          <aside className="layout-sider">
             <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
               <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
                 <Menu.Item key="1">选项1</Menu.Item>
@@ -65,13 +63,13 @@ ReactDOM.render(
               </SubMenu>
             </Menu>
           </aside>
-          <div className="ant-layout-content">
+          <div className="layout-content">
             <div style={{ height: 240 }}>
               <div style={{clear: 'both'}}>内容区域</div>
             </div>
           </div>
         </div>
-        <div className="ant-layout-footer">
+        <div className="layout-footer">
         Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
         </div>
       </div>
@@ -81,52 +79,50 @@ ReactDOM.render(
 ````
 
 ````css
-.ant-layout-topaside {
+.layout-topaside {
   height: 100%;
 }
 
-.ant-layout-topaside .ant-layout-wrapper {
+.layout-topaside .layout-wrapper {
   padding: 0 50px;
 }
 
-.ant-layout-topaside .ant-layout-header {
+.layout-topaside .layout-header {
   background: #404040;
   height: 64px;
 }
 
-.ant-layout-topaside .ant-layout-logo {
+.layout-topaside .layout-logo {
   width: 120px;
   height: 32px;
   background: #333;
-  border-radius: 6px;
-  margin: 16px 28px 16px 0;
+  border-radius: 4px;
+  margin: 16px 24px 16px 0;
   float: left;
 }
 
-.ant-layout-topaside .ant-layout-subheader {
+.layout-topaside .layout-subheader {
   height: 48px;
   border-bottom: 1px solid #e9e9e9;
   background: #fff;
+  margin-bottom: 12px;
 }
 
-.ant-layout-topaside .ant-layout-breadcrumb {
-  margin: 7px 0 -17px 24px;
-}
-
-.ant-layout-topaside .ant-layout-container {
+.layout-topaside .layout-container {
   background: #fff;
-  margin: 24px 0 0;
+  margin: 12px 0 0;
   position: relative;
   padding: 24px 0;
   overflow: hidden;
+  border-radius: 4px;
 }
 
-.ant-layout-topaside .ant-layout-sider {
+.layout-topaside .layout-sider {
   width: 224px;
   float: left;
 }
 
-.ant-layout-topaside .ant-layout-content {
+.layout-topaside .layout-content {
   border-left: 1px solid #e9e9e9;
   padding: 0 24px;
   overflow: auto;
@@ -134,7 +130,7 @@ ReactDOM.render(
   left: -1px;
 }
 
-.ant-layout-topaside .ant-layout-footer {
+.layout-topaside .layout-footer {
   height: 64px;
   line-height: 64px;
   text-align: center;
diff --git a/docs/spec/layout/demo/top.md b/docs/spec/layout/demo/top.md
index c9d942c012..9636404c74 100644
--- a/docs/spec/layout/demo/top.md
+++ b/docs/spec/layout/demo/top.md
@@ -15,10 +15,10 @@ import BrowserDemo from 'site/theme/template/BrowserDemo';
 
 ReactDOM.render(
   <BrowserDemo>
-    <div className="ant-layout-top">
-      <div className="ant-layout-header">
-        <div className="ant-layout-wrapper">
-          <div className="ant-layout-logo"></div>
+    <div className="layout-top">
+      <div className="layout-header">
+        <div className="layout-wrapper">
+          <div className="layout-logo"></div>
           <Menu theme="dark" mode="horizontal"
             defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
             <Menu.Item key="1">导航一</Menu.Item>
@@ -27,8 +27,8 @@ ReactDOM.render(
           </Menu>
         </div>
       </div>
-      <div className="ant-layout-subheader">
-        <div className="ant-layout-wrapper">
+      <div className="layout-subheader">
+        <div className="layout-wrapper">
           <Menu mode="horizontal"
             defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
             <Menu.Item key="1">二级导航</Menu.Item>
@@ -37,19 +37,17 @@ ReactDOM.render(
           </Menu>
         </div>
       </div>
-      <div className="ant-layout-wrapper">
-        <div className="ant-layout-breadcrumb">
-          <Breadcrumb>
-            <Breadcrumb.Item>首页</Breadcrumb.Item>
-            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
-            <Breadcrumb.Item>某应用</Breadcrumb.Item>
-          </Breadcrumb>
-        </div>
-        <div className="ant-layout-container">
+      <div className="layout-wrapper">
+        <Breadcrumb>
+          <Breadcrumb.Item>首页</Breadcrumb.Item>
+          <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+          <Breadcrumb.Item>某应用</Breadcrumb.Item>
+        </Breadcrumb>
+        <div className="layout-container">
           <div style={{ height: 210 }}></div>
         </div>
       </div>
-      <div className="ant-layout-footer">
+      <div className="layout-footer">
       Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
       </div>
     </div>
@@ -58,47 +56,45 @@ ReactDOM.render(
 ````
 
 ````css
-.ant-layout-top {
+.layout-top {
   height: 100%;
 }
 
-.ant-layout-top .ant-layout-wrapper {
+.layout-top .layout-wrapper {
   padding: 0 50px;
 }
 
-.ant-layout-top .ant-layout-header {
+.layout-top .layout-header {
   background: #404040;
   height: 64px;
 }
 
-.ant-layout-top .ant-layout-logo {
+.layout-top .layout-logo {
   width: 120px;
   height: 32px;
   background: #333;
-  border-radius: 6px;
-  margin: 16px 28px 16px 0;
+  border-radius: 4px;
+  margin: 16px 24px 16px 0;
   float: left;
 }
 
-.ant-layout-top .ant-layout-subheader {
+.layout-top .layout-subheader {
   height: 48px;
   border-bottom: 1px solid #e9e9e9;
   background: #fff;
+  margin-bottom: 12px;
 }
 
-.ant-layout-top .ant-layout-breadcrumb {
-  margin: 7px 0 -17px 24px;
-}
-
-.ant-layout-top .ant-layout-container {
+.layout-top .layout-container {
   background: #fff;
-  margin: 24px 0 0;
+  margin: 12px 0 0;
   position: relative;
   padding-top: 24px;
   overflow: hidden;
+  border-radius: 4px;
 }
 
-.ant-layout-top .ant-layout-footer {
+.layout-top .layout-footer {
   height: 64px;
   line-height: 64px;
   text-align: center;