reponsive layout

components/layout/col.jsx

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
 
 const Col = React.createClass({
   propTypes: {
@@ -12,9 +13,31 @@ const Col = React.createClass({
     pull: stringOrNumber,
     className: PropTypes.string,
     children: PropTypes.node,
+    xs: objectOrNumber,
+    sm: objectOrNumber,
+    md: objectOrNumber,
+    lg: objectOrNumber,
   },
   render() {
-    const { span, order, offset, push, pull, className, ...others } = this.props;
+    const props = this.props;
+    const { span, order, offset, push, pull, className, children, ...others } = props;
+    let sizeClassObj = {};
+    ['xs', 'sm', 'md', 'lg'].forEach(size => {
+      let sizeProps = {};
+      if (typeof props[size] === 'number') {
+        sizeProps.span = props[size];
+      } else if (typeof props[size] === 'object') {
+        sizeProps = props[size] || {};
+      }
+      sizeClassObj = {
+        ...sizeClassObj,
+        [`col-${size}-${sizeProps.span}`]: sizeProps.span,
+        [`col-${size}-order-${sizeProps.order}`]: sizeProps.order,
+        [`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
+        [`col-${size}-push-${sizeProps.push}`]: sizeProps.push,
+        [`col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
+      };
+    });
     const classes = classNames({
       [`col-${span}`]: span,
       [`col-order-${order}`]: order,
@@ -22,8 +45,10 @@ const Col = React.createClass({
       [`col-push-${push}`]: push,
       [`col-pull-${pull}`]: pull,
       [className]: !!className,
+      ...sizeClassObj,
     });
-    return <div {...others} className={classes}>{ this.props.children }</div>;
+
+    return <div {...others} className={classes}>{children}</div>;
   },
 });
 

components/layout/demo/reponsive-more.md

@@ -0,0 +1,21 @@
+# 其他属性的响应式
+
+- order: 8
+
+`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` 属性中来使用。
+
+其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。
+
+---
+
+````jsx
+import { Row, Col } from 'antd';
+
+ReactDOM.render(
+  <Row>
+    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }} />
+    <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }} />
+    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }} />
+  </Row>
+, mountNode);
+````

components/layout/demo/reponsive.md

@@ -0,0 +1,19 @@
+# 响应式布局
+
+- order: 7
+
+参照 Bootstrap 的[响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设四个响应尺寸：`xs` `sm` `md` `lg`。
+
+---
+
+````jsx
+import { Row, Col } from 'antd';
+
+ReactDOM.render(
+  <Row>
+    <Col xs={0} sm={4} md={6} lg={8} />
+    <Col xs={24} sm={16} md={12} lg={8} />
+    <Col xs={0} sm={4} md={6} lg={8} />
+  </Row>
+, mountNode);
+````

components/layout/index.md

@@ -81,7 +81,7 @@ Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排
 
 ## API
 
-Ant Design 的布局组件暂不支持响应式设计和元素对齐等特性，若不能满足你的需求，你可以直接使用社区的优秀布局组件：
+Ant Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件：
 
 - [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)
 - [react-blocks](http://whoisandie.github.io/react-blocks/)

style/core/layouts.less

@@ -64,3 +64,37 @@
 
 .make-grid-columns();
 .make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}

style/mixins/grid.less

@@ -10,11 +10,11 @@
 
 .make-grid-columns() {
   .col(@index) {
-    @item: ~".col-@{index}";
+    @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
     .col((@index + 1), @item);
   }
   .col(@index, @list) when (@index =< @grid-columns) {
-    @item: ~".col-@{index}";
+    @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
     .col((@index + 1), ~"@{list}, @{item}");
   }
   .col(@index, @list) when (@index > @grid-columns) {
@@ -30,23 +30,23 @@
   .col(1);
 }
 
-.loop-grid-columns(@index) when (@index > 0) {
-  .col-@{index} {
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .col@{class}-@{index} {
     width: percentage((@index / @grid-columns));
   }
-  .col-push-@{index} {
+  .col@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
   }
-  .col-pull-@{index} {
+  .col@{class}-pull-@{index} {
     right: percentage((@index / @grid-columns));
   }
-  .col-offset-@{index} {
+  .col@{class}-offset-@{index} {
     margin-left: percentage((@index / @grid-columns));
   }
-  .col-order-@{index} {
+  .col@{class}-order-@{index} {
     order: @index;
   }
-  .loop-grid-columns((@index - 1));
+  .loop-grid-columns((@index - 1), @class);
 }
 
 .loop-grid-columns(@index) when (@index = 0) {
@@ -58,6 +58,6 @@
   }
 }
 
-.make-grid() {
-  .loop-grid-columns(@grid-columns);
+.make-grid(@class: ~'') {
+  .loop-grid-columns(@grid-columns, @class);
 }