Merge branch 'master' of github.com:ant-design/ant-design

2024-12-02 12:09:14 +08:00 · 2016-06-06 15:47:05 +08:00 · 2016-06-06 15:47:05 +08:00 · 799aa6ecc9
commit 799aa6ecc9
parent 20a6f2cd60 b6d7645b26
122 changed files with 574 additions and 358 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -28,7 +28,6 @@ const eslintrc = {
    'arrow-body-style': 0,
    'react/sort-comp': 0,
    'react/prop-types': 0,
-    'react/jsx-closing-bracket-location': 0,
    'react/jsx-first-prop-new-line': 0,
    'import/no-unresolved': 0,
    'no-param-reassign': 0,
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@ -16,11 +16,13 @@ ReactDOM.render(<div>
  <Alert message="警告提示的文案"
    type="warning"
    closable
-    onClose={onClose} />
+    onClose={onClose}
+  />
  <Alert message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
    closable
-    onClose={onClose} />
+    onClose={onClose}
+  />
 </div>, mountNode);
 ````
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@ -11,17 +11,21 @@ import { Alert } from 'antd';
 ReactDOM.render(<div>
  <Alert message="成功提示的文案"
    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
-    type="success" />
+    type="success"
+  />
  <Alert message="消息提示的文案"
    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
-    type="info" />
+    type="info"
+  />
  <Alert
    message="警告提示的文案"
    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
-    type="warning" />
+    type="warning"
+  />
  <Alert
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
-    type="error" />
+    type="error"
+  />
 </div>, mountNode);
 ````
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@ -16,20 +16,24 @@ ReactDOM.render(<div>
  <Alert message="成功提示的文案"
    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
    type="success"
-    showIcon />
+    showIcon
+  />
  <Alert message="消息提示的文案"
    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
    type="info"
-    showIcon />
+    showIcon
+  />
  <Alert
    message="警告提示的文案"
    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
    type="warning"
-    showIcon />
+    showIcon
+  />
  <Alert
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
-    showIcon />
+    showIcon
+  />
 </div>, mountNode);
 ````
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@ -82,7 +82,8 @@ export default class Alert extends React.Component {
      <Animate component=""
        showProp="data-show"
        transitionName="slide-up"
-        onEnd={this.animationEnd}>
+        onEnd={this.animationEnd}
+      >
        <div data-show={this.state.closing} className={alertCls}>
          {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
          <span className={`${prefixCls}-message`}>{message}</span>
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@ -46,11 +46,13 @@ export default class Badge extends React.Component {
        <Animate component=""
          showProp="data-show"
          transitionName={`${prefixCls}-zoom`}
-          transitionAppear>
+          transitionAppear
+        >
          {
            hidden ? null :
              <ScrollNumber data-show={!hidden} className={scrollNumberCls}
-                count={count} style={style} />
+                count={count} style={style}
+              />
          }
        </Animate>
      </span>
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@ -37,7 +37,8 @@ function Home(props) {
        marginTop: 15,
        paddingBottom: 15,
        borderBottom: '1px dashed #ccc',
-      }}>
+      }}
+      >
        点击上面的导航切换页面，面包屑在下面：
      </div>
      <Breadcrumb {...props} />
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@ -104,7 +104,8 @@ export default class Button extends React.Component {
        type={htmlType || 'button'}
        className={classes}
        onMouseUp={this.handleMouseUp}
-        onClick={this.handleClick}>
+        onClick={this.handleClick}
+      >
        {iconType ? <Icon type={iconType} /> : null}{kids}
      </button>
    );
--- a/components/calendar/Header.jsx
+++ b/components/calendar/Header.jsx
@ -45,7 +45,8 @@ export default class Header extends React.Component {
        dropdownMenuStyle={{ minWidth: 103 }}
        className={`${prefixCls}-year-select`}
        onChange={this.onYearChange}
-        value={String(year)}>
+        value={String(year)}
+      >
        {options}
      </Select>
    );
@ -69,7 +70,8 @@ export default class Header extends React.Component {
        dropdownMatchSelectWidth={false}
        className={`${prefixCls}-month-select`}
        value={String(month)}
-        onChange={this.onMonthChange}>
+        onChange={this.onMonthChange}
+      >
        {options}
      </Select>
    );
--- a/components/calendar/demo/custom-render.md
+++ b/components/calendar/demo/custom-render.md
@ -26,6 +26,7 @@ function monthCellRender(value) {

 ReactDOM.render(
  <Calendar defaultValue={new Date('2010-10-10')}
-    dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+    dateCellRender={dateCellRender} monthCellRender={monthCellRender}
+  />
 , mountNode);
 ````
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@ -139,7 +139,8 @@ export default class Calendar extends React.Component {
          locale={locale.lang}
          prefixCls={prefixCls}
          onTypeChange={this.setType}
-          onValueChange={this.setValue} />
+          onValueChange={this.setValue}
+        />
        <FullCalendar
          {...props}
          Select={noop}
@ -149,7 +150,8 @@ export default class Calendar extends React.Component {
          showHeader={false}
          value={value}
          monthCellRender={this.monthCellRender}
-          dateCellRender={this.dateCellRender} />
+          dateCellRender={this.dateCellRender}
+        />
      </div>
    );
  }
--- a/components/card/demo/grid.md
+++ b/components/card/demo/grid.md
@ -35,11 +35,11 @@ ReactDOM.render(

 ````css
 /* Increase grid spacing of 16px  */
-.code-box-demo .row {
+.code-box-demo .ant-row {
  margin-left: -8px;
  margin-right: -8px;
 }
-.code-box-demo .row > div {
+.code-box-demo .ant-row > div {
  padding: 0 8px;
 }
 ````
--- a/components/cascader/demo/custom-render.md
+++ b/components/cascader/demo/custom-render.md
@ -56,6 +56,7 @@ ReactDOM.render(
    options={options}
    defaultValue={['zhejiang', 'hangzhou', 'xihu']}
    displayRender={displayRender}
-    style={{ width: 200 }} />
+    style={{ width: 200 }}
+  />
 , mountNode);
 ````
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@ -43,6 +43,7 @@ function displayRender(label) {

 ReactDOM.render(
  <Cascader options={options} expandTrigger="hover"
-    displayRender={displayRender} onChange={onChange} />
+    displayRender={displayRender} onChange={onChange}
+  />
 , mountNode);
 ````
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@ -80,7 +80,8 @@ export default class Cascader extends React.Component {
    const clearIcon = (allowClear && !disabled && this.state.value.length > 0) ?
      <Icon type="cross-circle"
        className={`${prefixCls}-picker-clear`}
-        onClick={this.clearSelection} /> : null;
+        onClick={this.clearSelection}
+      /> : null;
    const arrowCls = classNames({
      [`${prefixCls}-picker-arrow`]: true,
      [`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
@ -99,17 +100,20 @@ export default class Cascader extends React.Component {
        value={this.state.value}
        popupVisible={this.state.popupVisible}
        onPopupVisibleChange={this.handlePopupVisibleChange}
-        onChange={this.handleChange}>
+        onChange={this.handleChange}
+      >
        {children ||
          <span
            style={style}
-            className={pickerCls}>
+            className={pickerCls}
+          >
            <Input {...otherProps}
              placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
              className={`${prefixCls}-input ant-input ${sizeCls}`}
              value={null}
              disabled={disabled}
-              readOnly />
+              readOnly
+            />
            <span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
            {clearIcon}
            <Icon type="down" className={arrowCls} />
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@ -64,7 +64,8 @@ export default class CheckboxGroup extends React.Component {
            <Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
              checked={this.state.value.indexOf(option.value) !== -1}
              onChange={() => this.toggleOption(option)}
-              className="ant-checkbox-group-item" key={option.value}>
+              className="ant-checkbox-group-item" key={option.value}
+            >
              {option.label}
            </Checkbox>
          )
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@ -22,18 +22,21 @@ const App = React.createClass({
        <p style={{ marginBottom: '20px' }}>
          <Checkbox checked={this.state.checked}
            disabled={this.state.disabled}
-            onChange={this.onChange}>
+            onChange={this.onChange}
+          >
            {label}
          </Checkbox>
        </p>
        <p>
          <Button type="primary" size="small"
-            onClick={this.toggleChecked}>
+            onClick={this.toggleChecked}
+          >
            {!this.state.checked ? '选中' : '取消'}
          </Button>
          <Button style={{ marginLeft: '10px' }}
            type="primary" size="small"
-            onClick={this.toggleDisable}>
+            onClick={this.toggleDisable}
+          >
            {!this.state.disabled ? '不可用' : '可用'}
          </Button>
        </p>
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@ -126,14 +126,16 @@ export default class RangePicker extends React.Component {
                  onChange={props.handleInputChange}
                  value={start ? props.getFormatter().format(start) : ''}
                  placeholder={startPlaceholder}
-                  className="ant-calendar-range-picker-input" />
+                  className="ant-calendar-range-picker-input"
+                />
                <span className="ant-calendar-range-picker-separator"> ~ </span>
                <input
                  disabled={disabled}
                  onChange={props.handleInputChange}
                  value={end ? props.getFormatter().format(end) : ''}
                  placeholder={endPlaceholder}
-                  className="ant-calendar-range-picker-input" />
+                  className="ant-calendar-range-picker-input"
+                />
                <span className="ant-calendar-picker-icon" />
              </span>
            );
--- a/components/date-picker/createPicker.jsx
+++ b/components/date-picker/createPicker.jsx
@ -94,7 +94,8 @@ export default function createPicker(TheCalendar) {
                      onChange={props.handleInputChange}
                      value={value ? props.getFormatter().format(value) : ''}
                      placeholder={placeholder}
-                      className={props.pickerInputClass} />
+                      className={props.pickerInputClass}
+                    />
                    <span className="ant-calendar-picker-icon" />
                  </span>
                );
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@ -45,11 +45,13 @@ const DateRange = React.createClass({
        <DatePicker disabledDate={this.disabledStartDate}
          value={this.state.startValue}
          placeholder="开始日期"
-          onChange={this.onStartChange} />
+          onChange={this.onStartChange}
+        />
        <DatePicker disabledDate={this.disabledEndDate}
          value={this.state.endValue}
          placeholder="结束日期"
-          onChange={this.onEndChange} />
+          onChange={this.onEndChange}
+        />
      </div>
    );
  },
--- a/components/date-picker/wrapPicker.jsx
+++ b/components/date-picker/wrapPicker.jsx
@ -103,7 +103,7 @@ export default function wrapPicker(Picker, defaultFormat) {
          placeholder={locale.timePickerLocale.placeholder}
          locale={locale.timePickerLocale}
          transitionName="slide-up"
-          />
+        />
      ) : null;

      return (
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@ -33,7 +33,8 @@ const OverlayVisible = React.createClass({
    return (
      <Dropdown overlay={menu}
        onVisibleChange={this.handleVisibleChange}
-        visible={this.state.visible}>
+        visible={this.state.visible}
+      >
        <a className="ant-dropdown-link" href="#">
          鼠标移入 <Icon type="down" />
        </a>
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@ -33,8 +33,8 @@ export default class FormItem extends React.Component {
      return '';
    }
    const { span, offset } = colDef;
-    const col = span ? `col-${span}` : '';
-    const offsetCol = offset ? ` col-offset-${offset}` : '';
+    const col = span ? `ant-col-${span}` : '';
+    const offsetCol = offset ? ` ant-col-offset-${offset}` : '';
    return col + offsetCol;
  }

--- a/components/form/demo/advanced-search-form.md
+++ b/components/form/demo/advanced-search-form.md
@ -18,19 +18,22 @@ ReactDOM.render(
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
          label="较长搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
@ -38,19 +41,22 @@ ReactDOM.render(
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
          label="较长搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
@ -58,19 +64,22 @@ ReactDOM.render(
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
          label="较长搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <DatePicker size="default" />
        </FormItem>
        <FormItem
          label="搜索名称"
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}>
+          wrapperCol={{ span: 14 }}
+        >
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
@ -96,7 +105,7 @@ ReactDOM.render(
 }

 /* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
-.ant-advanced-search-form > .row {
+.ant-advanced-search-form > .ant-row {
  position: relative;
  left: -6px;
 }
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@ -23,7 +23,8 @@ ReactDOM.render(
      id="control-input"
      label="输入框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}>
+      wrapperCol={{ span: 14 }}
+    >
      <Input id="control-input" placeholder="Please enter..." />
    </FormItem>

@ -31,7 +32,8 @@ ReactDOM.render(
      id="control-textarea"
      label="文本域"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}>
+      wrapperCol={{ span: 14 }}
+    >
      <Input type="textarea" id="control-textarea" rows="3" />
    </FormItem>

@ -39,7 +41,8 @@ ReactDOM.render(
      id="select"
      label="Select 选择器"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}>
+      wrapperCol={{ span: 14 }}
+    >
      <Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
        <Option value="jack">jack</Option>
        <Option value="lucy">lucy</Option>
@ -51,7 +54,8 @@ ReactDOM.render(
    <FormItem
      label="Checkbox 多选框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }} >
+      wrapperCol={{ span: 18 }}
+    >
      <Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
      <Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
      <Checkbox className="ant-checkbox-vertical" disabled>选项三（不可选）</Checkbox>
@ -60,7 +64,8 @@ ReactDOM.render(
    <FormItem
      label="Checkbox 多选框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }} >
+      wrapperCol={{ span: 18 }}
+    >
      <Checkbox className="ant-checkbox-inline">选项一</Checkbox>
      <Checkbox className="ant-checkbox-inline">选项二</Checkbox>
      <Checkbox className="ant-checkbox-inline">选项三</Checkbox>
@ -69,7 +74,8 @@ ReactDOM.render(
    <FormItem
      label="Radio 单选框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }} >
+      wrapperCol={{ span: 18 }}
+    >
      <RadioGroup defaultValue="b">
        <Radio value="a">A</Radio>
        <Radio value="b">B</Radio>
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.md
@ -42,12 +42,14 @@ let Demo = React.createClass({
          <Form horizontal form={this.props.form}>
            <FormItem
              {...formItemLayout}
-              label="用户名">
+              label="用户名"
+            >
              <Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
            </FormItem>
            <FormItem
              {...formItemLayout}
-              label="密码">
+              label="密码"
+            >
              <Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
            </FormItem>
          </Form>
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@ -26,17 +26,20 @@ let Demo = React.createClass({
      <Form horizontal onSubmit={this.handleSubmit}>
        <FormItem
          {...formItemLayout}
-          label="用户名">
+          label="用户名"
+        >
          <p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label="密码">
+          label="密码"
+        >
          <Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label="您的性别">
+          label="您的性别"
+        >
          <RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
            <Radio value="male">男的</Radio>
            <Radio value="female">女的</Radio>
@ -45,12 +48,14 @@ let Demo = React.createClass({
        <FormItem
          {...formItemLayout}
          label="备注"
-          help="随便写点什么">
+          help="随便写点什么"
+        >
          <Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}>
+          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}
+        >
          <Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
        </FormItem>
        <FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@ -20,14 +20,18 @@ let Demo = React.createClass({
    return (
      <Form inline onSubmit={this.handleSubmit}>
        <FormItem
-          label="账户">
+          label="账户"
+        >
          <Input placeholder="请输入账户名"
-            {...getFieldProps('userName')} />
+            {...getFieldProps('userName')}
+          />
        </FormItem>
        <FormItem
-          label="密码">
+          label="密码"
+        >
          <Input type="password" placeholder="请输入密码"
-            {...getFieldProps('password')} />
+            {...getFieldProps('password')}
+          />
        </FormItem>
        <FormItem>
          <Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>
--- a/components/form/demo/input-group.md
+++ b/components/form/demo/input-group.md
@ -16,7 +16,8 @@ ReactDOM.render(
    <FormItem
      label="标签输入框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}>
+      wrapperCol={{ span: 16 }}
+    >
      <Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
    </FormItem>

@ -24,14 +25,16 @@ ReactDOM.render(
      label="标签输入框"
      labelCol={{ span: 6 }}
      validateStatus="success"
-      wrapperCol={{ span: 16 }}>
+      wrapperCol={{ span: 16 }}
+    >
      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
    </FormItem>

    <FormItem
      label="select 标签输入框"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}>
+      wrapperCol={{ span: 16 }}
+    >
      <InputGroup>
        <Input id="site4" placeholder="www.mysite" />
        <div className="ant-input-group-wrap">
@ -48,7 +51,8 @@ ReactDOM.render(
    <FormItem
      label="输入身份证"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}>
+      wrapperCol={{ span: 16 }}
+    >
      <InputGroup>
        <Col span="6">
          <Input id="certNo1" />
@ -68,7 +72,8 @@ ReactDOM.render(
    <FormItem
      label="电话号码"
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}>
+      wrapperCol={{ span: 16 }}
+    >
      <InputGroup>
        <Col span="4">
          <Input id="tel1" defaultValue="086" />
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@ -46,16 +46,19 @@ let Demo = React.createClass({
        <FormItem
          label="InputNumber 数字输入框"
          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 10 }}>
+          wrapperCol={{ span: 10 }}
+        >
          <InputNumber min={1} max={10} style={{ width: 100 }}
-            {...getFieldProps('inputNumber', { initialValue: 3 })} />
+            {...getFieldProps('inputNumber', { initialValue: 3 })}
+          />
          <span className="ant-form-text"> 台机器</span>
        </FormItem>

        <FormItem
          label="我是标题"
          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 10 }}>
+          wrapperCol={{ span: 10 }}
+        >
          <p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
          <p className="ant-form-text">
            <a href="#">链接文字</a>
@ -66,7 +69,8 @@ let Demo = React.createClass({
          label="Switch 开关"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 10 }}
-          required>
+          required
+        >
          <Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
        </FormItem>

@ -74,7 +78,8 @@ let Demo = React.createClass({
          label="Slider 滑动输入条"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 10 }}
-          required>
+          required
+        >
          <Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
        </FormItem>

@ -82,9 +87,11 @@ let Demo = React.createClass({
          label="Select 选择器"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          required>
+          required
+        >
          <Select style={{ width: 200 }}
-            {...getFieldProps('select')}>
+            {...getFieldProps('select')}
+          >
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
            <Option value="disabled" disabled>disabled</Option>
@ -97,14 +104,16 @@ let Demo = React.createClass({
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          required
-          hasFeedback>
+          hasFeedback
+        >
          <Cascader style={{ width: 200 }} options={areaData} {...getFieldProps('area')} />
        </FormItem>

        <FormItem
          label="DatePicker 日期选择框"
          labelCol={{ span: 8 }}
-          required>
+          required
+        >
          <Col span="6">
            <FormItem>
              <DatePicker {...getFieldProps('startDate')} />
@ -125,13 +134,15 @@ let Demo = React.createClass({
          label="TimePicker 时间选择器"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          required>
+          required
+        >
          <TimePicker {...getFieldProps('time')} />
        </FormItem>

        <FormItem
          label="选项"
-          labelCol={{ span: 8 }}>
+          labelCol={{ span: 8 }}
+        >
          <RadioGroup {...getFieldProps('rg')}>
            <RadioButton value="a">选项一</RadioButton>
            <RadioButton value="b">选项二</RadioButton>
@ -143,7 +154,8 @@ let Demo = React.createClass({
          label="logo图"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          help="提示信息要长长长长长长长长长长长长长长">
+          help="提示信息要长长长长长长长长长长长长长长"
+        >
          <Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
            {...getFieldProps('upload', {
              valuePropName: 'fileList',
--- a/components/form/demo/validate-basic.md
+++ b/components/form/demo/validate-basic.md
@ -114,36 +114,43 @@ let BasicDemo = React.createClass({
          {...formItemLayout}
          label="用户名"
          hasFeedback
-          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
+          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}
+        >
          <Input {...nameProps} placeholder="实时校验，输入 JasonWood 看看" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="邮箱"
-          hasFeedback>
+          hasFeedback
+        >
          <Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="密码"
-          hasFeedback>
+          hasFeedback
+        >
          <Input {...passwdProps} type="password" autoComplete="off"
-            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
+            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
+          />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="确认密码"
-          hasFeedback>
+          hasFeedback
+        >
          <Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
-            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
+            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
+          />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="备注">
+          label="备注"
+        >
          <Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
        </FormItem>

--- a/components/form/demo/validate-customized.md
+++ b/components/form/demo/validate-customized.md
@ -145,7 +145,8 @@ let Demo = React.createClass({
            <Col span="18">
              <FormItem
                {...formItemLayout}
-                label="密码">
+                label="密码"
+              >
                <Input {...passProps} type="password"
                  onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  autoComplete="off" id="pass"
@ -161,7 +162,8 @@ let Demo = React.createClass({
            <Col span="18">
              <FormItem
                {...formItemLayout}
-                label="确认密码">
+                label="确认密码"
+              >
                <Input {...rePassProps} type="password"
                  onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  autoComplete="off" id="rePass"
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@ -110,7 +110,8 @@ let Demo = React.createClass({
      <Form horizontal form={this.props.form}>
        <FormItem
          {...formItemLayout}
-          label="国籍">
+          label="国籍"
+        >
          <Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
            <Option value="china">中国</Option>
            <Option value="use">美国</Option>
@ -122,7 +123,8 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="喜欢的颜色">
+          label="喜欢的颜色"
+        >
          <Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
            <Option value="red">红色</Option>
            <Option value="orange">橙色</Option>
@ -134,7 +136,8 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="性别">
+          label="性别"
+        >
          <RadioGroup {...radioProps}>
            <Radio value="male">男</Radio>
            <Radio value="female">女</Radio>
@ -144,44 +147,53 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="兴趣爱好">
+          label="兴趣爱好"
+        >
          <Checkbox {...getFieldProps('eat', {
            valuePropName: 'checked',
-          })}>吃饭饭</Checkbox>
+          })}
+          >吃饭饭</Checkbox>
          <Checkbox {...getFieldProps('sleep', {
            valuePropName: 'checked',
-          })}>睡觉觉</Checkbox>
+          })}
+          >睡觉觉</Checkbox>
          <Checkbox {...getFieldProps('beat', {
            valuePropName: 'checked',
-          })}>打豆豆</Checkbox>
+          })}
+          >打豆豆</Checkbox>
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="生日">
+          label="生日"
+        >
          <DatePicker {...birthdayProps} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="选一个时间">
+          label="选一个时间"
+        >
          <TimePicker {...timeProps} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="8~12间的质数">
+          label="8~12间的质数"
+        >
          <InputNumber {...primeNumberProps} min={8} max={12} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="选择地址">
+          label="选择地址"
+        >
          <Cascader {...addressProps} options={address} />
        </FormItem>

        <FormItem
-          wrapperCol={{ span: 12, offset: 7 }} >
+          wrapperCol={{ span: 12, offset: 7 }}
+        >
          <Button type="primary" onClick={this.handleSubmit}>确定</Button>
          &nbsp;&nbsp;&nbsp;
          <Button type="ghost" onClick={this.handleReset}>重置</Button>
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@ -22,7 +22,8 @@ ReactDOM.render(
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      validateStatus="error"
-      help="请输入数字和字母组合">
+      help="请输入数字和字母组合"
+    >
      <Input defaultValue="无效选择" id="error" />
    </FormItem>

@ -30,7 +31,8 @@ ReactDOM.render(
      label="警告校验"
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
-      validateStatus="warning">
+      validateStatus="warning"
+    >
      <Input defaultValue="前方高能预警" id="warning" />
    </FormItem>

@ -40,7 +42,8 @@ ReactDOM.render(
      wrapperCol={{ span: 12 }}
      hasFeedback
      validateStatus="validating"
-      help="信息审核中...">
+      help="信息审核中..."
+    >
      <Input defaultValue="我是被校验的内容" id="validating" />
    </FormItem>

@ -49,7 +52,8 @@ ReactDOM.render(
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      hasFeedback
-      validateStatus="success">
+      validateStatus="success"
+    >
      <Input defaultValue="我是正文" id="success" />
    </FormItem>

@ -58,7 +62,8 @@ ReactDOM.render(
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      hasFeedback
-      validateStatus="warning">
+      validateStatus="warning"
+    >
      <Input defaultValue="前方高能预警" id="warning" />
    </FormItem>

@ -68,14 +73,16 @@ ReactDOM.render(
      wrapperCol={{ span: 12 }}
      hasFeedback
      validateStatus="error"
-      help="请输入数字和字母组合">
+      help="请输入数字和字母组合"
+    >
      <Input defaultValue="无效选择" id="error" />
    </FormItem>

    <FormItem
      label="行内校验"
      labelCol={{ span: 5 }}
-      help>
+      help
+    >
      <Col span="6">
        <FormItem validateStatus="error" help="请选择正确日期">
          <DatePicker />
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@ -99,12 +99,14 @@ export default class Input extends React.Component {
      case 'textarea':
        return (
          <textarea {...props} placeholder={placeholder}
-            className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
+            className={inputClassName} onKeyDown={this.handleKeyDown} ref="input"
+          />
        );
      default:
        return (
          <input {...props} placeholder={placeholder}
-            className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
+            className={inputClassName} onKeyDown={this.handleKeyDown} ref="input"
+          />
        );
    }
  }
--- a/components/input/demo/search-input.md
+++ b/components/input/demo/search-input.md
@ -46,7 +46,8 @@ const SearchInput = React.createClass({
      <div className="ant-search-input-wrapper" style={style}>
        <InputGroup className={searchCls}>
          <Input {...restProps} value={this.state.value} onChange={this.handleInputChange}
-            onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch} />
+            onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch}
+          />
          <div className="ant-input-group-wrap">
            <Button icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
          </div>
@ -58,6 +59,7 @@ const SearchInput = React.createClass({

 ReactDOM.render(
  <SearchInput placeholder="input search text"
-    onSearch={value => console.log(value)} style={{ width: 200 }} />
+    onSearch={value => console.log(value)} style={{ width: 200 }}
+  />
 , mountNode);
 ````
--- a/components/layout/col.jsx
+++ b/components/layout/col.jsx
@ -16,19 +16,19 @@ export default function Col(props) {
    }
    sizeClassObj = {
      ...sizeClassObj,
-      [`col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-      [`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,
+      [`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+      [`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order,
+      [`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
+      [`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push,
+      [`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
    };
  });
  const classes = classNames({
-    [`col-${span}`]: span !== undefined,
-    [`col-order-${order}`]: order,
-    [`col-offset-${offset}`]: offset,
-    [`col-push-${push}`]: push,
-    [`col-pull-${pull}`]: pull,
+    [`ant-col-${span}`]: span !== undefined,
+    [`ant-col-order-${order}`]: order,
+    [`ant-col-offset-${offset}`]: offset,
+    [`ant-col-push-${push}`]: push,
+    [`ant-col-pull-${pull}`]: pull,
    [className]: !!className,
    ...sizeClassObj,
  });
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@ -13,19 +13,19 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
  <div>
    <Row>
-      <Col span={12}>.col-12</Col>
-      <Col span={12}>.col-12</Col>
+      <Col span={12}>.ant-col-12</Col>
+      <Col span={12}>.ant-col-12</Col>
    </Row>
    <Row>
-      <Col span={8}>.col-8</Col>
-      <Col span={8}>.col-8</Col>
-      <Col span={8}>.col-8</Col>
+      <Col span={8}>.ant-col-8</Col>
+      <Col span={8}>.ant-col-8</Col>
+      <Col span={8}>.ant-col-8</Col>
    </Row>
    <Row>
-      <Col span={6}>.col-6</Col>
-      <Col span={6}>.col-6</Col>
-      <Col span={6}>.col-6</Col>
-      <Col span={6}>.col-6</Col>
+      <Col span={6}>.ant-col-6</Col>
+      <Col span={6}>.ant-col-6</Col>
+      <Col span={6}>.ant-col-6</Col>
+      <Col span={6}>.ant-col-6</Col>
    </Row>
  </div>,
  mountNode
--- a/components/layout/demo/flex-align.md
+++ b/components/layout/demo/flex-align.md
@ -14,26 +14,26 @@ ReactDOM.render(
  <div>
    <p>顶部对齐</p>
    <Row type="flex" justify="center" align="top">
-      <Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
    </Row>

    <p>居中对齐</p>
    <Row type="flex" justify="space-around" align="middle">
-      <Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
    </Row>

    <p>底部对齐</p>
    <Row type="flex" justify="space-between" align="bottom">
-      <Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
    </Row>
  </div>,
  mountNode
--- a/components/layout/demo/flex.md
+++ b/components/layout/demo/flex.md
@ -14,42 +14,42 @@ ReactDOM.render(
  <div>
    <p>子元素居左排列</p>
    <Row type="flex" justify="start">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
    </Row>

    <p>子元素居中排列</p>
    <Row type="flex" justify="center">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
    </Row>

    <p>子元素居右排列</p>
    <Row type="flex" justify="end">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
    </Row>

    <p>子元素等宽排列</p>
    <Row type="flex" justify="space-between">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
    </Row>

    <p>子元素分散对齐</p>
    <Row type="flex" justify="space-around">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
    </Row>
  </div>,
  mountNode
--- a/components/layout/demo/gutter.md
+++ b/components/layout/demo/gutter.md
@ -12,16 +12,16 @@ ReactDOM.render(
  <div className="gutter-example">
    <Row gutter={16}>
      <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.col-6</div>
+        <div className="gutter-box">.ant-col-6</div>
      </Col>
      <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.col-6</div>
+        <div className="gutter-box">.ant-col-6</div>
      </Col>
      <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.col-6</div>
+        <div className="gutter-box">.ant-col-6</div>
      </Col>
      <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.col-6</div>
+        <div className="gutter-box">.ant-col-6</div>
      </Col>
    </Row>
  </div>
@ -29,7 +29,7 @@ ReactDOM.render(
 ````

 ````css
-.gutter-example .row > div {
+.gutter-example .ant-row > div {
  background: transparent;
  border: 0;
 }
--- a/components/layout/demo/offset.md
+++ b/components/layout/demo/offset.md
@ -13,15 +13,15 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
  <div>
    <Row>
-      <Col span={8}>.col-8</Col>
-      <Col span={8} offset={8}>.col-8</Col>
+      <Col span={8}>.ant-col-8</Col>
+      <Col span={8} offset={8}>.ant-col-8</Col>
    </Row>
    <Row>
-      <Col span={6} offset={6}>.col-6 .col-offset-6</Col>
-      <Col span={6} offset={6}>.col-6 .col-offset-6</Col>
+      <Col span={6} offset={6}>.ant-col-6 .ant-col-offset-6</Col>
+      <Col span={6} offset={6}>.ant-col-6 .ant-col-offset-6</Col>
    </Row>
    <Row>
-      <Col span={12} offset={6}>.col-12 .col-offset-6</Col>
+      <Col span={12} offset={6}>.ant-col-12 .ant-col-offset-6</Col>
    </Row>
  </div>,
  mountNode
--- a/components/layout/demo/sort.md
+++ b/components/layout/demo/sort.md
@ -13,8 +13,8 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
  <div>
    <Row>
-      <Col span={18} push={6}>.col-18 .col-push-6</Col>
-      <Col span={6} pull={18}>.col-6 .col-pull-18</Col>
+      <Col span={18} push={6}>.ant-col-18 .ant-col-push-6</Col>
+      <Col span={6} pull={18}>.ant-col-6 .ant-col-pull-18</Col>
    </Row>
  </div>,
  mountNode
--- a/components/layout/index.md
+++ b/components/layout/index.md
@ -11,49 +11,49 @@ english: Layout
 ## 设计理念

 <div class="layout-demo">
-<div class="row demo-row">
-  <div class="col-24 demo-col demo-col-1">
+<div class="ant-row demo-row">
+  <div class="ant-col-24 demo-col demo-col-1">
    100%
  </div>
 </div>
-<div class="row demo-row">
-  <div class="col-6 demo-col demo-col-2">
+<div class="ant-row demo-row">
+  <div class="ant-col-6 demo-col demo-col-2">
    25%
  </div>
-  <div class="col-6 demo-col demo-col-3">
+  <div class="ant-col-6 demo-col demo-col-3">
    25%
  </div>
-  <div class="col-6 demo-col demo-col-2">
+  <div class="ant-col-6 demo-col demo-col-2">
    25%
  </div>
-  <div class="col-6 demo-col demo-col-3">
+  <div class="ant-col-6 demo-col demo-col-3">
    25%
  </div>
 </div>
-<div class="row demo-row">
-  <div class="col-8 demo-col demo-col-4">
+<div class="ant-row demo-row">
+  <div class="ant-col-8 demo-col demo-col-4">
    33.33%
  </div>
-  <div class="col-8 demo-col demo-col-5">
+  <div class="ant-col-8 demo-col demo-col-5">
    33.33%
  </div>
-  <div class="col-8 demo-col demo-col-4">
+  <div class="ant-col-8 demo-col demo-col-4">
    33.33%
  </div>
 </div>
-<div class="row demo-row">
-  <div class="col-12 demo-col demo-col-1">
+<div class="ant-row demo-row">
+  <div class="ant-col-12 demo-col demo-col-1">
    50%
  </div>
-  <div class="col-12 demo-col demo-col-3">
+  <div class="ant-col-12 demo-col demo-col-3">
    50%
  </div>
 </div>
-<div class="row demo-row">
-  <div class="col-16 demo-col demo-col-4">
+<div class="ant-row demo-row">
+  <div class="ant-col-16 demo-col demo-col-4">
    66.66%
  </div>
-  <div class="col-8 demo-col demo-col-5">
+  <div class="ant-col-8 demo-col demo-col-5">
    33.33%
  </div>
 </div>
@ -69,7 +69,7 @@ english: Layout

 * 通过`row`在水平方向建立一组`column`（简写col）
 * 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
-* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
+* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.ant-col-8`来创建
 * 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列

 ## Flex 布局
--- a/components/layout/row.jsx
+++ b/components/layout/row.jsx
@ -16,10 +16,10 @@ export default class Row extends React.Component {
  render() {
    const { type, justify, align, className, gutter, style, children, ...others } = this.props;
    const classes = classNames({
-      row: !type,
-      [`row-${type}`]: type,
-      [`row-${type}-${justify}`]: justify,
-      [`row-${type}-${align}`]: align,
+      'ant-row': !type,
+      [`ant-row-${type}`]: type,
+      [`ant-row-${type}-${justify}`]: justify,
+      [`ant-row-${type}-${align}`]: align,
      [className]: className,
    });
    const rowStyle = gutter > 0 ? {
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@ -3,12 +3,12 @@
@import "./mixin";

 // Grid system
-.row {
+.ant-row {
  .make-row();
  display: block;
 }

-.row-flex {
+.ant-row-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
@ -20,46 +20,46 @@
 }

 // x轴原点
-.row-flex-start {
+.ant-row-flex-start {
  justify-content: flex-start;
 }

 // x轴居中
-.row-flex-center {
+.ant-row-flex-center {
  justify-content: center;
 }

 // x轴反方向
-.row-flex-end {
+.ant-row-flex-end {
  justify-content: flex-end;
 }

 // x轴平分
-.row-flex-space-between {
+.ant-row-flex-space-between {
  justify-content: space-between;
 }

 // x轴有间隔地平分
-.row-flex-space-around {
+.ant-row-flex-space-around {
  justify-content: space-around;
 }

 // 顶部对齐
-.row-flex-top {
+.ant-row-flex-top {
  align-items: flex-start;
 }

 // 居中对齐
-.row-flex-middle {
+.ant-row-flex-middle {
  align-items: center;
 }

 // 底部对齐
-.row-flex-bottom {
+.ant-row-flex-bottom {
  align-items: flex-end;
 }

-.col {
+.ant-col {
  position: relative;
  display: block;
 }
--- a/components/layout/style/mixin.less
+++ b/components/layout/style/mixin.less
@ -12,11 +12,11 @@

 .make-grid-columns() {
  .col(@index) {
-    @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) {
-    @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) {
@ -33,11 +33,11 @@

 .float-grid-columns(@class) {
  .col(@index) { // initial
-    @item: ~".col@{class}-@{index}";
+    @item: ~".ant-col@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
-    @item: ~".col@{class}-@{index}";
+    @item: ~".ant-col@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
@ -51,33 +51,33 @@

 // lesshint false
 .loop-grid-columns(@index, @class) when (@index > 0) {
-  .col@{class}-@{index} {
+  .ant-col@{class}-@{index} {
    display: block;
    width: percentage((@index / @grid-columns));
  }
-  .col@{class}-push-@{index} {
+  .ant-col@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
-  .col@{class}-pull-@{index} {
+  .ant-col@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
-  .col@{class}-offset-@{index} {
+  .ant-col@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
-  .col@{class}-order-@{index} {
+  .ant-col@{class}-order-@{index} {
    order: @index;
  }
  .loop-grid-columns((@index - 1), @class);
 }

 .loop-grid-columns(@index, @class) when (@index = 0) {
-  .col@{class}-@{index} {
+  .ant-col@{class}-@{index} {
    display: none;
  }
-  .col-push-@{index} {
+  .ant-col-push-@{index} {
    left: auto;
  }
-  .col-pull-@{index} {
+  .ant-col-pull-@{index} {
    right: auto;
  }
 }
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@ -77,7 +77,8 @@ const Page = React.createClass({
            showSearch
            titles={['', '']}
            targetKeys={[]}
-            render={item => item.title} />
+            render={item => item.title}
+          />
        </div>
        <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
          <Calendar fullscreen={false} />
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@ -26,7 +26,8 @@ const App = React.createClass({
    return (
      <Menu onClick={this.handleClick}
        selectedKeys={[this.state.current]}
-        mode="horizontal">
+        mode="horizontal"
+      >
        <Menu.Item key="mail">
          <Icon type="mail" />导航一
        </Menu.Item>
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@ -36,7 +36,8 @@ const Sider = React.createClass({
        onOpen={this.onToggle}
        onClose={this.onToggle}
        selectedKeys={[this.state.current]}
-        mode="inline">
+        mode="inline"
+      >
        <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
          <Menu.Item key="1">选项1</Menu.Item>
          <Menu.Item key="2">选项2</Menu.Item>
--- a/components/menu/demo/sider.md
+++ b/components/menu/demo/sider.md
@ -28,7 +28,8 @@ const Sider = React.createClass({
        style={{ width: 240 }}
        defaultOpenKeys={['sub1']}
        selectedKeys={[this.state.current]}
-        mode="inline">
+        mode="inline"
+      >
        <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
          <MenuItemGroup title="分组1">
            <Menu.Item key="1">选项1</Menu.Item>
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@ -30,7 +30,8 @@ const Sider = React.createClass({
        <Menu
          style={{ width: 240 }}
          defaultOpenKeys={['sub1']}
-          mode={this.state.mode}>
+          mode={this.state.mode}
+        >
          <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
            <MenuItemGroup title="分组1">
              <Menu.Item key="1">选项1</Menu.Item>
--- a/components/menu/demo/theme.md
+++ b/components/menu/demo/theme.md
@ -37,7 +37,8 @@ const Sider = React.createClass({
          style={{ width: 240 }}
          defaultOpenKeys={['sub1']}
          selectedKeys={[this.state.current]}
-          mode="inline">
+          mode="inline"
+        >
          <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
            <Menu.Item key="1">选项1</Menu.Item>
            <Menu.Item key="2">选项2</Menu.Item>
--- a/components/modal/Modal.jsx
+++ b/components/modal/Modal.jsx
@ -78,21 +78,24 @@ export default class Modal extends React.Component {
      <Button key="cancel"
        type="ghost"
        size="large"
-        onClick={this.handleCancel}>
+        onClick={this.handleCancel}
+      >
        {cancelText || '取消'}
      </Button>,
      <Button key="confirm"
        type="primary"
        size="large"
        loading={props.confirmLoading}
-        onClick={this.handleOk}>
+        onClick={this.handleOk}
+      >
        {okText || '确定'}
      </Button>,
    ];
    let footer = props.footer || defaultFooter;
    return (
      <Dialog onClose={this.handleCancel} footer={footer} {...props}
-        visible={props.visible} mousePosition={mousePosition} />
+        visible={props.visible} mousePosition={mousePosition}
+      />
    );
  }
 }
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@ -122,7 +122,8 @@ export default function confirm(config) {
      footer=""
      maskTransitionName="fade"
      style={style}
-      width={width}>
+      width={width}
+    >
      <div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
    </Dialog>
  , div, function () {
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@ -46,7 +46,8 @@ const Test = React.createClass({
          visible={this.state.visible}
          onOk={this.handleOk}
          confirmLoading={this.state.confirmLoading}
-          onCancel={this.handleCancel}>
+          onCancel={this.handleCancel}
+        >
          <p>{this.state.ModalText}</p>
        </Modal>
      </div>
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@ -34,7 +34,8 @@ const App = React.createClass({
      <div>
        <Button type="primary" onClick={this.showModal}>显示对话框</Button>
        <Modal title="第一个 Modal" visible={this.state.visible}
-          onOk={this.handleOk} onCancel={this.handleCancel}>
+          onOk={this.handleOk} onCancel={this.handleCancel}
+        >
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@ -43,7 +43,8 @@ const Test = React.createClass({
            <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
              提 交
            </Button>,
-          ]}>
+          ]}
+        >
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@ -33,7 +33,8 @@ const LocalizedModal = React.createClass({
        <Button type="primary" onClick={this.showModal}>Show Modal</Button>
        <Modal title="Modal" visible={this.state.visible}
          onOk={this.handleOk} onCancel={this.handleCancel}
-          okText="OK" cancelText="Cancel">
+          okText="OK" cancelText="Cancel"
+        >
          <p>Bla bla ...</p>
          <p>Bla bla ...</p>
          <p>Bla bla ...</p>
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@ -30,7 +30,8 @@ const App = React.createClass({
          style={{ top: 20 }}
          visible={this.state.modal1Visible}
          onOk={() => this.setModal1Visible(false)}
-          onCancel={() => this.setModal1Visible(false)}>
+          onCancel={() => this.setModal1Visible(false)}
+        >
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
@ -41,7 +42,8 @@ const App = React.createClass({
          wrapClassName="vertical-center-modal"
          visible={this.state.modal2Visible}
          onOk={() => this.setModal2Visible(false)}
-          onCancel={() => this.setModal2Visible(false)}>
+          onCancel={() => this.setModal2Visible(false)}
+        >
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
--- a/components/pagination/Pagination.jsx
+++ b/components/pagination/Pagination.jsx
@ -36,7 +36,8 @@ export default class Pagination extends React.Component {
        selectPrefixCls="ant-select"
        {...this.props}
        locale={locale}
-        className={className} />
+        className={className}
+      />
    );
  }
 }
--- a/components/pagination/demo/total.md
+++ b/components/pagination/demo/total.md
@ -13,7 +13,8 @@ ReactDOM.render(
    selectComponentClass={Select}
    total={80}
    showTotal={total => `共 ${total} 条`}
-    pageSize={20} defaultCurrent={1} />,
+    pageSize={20} defaultCurrent={1}
+  />,
  mountNode
 );
 ````
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@ -44,7 +44,8 @@ let App = React.createClass({
      <div>
        <Popconfirm title="确定要删除这个任务吗？"
          visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
-          onConfirm={this.confirm} onCancel={this.cancel}>
+          onConfirm={this.confirm} onCancel={this.cancel}
+        >
          <a href="#">删除某任务</a>
        </Popconfirm>
        <br />
--- a/components/popconfirm/index.jsx
+++ b/components/popconfirm/index.jsx
@ -89,7 +89,8 @@ export default class Popconfirm extends React.Component {
        transitionName={this.props.transitionName}
        visible={this.state.visible}
        trigger={trigger}
-        overlay={overlay}>
+        overlay={overlay}
+      >
        {this.props.children}
      </Tooltip>
    );
--- a/components/popover/demo/control.md
+++ b/components/popover/demo/control.md
@ -30,7 +30,8 @@ const App = React.createClass({
    );
    return (
      <Popover content={content} title="标题" trigger="click"
-        visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
+        visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
+      >
        <Button type="primary">点击弹出卡片</Button>
      </Popover>
    );
--- a/components/popover/index.jsx
+++ b/components/popover/index.jsx
@ -22,7 +22,8 @@ export default class Popover extends React.Component {
        builtinPlacements={placements}
        ref="tooltip"
        {...this.props}
-        overlay={this.getOverlay()}>
+        overlay={this.getOverlay()}
+      >
        {this.props.children}
      </Tooltip>
    );
--- a/components/progress/progress.jsx
+++ b/components/progress/progress.jsx
@ -76,7 +76,8 @@ export default class Line extends React.Component {
      progress = (
        <div className={`${prefixCls}-inner`} style={circleStyle}>
          <Circle percent={percent} strokeWidth={strokeWidth || 6}
-            strokeColor={statusColorMap[progressStatus]} trailColor={trailColor} />
+            strokeColor={statusColorMap[progressStatus]} trailColor={trailColor}
+          />
          {progressInfo}
        </div>
      );
--- a/components/queue-anim/demo/custom.md
+++ b/components/queue-anim/demo/custom.md
@ -48,7 +48,8 @@ const Test = React.createClass({
          animConfig={[
            { opacity: [1, 0], translateY: [0, 50] },
            { opacity: [1, 0], translateY: [0, -50] },
-          ]}>
+          ]}
+        >
          {list}
        </QueueAnim>
      </div>
--- a/components/queue-anim/demo/enter-leave.md
+++ b/components/queue-anim/demo/enter-leave.md
@ -47,7 +47,8 @@ const Test = React.createClass({
        <QueueAnim className="demo-content"
          key="demo"
          type={['right', 'left']}
-          ease={['easeOutQuart', 'easeInOutQuart']}>
+          ease={['easeOutQuart', 'easeInOutQuart']}
+        >
          {list}
        </QueueAnim>
      </div>
--- a/components/select/demo/combobox.md
+++ b/components/select/demo/combobox.md
@ -34,7 +34,8 @@ const Test = React.createClass({
        style={{ width: 200 }}
        onChange={this.handleChange}
        filterOption={false}
-        placeholder="请输入账户名">
+        placeholder="请输入账户名"
+      >
        {this.state.options}
      </Select>
    );
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@ -22,7 +22,8 @@ ReactDOM.render(
  <Select multiple
    style={{ width: '100%' }}
    placeholder="Please select"
-    defaultValue={['a10', 'c12']} onChange={handleChange}>
+    defaultValue={['a10', 'c12']} onChange={handleChange}
+  >
    {children}
  </Select>
 , mountNode);
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@ -18,7 +18,8 @@ ReactDOM.render(
  <Select defaultValue="lucy"
    style={{ width: 200 }}
    showSearch={false}
-    onChange={handleChange}>
+    onChange={handleChange}
+  >
    <OptGroup label="Manager">
      <Option value="jack">jack</Option>
      <Option value="lucy">lucy</Option>
--- a/components/select/demo/search-box.md
+++ b/components/select/demo/search-box.md
@ -88,7 +88,8 @@ const SearchInput = React.createClass({
            filterOption={false}
            onChange={this.handleChange}
            onFocus={this.handleFocusBlur}
-            onBlur={this.handleFocusBlur}>
+            onBlur={this.handleFocusBlur}
+          >
            {options}
          </Select>
          <div className="ant-input-group-wrap">
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@ -19,7 +19,8 @@ ReactDOM.render(
    placeholder="请选择人员"
    optionFilterProp="children"
    notFoundContent="无法找到"
-    onChange={handleChange}>
+    onChange={handleChange}
+  >
    <Option value="jack">杰克</Option>
    <Option value="lucy">露西</Option>
    <Option value="tom">汤姆</Option>
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@ -22,7 +22,8 @@ ReactDOM.render(
  <Select tags
    style={{ width: '100%' }}
    searchPlaceholder="标签模式"
-    onChange={handleChange}>
+    onChange={handleChange}
+  >
    {children}
  </Select>
 , mountNode);
--- a/components/select/index.jsx
+++ b/components/select/index.jsx
@ -44,7 +44,8 @@ export default class Select extends React.Component {
      <RcSelect {...this.props}
        className={cls}
        optionLabelProp={optionLabelProp || 'children'}
-        notFoundContent={notFoundContent} />
+        notFoundContent={notFoundContent}
+      />
    );
  }
 }
--- a/components/slider/demo/input-number.md
+++ b/components/slider/demo/input-number.md
@ -27,7 +27,8 @@ const IntegerStep = React.createClass({
        </Col>
        <Col span={4}>
          <InputNumber min={1} max={20} style={{ marginLeft: '16px' }}
-            value={this.state.inputValue} onChange={this.onChange} />
+            value={this.state.inputValue} onChange={this.onChange}
+          />
        </Col>
      </Row>
    );
@ -53,7 +54,8 @@ const DecimalStep = React.createClass({
        </Col>
        <Col span={4}>
          <InputNumber min={0} max={1} style={{ marginLeft: '16px' }} step={0.01}
-            value={this.state.inputValue} onChange={this.onChange} />
+            value={this.state.inputValue} onChange={this.onChange}
+          />
        </Col>
      </Row>
    );
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@ -19,7 +19,8 @@ const Card = React.createClass({
    const container = (
      <Alert message="消息提示的文案"
        description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
-        type="info" />
+        type="info"
+      />
    );
    return (
      <div>
--- a/components/spin/demo/tip.md
+++ b/components/spin/demo/tip.md
@ -12,7 +12,8 @@ ReactDOM.render(
  <Spin tip="正在读取数据...">
    <Alert message="消息提示的文案"
      description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
-      type="info" />
+      type="info"
+    />
  </Spin>
 , mountNode);
 ````
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@ -89,7 +89,8 @@ const Test = React.createClass({
        dataSource={this.state.data}
        pagination={this.state.pagination}
        loading={this.state.loading}
-        onChange={this.handleTableChange} />
+        onChange={this.handleTableChange}
+      />
    );
  },
 });
--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@ -25,6 +25,7 @@ ReactDOM.render(
  <Table columns={columns}
    expandedRowRender={record => <p>{record.description}</p>}
    dataSource={data}
-    className="table" />
+    className="table"
+  />
 , mountNode);
 ````
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@ -61,7 +61,8 @@ const App = React.createClass({
      <div>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" onClick={this.start}
-            disabled={!hasSelected} loading={loading}>操作</Button>
+            disabled={!hasSelected} loading={loading}
+          >操作</Button>
          <span style={{ marginLeft: 8 }}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
--- a/components/table/filterDropdown.jsx
+++ b/components/table/filterDropdown.jsx
@ -113,16 +113,19 @@ export default class FilterMenu extends React.Component {
          prefixCls="ant-dropdown-menu"
          onSelect={this.setSelectedKeys}
          onDeselect={this.setSelectedKeys}
-          selectedKeys={this.state.selectedKeys}>
+          selectedKeys={this.state.selectedKeys}
+        >
          {this.renderMenus(column.filters)}
        </Menu>
        <div className="ant-table-filter-dropdown-btns">
          <a className="ant-table-filter-dropdown-link confirm"
-            onClick={this.handleConfirm}>
+            onClick={this.handleConfirm}
+          >
            {locale.filterConfirm}
          </a>
          <a className="ant-table-filter-dropdown-link clear"
-            onClick={this.handleClearFilters}>
+            onClick={this.handleClearFilters}
+          >
            {locale.filterReset}
          </a>
        </div>
@ -137,7 +140,8 @@ export default class FilterMenu extends React.Component {
        overlay={menus}
        visible={this.state.visible}
        onVisibleChange={this.onVisibleChange}
-        closeOnSelect={false}>
+        closeOnSelect={false}
+      >
        <Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />
      </Dropdown>
    );
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@ -430,7 +430,8 @@ export default class Table extends React.Component {
    return (
      <Radio disabled={props.disabled} onClick={stopPropagation}
        onChange={(e) => this.handleRadioSelect(record, rowIndex, e)}
-        value={rowIndex} checked={checked} />
+        value={rowIndex} checked={checked}
+      />
    );
  }

@ -449,7 +450,8 @@ export default class Table extends React.Component {
    }
    return (
      <Checkbox checked={checked} disabled={props.disabled} onClick={stopPropagation}
-        onChange={(e) => this.handleSelect(record, rowIndex, e)} />
+        onChange={(e) => this.handleSelect(record, rowIndex, e)}
+      />
    );
  }

@ -498,7 +500,8 @@ export default class Table extends React.Component {
        const checkboxAll = (
          <Checkbox checked={checked}
            disabled={checkboxAllDisabled}
-            onChange={this.handleSelectAllRow} />
+            onChange={this.handleSelectAllRow}
+          />
        );
        selectionColumn = {
          key: 'selection-column',
@ -544,7 +547,8 @@ export default class Table extends React.Component {
        filterDropdown = (
          <FilterDropdown locale={locale} column={column}
            selectedKeys={colFilters}
-            confirmFilter={this.handleFilter} />
+            confirmFilter={this.handleFilter}
+          />
        );
      }
      if (column.sorter) {
@ -561,12 +565,14 @@ export default class Table extends React.Component {
          <div className="ant-table-column-sorter">
            <span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
              title="↑"
-              onClick={() => this.toggleSortOrder('ascend', column)}>
+              onClick={() => this.toggleSortOrder('ascend', column)}
+            >
              <Icon type="caret-up" />
            </span>
            <span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
              title="↓"
-              onClick={() => this.toggleSortOrder('descend', column)}>
+              onClick={() => this.toggleSortOrder('descend', column)}
+            >
              <Icon type="caret-down" />
            </span>
          </div>
@ -612,7 +618,8 @@ export default class Table extends React.Component {
        onChange={this.handlePageChange}
        total={total}
        size={size}
-        onShowSizeChange={this.handleShowSizeChange} /> : null;
+        onShowSizeChange={this.handleShowSizeChange}
+      /> : null;
  }

  prepareParamsArguments(state) {
@ -729,7 +736,8 @@ export default class Table extends React.Component {
          columns={columns}
          className={classString}
          expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
-          expandIconAsCell={expandIconAsCell} />
+          expandIconAsCell={expandIconAsCell}
+        />
          {emptyText}
      </div>
    );
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@ -54,7 +54,8 @@ const Demo = React.createClass({
          <Button type="ghost" onClick={this.add}>新增</Button>
        </div>
        <Tabs hideAdd onChange={this.onChange} activeKey={this.state.activeKey}
-          type="editable-card" onEdit={this.onEdit}>
+          type="editable-card" onEdit={this.onEdit}
+        >
          {this.state.panes}
        </Tabs>
      </div>
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@ -50,7 +50,8 @@ const Demo = React.createClass({
  render() {
    return (
      <Tabs onChange={this.onChange} activeKey={this.state.activeKey}
-        type="editable-card" onEdit={this.onEdit}>
+        type="editable-card" onEdit={this.onEdit}
+      >
        {this.state.panes}
      </Tabs>
    );
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@ -25,7 +25,8 @@ const Demo = React.createClass({
        <div style={{ marginBottom: 16 }}>
          页签位置：
          <Select value={this.state.tabPosition} onChange={this.changeTabPosition}
-            dropdownMatchSelectWidth={false}>
+            dropdownMatchSelectWidth={false}
+          >
            <Option value="top">top</Option>
            <Option value="bottom">bottom</Option>
            <Option value="left">left</Option>
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@ -77,7 +77,8 @@ export default class Tabs extends React.Component {
        className={className}
        tabBarExtraContent={tabBarExtraContent}
        onChange={this.handleChange}
-        animation={animation}>
+        animation={animation}
+      >
        {children}
      </RcTabs>
    );
--- a/components/tag/index.jsx
+++ b/components/tag/index.jsx
@ -58,7 +58,8 @@ export default class Tag extends React.Component {
        showProp="data-show"
        transitionName={`${prefixCls}-zoom`}
        transitionAppear
-        onEnd={this.animationEnd}>
+        onEnd={this.animationEnd}
+      >
        {this.state.closed ? null : (
          <div data-show={!this.state.closing} {...restProps} className={classString}>
            <span className={`${prefixCls}-text`}>{children}</span>
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@ -83,7 +83,8 @@ export default class Tooltip extends React.Component {
        onVisibleChange={this.onVisibleChange}
        onPopupAlign={this.onPopupAlign}
        ref="tooltip"
-        {...this.props}>
+        {...this.props}
+      >
        {visible ? cloneElement(children, { className: childrenCls }) : children}
      </RcTooltip>
    );
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@ -41,7 +41,8 @@ const App = React.createClass({
  renderFooter() {
    return (
      <Button type="ghost" size="small" style={{ float: 'right', margin: 5 }}
-        onClick={this.getMock}>
+        onClick={this.getMock}
+      >
        刷新
      </Button>
    );
@ -59,7 +60,8 @@ const App = React.createClass({
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
        render={item => `${item.title}-${item.description}`}
-        footer={this.renderFooter} />
+        footer={this.renderFooter}
+      />
    );
  },
 });
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@ -45,7 +45,8 @@ const App = React.createClass({
        dataSource={this.state.mockData}
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
-        render={item => item.title} />
+        render={item => item.title}
+      />
    );
  },
 });
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@ -61,7 +61,8 @@ const App = React.createClass({
        }}
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
-        render={this.renderItem} />
+        render={this.renderItem}
+      />
    );
  },
 });
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@ -46,7 +46,8 @@ const App = React.createClass({
        notFoundContent="xxxxxx"
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
-        render={item => item.title} />
+        render={item => item.title}
+      />
    );
  },
 });
--- a/components/transfer/index.jsx
+++ b/components/transfer/index.jsx
@ -254,14 +254,16 @@ export default class Transfer extends React.Component {
          notFoundContent={notFoundContent}
          body={body}
          footer={footer}
-          prefixCls={`${prefixCls}-list`} />
+          prefixCls={`${prefixCls}-list`}
+        />
        <Operation rightActive={rightActive}
          rightArrowText={operations[0]}
          moveToRight={this.moveToRight}
          leftActive={leftActive}
          leftArrowText={operations[1]}
          moveToLeft={this.moveToLeft}
-          className={`${prefixCls}-operation`} />
+          className={`${prefixCls}-operation`}
+        />
        <List titleText={titles[1]}
          dataSource={rightDataSource}
          filter={rightFilter}
@ -279,7 +281,8 @@ export default class Transfer extends React.Component {
          notFoundContent={notFoundContent}
          body={body}
          footer={footer}
-          prefixCls={`${prefixCls}-list`} />
+          prefixCls={`${prefixCls}-list`}
+        />
      </div>
    );
  }
--- a/components/transfer/list.jsx
+++ b/components/transfer/list.jsx
@ -93,7 +93,8 @@ export default class TransferList extends React.Component {
    return (
      <span ref="checkbox"
        className={checkboxCls}
-        onClick={(!props.disabled) && this.handleSelectAll}>
+        onClick={(!props.disabled) && this.handleSelectAll}
+      >
        {customEle}
      </span>
    );
@ -188,11 +189,13 @@ export default class TransferList extends React.Component {
                onChange={this.handleFilter}
                handleClear={this.handleClear}
                placeholder={searchPlaceholder || '请输入搜索内容'}
-                value={filter} />
+                value={filter}
+              />
            </div> : null}
            <Animate component="ul"
              transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
-              transitionLeave={false}>
+              transitionLeave={false}
+            >
              {showItems.length > 0
                ? showItems
                : <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}
--- a/components/transfer/search.jsx
+++ b/components/transfer/search.jsx
@ -31,7 +31,8 @@ export default class Search extends React.Component {
    return (
      <div>
        <input placeholder={placeholder} className={`${prefixCls} ant-input`} value={value} ref="input"
-          onChange={this.handleChange} />
+          onChange={this.handleChange}
+        />
        {value && value.length > 0 ?
          <a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
            <Icon type="cross-circle" />
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@ -27,7 +27,8 @@ const Demo = React.createClass({
        placeholder="请选择"
        allowClear
        treeDefaultExpandAll
-        onChange={this.onChange}>
+        onChange={this.onChange}
+      >
        <TreeNode value="parent 1" title="parent 1" key="0-1">
          <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
            <TreeNode value="leaf1" title="my leaf" key="random" />
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@ -45,7 +45,8 @@ const Demo = React.createClass({
        treeData={treeData}
        placeholder="请选择"
        treeDefaultExpandAll
-        onChange={this.onChange} />
+        onChange={this.onChange}
+      />
    );
  },
 });
--- a/components/tree-select/index.jsx
+++ b/components/tree-select/index.jsx
@ -50,7 +50,8 @@ export default class TreeSelect extends React.Component {
      <RcTreeSelect {...this.props}
        treeCheckable={checkable}
        className={cls}
-        notFoundContent={notFoundContent} />
+        notFoundContent={notFoundContent}
+      />
    );
  }
 }
--- a/Show More
+++ b/Show More