diff --git a/docs/index.json b/docs/index.json index 314aaf74da3bcebe8e051bd24ad7039b771b5839..78eb4e371d699a712666706ec6c9df3309d3f99a 100644 --- a/docs/index.json +++ b/docs/index.json @@ -1027,6 +1027,8 @@ "name": "静态文本" }, { "name": "禁用状态和只读状态" + }, { + "name": "标记必填项" }, { "name": "更为紧凑的表单" }], diff --git a/docs/part/view-form.md b/docs/part/view-form.md index b50ef7f9f11d42ae83507a50148b9e517362242b..5a304a93d0f9098c7eda5bb94125a8ca63945099 100644 --- a/docs/part/view-form.md +++ b/docs/part/view-form.md @@ -571,6 +571,102 @@ filter: biaodan bd ``` +## 标记必填项 + +标记必填项的一种通用方法是在标签上添加星标 *,在表单控件组中只需要为 `` 添加 `.required` 类即可。 + + + + + 账号 + + + + 密码 + + + 提交 + + + +```html + + + 账号 + + + + 密码 + + + 提交 + +``` + +星星标记同样适用于水平排列的表单。 + + + + + 账号 + + + + + + 密码 + + + + + + + + + 记住我 + + + + + + + 登录 + + + + + +```html + + + 账号 + + + + + + 密码 + + + + + + + + + 记住我 + + + + + + + 登录 + + + +``` + ## 更为紧凑的表单 为表单元素添加 `.form-condensed` 可以减小表单内的所有控件和文本尺寸及间距,从而获得一个更加紧凑的表单视图。 @@ -578,12 +674,12 @@ filter: biaodan bd - 账号 - + 账号 + - 密码 - + 密码 + 捐赠金额 @@ -600,12 +696,12 @@ filter: biaodan bd ```html - 账号 - + 账号 + - 密码 - + 密码 + 捐赠金额 @@ -624,30 +720,30 @@ filter: biaodan bd - 账号 + 账号 - + - 密码 + 密码 - + - 地址 + 地址 - + 北京 上海 - + - + @@ -670,30 +766,30 @@ filter: biaodan bd ```html - 账号 + 账号 - + - 密码 + 密码 - + - 地址 + 地址 - + 北京 上海 - + - + diff --git a/src/less/components/forms.less b/src/less/components/forms.less index 7fb1b42ed0107f6e5eb2e0b55e124f725d315886..42fbd041bda090d24358fa85a38b060de726e951 100644 --- a/src/less/components/forms.less +++ b/src/less/components/forms.less @@ -355,7 +355,13 @@ input[type="checkbox"] { color: @state-danger-text; display: inline-block; position: absolute; - top: 5px; + top: 0; + right: -10px; font-size: @font-size-large; } + + .form-horizontal &:after { + top: 5px; + right: -1px; + } }