css: update footer style

site/common/lib.js

@@ -8,3 +8,4 @@ import './styles/resource.less';
 import './styles/clearfix.less';
 import './styles/demo.less';
 import './styles/page-nav.less';
+import './styles/footer.less';

site/common/styles/footer.less

@@ -0,0 +1,35 @@
+footer {
+  clear: both;
+  border-top: 1px solid #eee;
+  font-size: 12px;
+  background: #fff;
+  position: relative;
+  z-index: 1;
+  color: #666;
+}
+
+footer ul {
+  overflow: hidden;
+  margin: 0 2%;
+}
+
+footer ul li {
+  float: left;
+  width: 25%;
+  padding: 5px 2% 15px;
+}
+
+footer ul li > h2 {
+  font-size: 16px;
+  margin: 10px auto 5px;
+  font-weight: normal;
+}
+
+footer ul li > div {
+  margin: auto;
+  margin: 10px 0;
+}
+
+footer ul li > a {
+  margin: 5px 2px 0 0;
+}

site/component/Footer/index.jsx

@@ -1,50 +1,51 @@
 import React from 'react';
-import { Row, Col, Select } from '../../../';
+import { Select } from '../../../';
 
-import './index.less';
 export default class Footer extends React.Component {
   render() {
-    return (<footer id="footer">
-      <Row>
-        <Col span="6" className="footer-col">
-          <h2>GitHub</h2>
-          <a target="_blank " href="https://github.com/ant-design/ant-design">
-            仓库
-          </a>
-          <a target="_blank" href="https://github.com/ant-design/ant-design/tree/master/style">
-            样式
-          </a>
-          <a target="_blank" href="https://github.com/ant-design/antd-bin">
-            开发工具
-          </a>
-        </Col>
-        <Col span="6" className="footer-col">
-          <h2>关于我们</h2>
-          <a href="https://github.com/alipay/x/issues">博客 - Ant UED</a>
-        </Col>
-        <Col span="6" className="footer-col">
-          <h2>联系我们</h2>
-          <a target="_blank" href="https://github.com/ant-design/ant-design/issues">
-            反馈和建议
-          </a>
-          <a target="_blank" href="https://gitter.im/ant-design/ant-design">
-            讨论
-          </a>
-          <a target="_blank" href="http://dwz.cn/2dJ2mg">
-            报告 Bug
-          </a>
-        </Col>
-        <Col span="6" className="footer-col">
-          <p>©2015 蚂蚁金服体验技术部出品</p>
-          <p>
-            文档版本：
-            <Select defaultValue="0.10.4" size="small">
-              <Option value="0.10.4">0.10.4</Option>
-              <Option value="0.9.2">0.9.2</Option>
-            </Select>
-          </p>
-        </Col>
-      </Row>
-    </footer>);
+    return (
+      <footer id="footer">
+        <ul>
+          <li>
+            <h2>GitHub</h2>
+            <a target="_blank " href="https://github.com/ant-design/ant-design">
+              仓库
+            </a>
+            <a target="_blank" href="https://github.com/ant-design/ant-design/tree/master/style">
+              样式
+            </a>
+            <a target="_blank" href="https://github.com/ant-design/antd-bin">
+              开发工具
+            </a>
+          </li>
+          <li>
+            <h2>关于我们</h2>
+            <a href="https://github.com/alipay/x/issues">博客 - Ant UED</a>
+          </li>
+          <li>
+            <h2>联系我们</h2>
+            <a target="_blank" href="https://github.com/ant-design/ant-design/issues">
+              反馈和建议
+            </a>
+            <a target="_blank" href="https://gitter.im/ant-design/ant-design">
+              讨论
+            </a>
+            <a target="_blank" href="http://dwz.cn/2dJ2mg">
+              报告 Bug
+            </a>
+          </li>
+          <li>
+            <div>©2015 蚂蚁金服体验技术部出品</div>
+            <div>
+              文档版本：
+              <Select defaultValue="0.10.4" size="small">
+                <Option value="0.10.4">0.10.4</Option>
+                <Option value="0.9.2">0.9.2</Option>
+              </Select>
+            </div>
+          </li>
+        </ul>
+      </footer>
+    );
   }
 }

site/component/Footer/index.less

@@ -1,20 +0,0 @@
-#footer {
-    animation: yBottomMatrix .5s ease-out .6s backwards;
-
-    border-top: 1px solid #eee;
-    background: #fff;
-    padding: 0 2%;
-}
-
-#footer .footer-col {
-    padding: 10px 2% 15px;
-}
-#footer h2 {
-    font-size: 16px;
-    font-weight: normal;
-    margin-top: 5px;
-}
-#footer a, #footer p {
-    font-size: 12px;
-    margin: 5px 2px 0 0;
-}