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

components/form/demo/basic.md

-# 基本使用
-
-- order: 0
-
-为了获得更好的排列，请将 `label` 标签和 `<input>`、`<textarea>`、`<select>` 控件包裹在 `.ant-form-item` 中。
-
-`注`：`.ant-input`  类为 `<input>`、`<textarea>`、`<select>` 元素默认设置了 `width: 100%`。
-
-为 `label` 标签添加 `required` 属性，表示该项必选。
-
----
-
-````html
-<form>
-  <div class="ant-form-item">
-    <label for="userName" required>用户名：</label>
-	  <input class="ant-input" type="text" id="userName" placeholder="请输入"/>
-  </div>
-  <div class="ant-form-item">
-    <label for="password" required>密码：</label>
-	  <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
-  </div>
-  <div class="ant-checkbox">
-    <label>
-      <input type="checkbox"> 保持登录
-    </label>
-  </div>
-  <input type="submit" class="ant-btn ant-btn-primary" value="确定" />
-  <input type="submit" class="ant-btn" value="取消" />
-</form>
-````

components/form/demo/disabled.md

 # 禁用状态
 
-- order: 4
+- order: 3
 
 1) 单独为输入框设置 `disabled` 属性；
 
@@ -10,29 +10,46 @@
 
 ````html
 <h4>禁用的表单控件</h4>
-<input class="ant-input" type="text" value="我是禁用的" disabled>
+<form class="ant-form-horizontal">
+  <div class="ant-form-item">
+    <label class="col-5">禁用的输入框：</label>
+    <div class="col-12">
+      <input class="ant-input" type="text" value="我是禁用的" disabled>
+    </div>
+  </div>
+</form>
 
 <br />
 
-<h4>禁用的fieldset</h4>
-<form>
+<h4>禁用的 fieldset</h4>
+<form class="ant-form-horizontal">
   <fieldset disabled>
     <div class="ant-form-item">
-      <label for="disabledTextInput">Input:</label>
-      <input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
+      <label for="disabledTextInput" class="col-5">Input:</label>
+      <div class="col-12">
+        <input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
+      </div>
+    </div>
+    <div class="ant-form-item">
+      <label for="disabledSelect" class="col-5">Select:</label>
+      <div class="col-12">
+        <select id="disabledSelect" class="ant-input">
+          <option>Disabled select</option>
+        </select>
+      </div>
     </div>
     <div class="ant-form-item">
-      <label for="disabledSelect">Select</label>
-      <select id="disabledSelect" class="ant-input">
-        <option>Disabled select</option>
-      </select>
+      <div class="ant-checkbox col-14 col-offset-5">
+        <label>
+          <input type="checkbox"> checkbox
+        </label>
+      </div>
     </div>
-    <div class="ant-checkbox">
-      <label>
-        <input type="checkbox"> checkbox
-      </label>
+    <div class="row">
+      <div class="col-14 col-offset-5">
+        <input type="submit" class="ant-btn ant-btn-primary" value="确定">
+      </div>
     </div>
-    <button type="submit" class="ant-btn ant-btn-primary">Submit</button>
   </fieldset>
 </form>
 

components/form/demo/form-controls.md

 # 表单控件
 
-- order: 3
+- order: 2
 
 展示所有支持的表单控件。
 

components/form/demo/horizontal-form.md

 # 水平排列的表单
 
-- order: 1
+- order: 0
 
 为 `<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平排列。
 
 如需将一行静态文本和 `<label>` 标签置于同一行，则只需为 `<p>` 标签添加 `.ant-form-text` 类即可。
 
+为 `label` 标签添加 `required` 属性，表示该项必选。
 
 ---
 
@@ -24,13 +25,13 @@
   </div>
   <div class="ant-form-item">
     <label for="password" class="col-6" required>密码：</label>
-    <div class="col-18">
+    <div class="col-14">
       <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
 	 </div>
   </div>
   <div class="ant-form-item">
     <label  class="col-6" required>您的性别：</label>
-    <div class="col-18">
+    <div class="col-14">
       <label class="ant-radio-inline">
         <input type="radio" name="radios" id="male-radio" value="male" checked> 男的
       </label>
@@ -41,13 +42,13 @@
   </div>  
   <div class="ant-form-item">
     <label for="password" class="col-6" required>备注：</label>
-    <div class="col-18">
+    <div class="col-14">
       <textarea class="ant-input" placeholder="随便写"></textarea>
       <p class="ant-form-explain">随便写点什么吧</p>
     </div>
   </div>
   <div class="ant-form-item">
-    <div class="ant-checkbox col-18 col-offset-6">
+    <div class="ant-checkbox col-14 col-offset-6">
       <label>
         <input type="checkbox"> 我是同意的
       </label>

components/form/demo/inline-form.md

 # 行内排列的表单
 
-- order: 2
+- order: 1
 
 在**视口宽度大于等于 768px **时，你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
 

components/form/demo/input-size.md

 # Input 尺寸
 
-- order: 7
+- order: 6
 
-关于尺寸，我们为 `.ant-input` `.ant-input-group` 均提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名后添加后缀即可。
+我们为定义了 `.ant-input` 类的输入框提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名添加以上后缀即可。
 
-但是在 `<form>` 表单里面，我们只使用**大尺寸**作为唯一的尺寸。
+但是在 `<form>` 表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
 
 ---
 
 ````html
-<h4>input</h4>
-<!-- 大尺寸 -->
-<input class="ant-input ant-input-lg" type="text" id="userName" placeholder="大输入框"/>
-<br>
-<!-- 默认尺寸 -->
-<input class="ant-input" type="text" id="userName" placeholder="默认大小输入框"/>
-<br>
-<!-- 小尺寸 -->
-<input class="ant-input ant-input-sm" type="text" id="userName" placeholder="小输入框"/>
 
-<h4>input-group</h4>
-<!-- 大尺寸 -->
-<div class="ant-input-group ant-input-group-lg">
-  <input type="text" class="ant-input" placeholder="大输入框组合">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
+<div class="row">
+  <div class="col-6 pdrg-8">
+    <input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
   </div>
-</div>
-
-<br>
-<!-- 默认尺寸 -->
-<div class="ant-input-group">
-  <input type="text" class="ant-input" placeholder="Search for...">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
+  <div class="col-6 pdrg-8">
+    <input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
   </div>
-</div>
-
-<br>
-<!-- 小尺寸 -->
-<div class="ant-input-group ant-input-group-sm">
-  <input type="text" class="ant-input" placeholder="小输入框组合">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
+  <div class="col-6 pdrg-8">
+    <input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
   </div>
 </div>
 

components/form/demo/inputs.md

 # Input 输入框集合
 
-- order: 6
+- order: 5
 
 使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。
 

components/form/demo/mix.md

 # 表单组合
 
-- order: 8
+- order: 7
 
-展示和表单相关的其他 ant-design 组件。
+集中营，展示和表单相关的其他 ant-design 组件。
 
 ---
 
@@ -78,25 +78,25 @@ React.render(
     </div>
     <div className="ant-form-item">
       <label for="" className="col-6" required>Datepicker:</label>
-      <div className="col-8">
+      <div className="col-7">
         <Datepicker value="" />
       </div>
       <div className="col-2">
         <p className="ant-form-split">--</p>
       </div>
-      <div className="col-8">
+      <div className="col-7">
         <Datepicker value="" />
       </div>
     </div>
     <div className="ant-form-item has-error">
       <label for="" className="col-6" required>Datepicker 校验:</label>
-      <div className="col-8">
+      <div className="col-7">
         <Datepicker value="" />
       </div>
       <div className="col-2">
         <p className="ant-form-split">--</p>
       </div>
-      <div className="col-8">
+      <div className="col-7">
         <Datepicker value="" />
       </div>
       <div className="col-19 col-offset-6">

components/form/demo/validate.md

 # 校验提示
 
-- order: 5
+- order: 4
 
 我们为表单控件的校验状态定义了样式，共有三种校验状态类：
 
@@ -15,23 +15,23 @@
 ---
 
 ````html
-<h4>校验提示</h4>
+<h4>不带反馈图标的校验提示</h4>
 <br />
-<div class="ant-form-item has-success">
-  <label for="success">成功校验：</label>
-  <input class="ant-input" type="text" id="success" value="我是正文"/>
-</div>
-
-<div class="ant-form-item has-error">
-  <label for="error">失败校验：</label>
-  <input class="ant-input" type="text" id="error" value="无效选择"/>
-  <div class="ant-form-explain">请输入数字和字母组合</div>
-</div>
-
-<div class="ant-form-item has-warning">
-  <label for="warning">警告校验：</label>
-  <input class="ant-input" type="text" id="warning" value="前方高能预警"/>
-</div>
+<form class="ant-form-horizontal">
+  <div class="ant-form-item has-error">
+    <label for="error" class="col-5">失败校验：</label>
+    <div class="col-12">
+      <input class="ant-input" type="text" id="error" value="无效选择"/>
+      <div class="ant-form-explain">请输入数字和字母组合</div>
+    </div>
+  </div>
+  <div class="ant-form-item has-warning">
+    <label for="warning" class="col-5">警告校验：</label>
+    <div class="col-12">
+      <input class="ant-input" type="text" id="warning" value="前方高能预警"/>
+    </div>
+  </div>
+</form>
 
 <h4>带图标的校验提示（水平排列的表单）</h4>
 <br />

components/form/index.md

@@ -11,7 +11,7 @@
 
 ### 表单
 
-除了默认的排列方式，我们还为 `form` 提供了以下两种排列方式：
+我们为 `form` 提供了以下两种排列方式：
 
 - 水平排列：`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列;
 - 行内排列：`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。

style/components/form.less

@@ -52,7 +52,7 @@ label {
 form {
   .@{css-prefix}input {
     height: @input-height-lg;
-    font-size: 12px;
+    font-size: @font-size-base;
     padding: @input-padding-horizontal;
   }
   .has-feedback {
@@ -65,7 +65,9 @@ form {
   .@{css-prefix}input-group > .@{css-prefix}input,
   .@{css-prefix}input-group > .@{css-prefix}input-group-addon,
   .@{css-prefix}input-group > .@{css-prefix}input-group-btn > .input-btn {
-    .input-lg();
+    height: @input-height-lg;
+    font-size: @font-size-base;
+    padding: @input-padding-horizontal;
   }
   
   // input[type=file]

style/mixins/form.less

@@ -41,7 +41,7 @@
     width: 100%;
     padding: 0;
     margin-bottom: 20px;
-    font-size: (@font-size-base * 1.5);
+    font-size: 14px;
     line-height: inherit;
     color: @legend-color;
     border: 0;

style/themes/default/custom.less

@@ -107,8 +107,8 @@
 // Form
 // --------------------------------
 // Legend
-@legend-color                : #222;
-@legend-border-color         : #e5e5e5;
+@legend-color                : #999;
+@legend-border-color         : #d9d9d9;
 // Label
 @label-required-color        : #F60;
 @label-color: #999;