Add footer

spec/layout/demo/aside.md

@@ -4,6 +4,8 @@
 
 顶级导航在侧边栏。
 
+侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
+
 ---
 
 ````jsx
@@ -51,6 +53,9 @@ ReactDOM.render(
             <div style={{ height: 590 }}></div>
           </div>
         </div>
+        <div className="ant-layout-footer">
+        Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
+        </div>
       </div>
     </div>
   </BrowserDemo>
@@ -61,7 +66,6 @@ ReactDOM.render(
 .ant-layout-aside {
   position: relative;
   min-height: 100%;
-  overflow: hidden;
 }
 
 .ant-layout-aside .ant-layout-logo {
@@ -76,8 +80,9 @@ ReactDOM.render(
   width: 224px;
   background: #404040;
   position: absolute;
+  overflow: auto;
   padding-bottom: 24px;
-  min-height: 100%;
+  height: 100%;
 }
 
 .ant-layout-aside .ant-layout-sider > .ant-menu {
@@ -96,7 +101,6 @@ ReactDOM.render(
 
 .ant-layout-aside .ant-layout-main {
   margin-left: 224px;
-  margin-bottom: 24px;
 }
 
 .ant-layout-aside .ant-layout-container {
@@ -107,4 +111,14 @@ ReactDOM.render(
   background: #fff;
   padding: 24px;
 }
+
+.ant-layout-aside .ant-layout-footer {
+  padding: 16px 0px;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+  background: #fff;
+  border-top: 1px solid #e9e9e9;
+  width: 100%;
+}
 ````

spec/layout/demo/top-aside.md

@@ -69,6 +69,9 @@ ReactDOM.render(
             <div style={{ height: 240 }}></div>
           </div>
         </div>
+        <div className="ant-layout-footer">
+        Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
+        </div>
       </div>
     </div>
   </BrowserDemo>
@@ -100,7 +103,7 @@ ReactDOM.render(
 
 .ant-layout-topaside .ant-layout-subheader {
   height: 48px;
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: 1px solid #e9e9e9;
   background: #fff;
 }
 
@@ -122,7 +125,14 @@ ReactDOM.render(
 }
 
 .ant-layout-topaside .ant-layout-content {
-  border-left: 1px solid #d9d9d9;
+  border-left: 1px solid #e9e9e9;
   margin-left: 223px;
 }
+
+.ant-layout-topaside .ant-layout-footer {
+  margin: 24px 0;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+}
 ````

spec/layout/demo/top.md

@@ -4,6 +4,8 @@
 
 一二级导航都在顶部。
 
+顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
+
 > `<BrowserDemo />` 做演示用，无须复制。
 
 ---
@@ -47,6 +49,9 @@ ReactDOM.render(
           <div style={{ height: 240 }}></div>
         </div>
       </div>
+      <div className="ant-layout-footer">
+      Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
+      </div>
     </div>
   </BrowserDemo>
 , document.getElementById('spec-layout-demo-top'));
@@ -77,7 +82,7 @@ ReactDOM.render(
 
 .ant-layout-top .ant-layout-subheader {
   height: 48px;
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: 1px solid #e9e9e9;
   background: #fff;
 }
 
@@ -92,4 +97,11 @@ ReactDOM.render(
   padding-top: 24px;
   overflow: hidden;
 }
+
+.ant-layout-top .ant-layout-footer {
+  margin: 24px 0;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+}
 ````

spec/layout/index.md

@@ -7,4 +7,41 @@
 
 ---
 
-收集和规范使用 Ant Design 设计的中后台产品的基本布局。
+布局和导航是一个页面的重要构成模式之一，是展开交互设计最早阶段需要确定下来的东西。
+
+Ant Design 的布局和导航设计规范如下：
+
+### 尺寸规则
+
+一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
+
+- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。
+- 顶部导航（展示类页面）：一级导航高度 `80px`,二级导航 `56px`。
+- 顶部导航高度的范围计算公式为：`48+8n`。
+- 侧边导航宽度的范围计算公式：`200+8n`。
+
+### 交互原则
+
+- 一级导航和末级的导航需要在可视化的层面被强调出来；
+- 当前项应该在呈现上优先级最高；
+- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
+- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
+
+### 视觉原则
+
+导航样式上需要根据信息层级合理的选择样式：
+
+- 大色块强调
+  建议用于底色为深色系时，当前页面父级的导航项。
+
+- 高亮火柴棍
+  当导航栏底色为浅色系时使用，可用于当前页面对应导航项、建议尽量在导航路径的最终项使用。
+
+- 字体高亮变色
+  从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
+
+- 字体放大
+  `12px`、`14px`字体是导航栏的字体标准，字体的选择规律也应当考虑导航项的等级相应的做合理的使用。14 号字体在使用的时候只可用在一、二级导航中。
+
+
+Ant Design 使用两种常见的布局形式：顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。

style/components/menu.less

@@ -25,7 +25,7 @@
     color: #999;
     line-height: 1.5;
     padding: 8px 10px;
-    border-bottom: 1px solid #d9d9d9;
+    border-bottom: 1px solid #e9e9e9;
   }
 
   &-item,
@@ -57,7 +57,7 @@
 
   &-inline,
   &-vertical {
-    border-right: 1px solid #d9d9d9;
+    border-right: 1px solid #e9e9e9;
     .@{menu-prefix-cls}-item {
       border-right: 2px solid transparent;
       margin-left: -1px;
@@ -168,7 +168,7 @@
 
   &-horizontal {
     border: none;
-    border-bottom: 1px solid #d9d9d9;
+    border-bottom: 1px solid #e9e9e9;
     box-shadow: none;
     z-index: 0;