新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

设计规范

开发者文档

  • 更新 v1.5.0:control-label 设置默认的 line-height: 24px,去掉了 margin-bottom: 5px
  • 更新 v1.1.10:修复了在chrome下,水平表单布局可能出现布局错乱的bug。

按宽度分类

select 元素同样适用

  1. <form class="sui-form">
  2. <input type="text" placeholder=".input-mini" class="input-mini">
  3. <input type="text" placeholder=".input-small" class="input-small">
  4. <input type="text" placeholder=".input-medium" class="input-medium">
  5. <input type="text" placeholder=".input-large" class="input-large">
  6. <input type="text" placeholder=".input-xlarge" class="input-xlarge">
  7. <input type="text" placeholder=".input-xxlarge" class="input-xxlarge">
  8. </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

按高度分类

select 元素同样适用

  1. <form class="sui-form">
  2. <input type="text" placeholder=".input-thin" class="input-thin">
  3. <input type="text" placeholder=".input-default" class="input-default">
  4. <input type="text" placeholder=".input-fat" class="input-fat">
  5. <input type="text" placeholder=".input-xfat" class="input-xfat">
  6. </form>
四种尺寸:.input-thin, .input-default, .input-fat, .input-xfat

成块级

  1. <form class="sui-form">
  2. <input type="text" placeholder=".input-block-level" class="input-block-level">
  3. </form>
引用class:.input-block-level

不可编辑

Some value here
  1. <form class="sui-form"><span class="input-xlarge uneditable-input">Some value here</span></form>
引用class:.input-block-level

Disabled inputs

  1. <form class="sui-form form-inline">
  2. <input id="disabledInput" type="text" placeholder="Disabled input here…" disabled="" class="input-xlarge">
  3. </form>
引用class:.input-block-level

带图标


  1. <form class="sui-form form-dark">
  2. <div class="input-control">
  3. <input type="text" class="input-thin"><i class="sui-icon icon-touch-magnifier"></i>
  4. </div>
  5. <div class="input-control">
  6. <input type="text"><i class="sui-icon icon-touch-magnifier"></i>
  7. </div>
  8. <div class="input-control">
  9. <input type="text" class="input-fat"><i class="sui-icon icon-touch-magnifier"></i>
  10. </div>
  11. <div class="input-control">
  12. <input type="text" class="input-xfat"><i class="sui-icon icon-touch-magnifier"></i>
  13. </div><br>
  14. <div class="input-control control-right">
  15. <input type="text" class="input-thin"><i class="sui-icon icon-touch-magnifier"></i>
  16. </div>
  17. <div class="input-control control-right">
  18. <input type="text"><i class="sui-icon icon-touch-magnifier"></i>
  19. </div>
  20. <div class="input-control control-right">
  21. <input type="text" class="input-fat"><i class="sui-icon icon-touch-magnifier"></i>
  22. </div>
  23. <div class="input-control control-right">
  24. <input type="text" class="input-xfat"><i class="sui-icon icon-touch-magnifier"></i>
  25. </div>
  26. </form>

文本字段四态

  1. <form class="sui-form">
  2. <input type="text" placeholder=".input-warning" class="input-warning">
  3. <input type="text" placeholder=".input-error" class="input-error">
  4. <input type="text" placeholder=".input-success" class="input-success">
  5. <input type="text" placeholder=".input-info" class="input-info">
  6. </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

Checkboxes and radios

checkbox和radio的详细文档请点 checkbox

默认状态

单选框

半选

禁用

  1. <form class="sui-form">
  2. <label data-toggle="checkbox" class="checkbox-pretty checked">
  3. <input type="checkbox" checked="checked"><span>鸣人</span>
  4. </label>
  5. <label data-toggle="checkbox" class="checkbox-pretty">
  6. <input type="checkbox"><span>佐助</span>
  7. </label>
  8. <h3>单选框</h3>
  9. <label data-toggle="radio" class="radio-pretty checked">
  10. <input type="radio" checked="checked" name="radio1"><span>服装</span>
  11. </label>
  12. <label data-toggle="radio" class="radio-pretty">
  13. <input type="radio" name="radio1"><span>电器</span>
  14. </label>
  15. <label data-toggle="radio" class="radio-pretty">
  16. <input type="radio" name="radio1"><span>美食</span>
  17. </label>
  18. <h3>半选</h3>
  19. <label data-toggle="radio" class="checkbox-pretty halfchecked">
  20. <input type="checkbox"><span>半选</span>
  21. </label>
  22. <h3>禁用</h3>
  23. <label data-toggle="radio" class="checkbox-pretty checked disabled">
  24. <input type="checkbox" checked="checked" disabled=""><span>不可选</span>
  25. </label>
  26. </form>

内联状态

单选框

半选

禁用

  1. <form class="sui-form">
  2. <label data-toggle="checkbox" class="checkbox-pretty inline checked">
  3. <input type="checkbox" checked="checked"><span>鸣人</span>
  4. </label>
  5. <label data-toggle="checkbox" class="checkbox-pretty inline">
  6. <input type="checkbox"><span>佐助</span>
  7. </label>
  8. <h3>单选框</h3>
  9. <label data-toggle="radio" class="radio-pretty inline checked">
  10. <input type="radio" checked="checked" name="radio1"><span>服装</span>
  11. </label>
  12. <label data-toggle="radio" class="radio-pretty inline">
  13. <input type="radio" name="radio1"><span>电器</span>
  14. </label>
  15. <label data-toggle="radio" class="radio-pretty inline">
  16. <input type="radio" name="radio1"><span>美食</span>
  17. </label>
  18. <h3>半选</h3>
  19. <label data-toggle="radio" class="checkbox-pretty inline halfchecked">
  20. <input type="checkbox"><span>半选</span>
  21. </label>
  22. <h3>禁用</h3>
  23. <label data-toggle="radio" class="checkbox-pretty inline checked disabled">
  24. <input type="checkbox" checked="checked" disabled=""><span>不可选</span>
  25. </label>
  26. </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

select

详细文档点击这里 dropdown

  1. <span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop12" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
  2. <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
  3. <ul id="menu12" role="menu" aria-labelledby="drop12" class="sui-dropdown-menu">
  4. <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
  5. <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
  6. <li role="presentation" class="divider"></li>
  7. <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
  8. </ul></span></span>

Textarea

  1. <form class="form-inline sui-form">
  2. <textarea rows="3"></textarea>
  3. </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

关联校验

警示文案
出错文案
成功文案
帮助文案
警告
错误
成功
帮助
  1. <form class="sui-form form-horizontal">
  2. <div class="control-group warning">
  3. <label for="inputWarning" class="control-label">警示输入框:</label>
  4. <div class="controls">
  5. <input type="text" id="inputWarning">
  6. <span class="help-inline">警示文案</span>
  7. </div>
  8. </div>
  9. <div class="control-group error">
  10. <label for="inputError" class="control-label">错误输入框:</label>
  11. <div class="controls">
  12. <input type="text" id="inputError">
  13. <span class="help-inline">出错文案</span>
  14. </div>
  15. </div>
  16. <div class="control-group success">
  17. <label for="inputSuccess" class="control-label">成功输入框:</label>
  18. <div class="controls">
  19. <input type="text" id="inputSuccess">
  20. <span class="help-inline">成功文案</span>
  21. </div>
  22. </div>
  23. <div class="control-group info">
  24. <label for="inputInfo" class="control-label">帮助输入框:</label>
  25. <div class="controls">
  26. <input type="text" id="inputInfo">
  27. <span class="help-inline">帮助文案</span>
  28. </div>
  29. </div>
  30. <div class="control-group warning">
  31. <label for="inputWarning" class="control-label">警示输入框:</label>
  32. <div class="controls"><input type="text" id="inputWarning">
  33. <div class="sui-msg msg-naked msg-tips"><i class="msg-icon"></i>
  34. <div class="msg-con">警告</div>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="control-group error">
  39. <label for="inputError" class="control-label">错误输入框:</label>
  40. <div class="controls"><input type="text" id="inputError">
  41. <div class="sui-msg msg-naked msg-error"><i class="msg-icon"></i>
  42. <div class="msg-con">错误</div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="control-group success">
  47. <label for="inputSuccess" class="control-label">成功输入框:</label>
  48. <div class="controls"><input type="text" id="inputSuccess">
  49. <div class="sui-msg msg-naked msg-success"><i class="msg-icon"></i>
  50. <div class="msg-con">成功</div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="control-group info">
  55. <label for="inputInfo" class="control-label">帮助输入框:</label>
  56. <div class="controls"><input type="text" id="inputInfo">
  57. <div class="sui-msg msg-naked msg-info"><i class="msg-icon"></i>
  58. <div class="msg-con">帮助</div>
  59. </div>
  60. </div>
  61. </div>
  62. </form>
关联校验接口 warningerrorsuccessinfo

按功能分类

搜索框

  1. <form class="sui-form form-search">
  2. <input type="text" class="input-medium search-query">
  3. <button type="submit" class="sui-btn btn-primary">Search</button>
  4. </form>
添加 .form-search<form> 标签上并且添加 .search-query<input> 标签上

内联表单

  1. <span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop12" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
  2. <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
  3. <ul id="menu12" role="menu" aria-labelledby="drop12" class="sui-dropdown-menu">
  4. <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
  5. <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
  6. <li role="presentation" class="divider"></li>
  7. <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
  8. </ul></span></span>
添加 .form-inline 成为内联状态

水平表单

  1. <form class="sui-form form-horizontal">
  2. <div class="control-group">
  3. <label for="inputEmail" class="control-label">邮箱:</label>
  4. <div class="controls">
  5. <input type="text" id="inputEmail" placeholder="Email">
  6. </div>
  7. </div>
  8. <div class="control-group">
  9. <label for="inputPassword" class="control-label">密码:</label>
  10. <div class="controls">
  11. <input type="password" id="inputPassword" placeholder="Password">
  12. </div>
  13. </div>
  14. <div class="control-group">
  15. <label class="control-label"></label>
  16. <div class="controls">
  17. <label data-toggle="checkbox" class="checkbox-pretty inline">
  18. <input type="checkbox" name="remember-me"><span>记住我</span>
  19. </label>
  20. </div>
  21. </div>
  22. <div class="control-group">
  23. <label class="control-label"></label>
  24. <div class="controls">
  25. <button type="submit" class="sui-btn btn-primary">Sign in</button>
  26. </div>
  27. </div>
  28. </form>
添加 .form-horizontal 成为水平状态

扩展表单控件

默认选项

@

.00

@
  1. <form class="sui-form">
  2. <div class="input-prepend"><span class="add-on">@</span>
  3. <input id="prependedInput" type="text" placeholder="Username" class="span2 input-fat">
  4. </div><br>
  5. <div class="input-append">
  6. <input id="appendedInput" type="text" class="span2 input-fat"><span class="add-on">.00</span>
  7. </div><br>
  8. <div class="input-inner">
  9. <input type="text" class="span2 input-fat"><span class="add-on">@</span>
  10. <input type="text" class="span2 input-fat">
  11. </div>
  12. </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

联合体

$ .00
  1. <form class="sui-form form-inline">
  2. <div class="input-prepend input-append"><span class="add-on">$</span>
  3. <input id="appendedPrependedInput" type="text" class="span2 input-fat"><span class="add-on">.00</span>
  4. </div>
  5. </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

按钮替换文本


  1. <form class="sui-form form-inline">
  2. <div class="input-append">
  3. <input id="appendedInputButton" type="text" class="span2">
  4. <button type="button" class="sui-btn">Go!</button>
  5. </div>
  6. </form><br>
  7. <form class="sui-form form-inline">
  8. <div class="input-append">
  9. <input id="appendedInputButtons" type="text" class="span2">
  10. <button type="button" class="sui-btn">Search</button>
  11. <button type="button" class="sui-btn">Options</button>
  12. </div>
  13. </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

搜索表单

  1. <form class="sui-form form-search">
  2. <div class="input-append">
  3. <input type="text" class="span2 search-query">
  4. <button type="button" class="sui-btn">Search</button>
  5. </div>
  6. <div class="input-prepend">
  7. <button type="button" class="sui-btn">Search</button>
  8. <input type="text" class="span2 search-query">
  9. </div>
  10. </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

所有案例

demo1

提示信息,比如:建议你设置安全密码
-
  1. <form class="sui-form form-horizontal">
  2. <div class="control-group">
  3. <label class="control-label">单选框:</label>
  4. <div class="controls">
  5. <label data-toggle="radio" class="radio-pretty inline checked">
  6. <input type="radio" checked="checked" name="radio"><span>服装</span>
  7. </label>
  8. <label data-toggle="radio" class="radio-pretty inline">
  9. <input type="radio" name="radio"><span>电器</span>
  10. </label>
  11. <label data-toggle="radio" class="radio-pretty inline">
  12. <input type="radio" name="radio"><span>美食</span>
  13. </label>
  14. </div>
  15. </div>
  16. <div class="control-group">
  17. <label class="control-label">复选框:</label>
  18. <div class="controls">
  19. <label data-toggle="checkbox" class="checkbox-pretty inline checked">
  20. <input type="checkbox" checked="checked"><span>鸣人</span>
  21. </label>
  22. <label data-toggle="checkbox" class="checkbox-pretty inline">
  23. <input type="checkbox"><span>佐助</span>
  24. </label>
  25. </div>
  26. </div>
  27. <div class="control-group">
  28. <label class="control-label">输入框(迷你):</label>
  29. <div class="controls">
  30. <input type="text" class="input-mini">
  31. <div class="sui-msg msg-tips msg-naked">
  32. <div class="msg-con">提示信息,比如:建议你设置安全密码</div>
  33. <s class="msg-icon"></s>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="control-group">
  38. <label class="control-label">输入框(小号):</label>
  39. <div class="controls">
  40. <input type="text" class="input-small">
  41. </div>
  42. </div>
  43. <div class="control-group">
  44. <label class="control-label">输入框(中号):</label>
  45. <div class="controls">
  46. <input type="text" class="input-medium">
  47. </div>
  48. </div>
  49. <div class="control-group">
  50. <label class="control-label">输入框(大号):</label>
  51. <div class="controls">
  52. <input type="text" class="input-large">
  53. </div>
  54. </div>
  55. <div class="control-group">
  56. <label class="control-label">输入框(加大):</label>
  57. <div class="controls">
  58. <input type="text" class="input-xlarge">
  59. </div>
  60. </div>
  61. <div class="control-group">
  62. <label class="control-label">输入框(加加):</label>
  63. <div class="controls">
  64. <input type="text" class="input-xxlarge">
  65. </div>
  66. </div>
  67. <div class="control-group">
  68. <label class="control-label">时间选择:</label>
  69. <div class="controls">
  70. <input type="text" class="input-medium input-date">
  71. -
  72. <input type="text" class="input-medium input-date">
  73. </div>
  74. </div>
  75. <div class="control-group">
  76. <label class="control-label">备注:</label>
  77. <div class="controls">
  78. <textarea rows="3" class="input-block-level"></textarea>
  79. </div>
  80. </div>
  81. <div class="control-group">
  82. <label class="control-label"></label>
  83. <div class="controls">
  84. <button type="submit" class="sui-btn btn-primary">提交审核</button>
  85. <button type="reset" class="sui-btn">重置</button>
  86. </div>
  87. </div>
  88. </form>
.form-horizontal 用于切换表单字段水平操放

demo2

杭州
该项为必填项
吃喝玩乐
该项为必填项

消息渠道发送字数提示:

短信:  61个汉字为一条短信,超过分多条发送

旺旺:  系统文本对话消息XXXX个汉字

              浮出消息XXXX汉字

              Html系统对话消息XXX个汉字

站内信:XXXX个汉字

该项为必填项
是否向子账号发送消息:
  1. <form class="sui-form form-horizontal">
  2. <div class="control-group">
  3. <label class="control-label v-top"><b style="color: #f00;">*</b>
  4. 地点:
  5. </label>
  6. <div class="controls"><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop4" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
  7. <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
  8. <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
  9. <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
  10. <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
  11. <li role="presentation" class="divider"></li>
  12. <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
  13. </ul></span></span>
  14. <div class="sui-msg msg-error msg-clear help-block">
  15. <div class="msg-con">该项为必填项</div>
  16. <s class="msg-icon"></s>
  17. </div>
  18. </div>
  19. </div>
  20. <div class="control-group">
  21. <label class="control-label v-top"><b style="color: #f00;">*</b> <span style="padding:0 24px 0 0;"></span>题:</label>
  22. <div class="controls"><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop4" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
  23. <input value="1" name="zt" type="hidden"><i class="caret"></i><span>吃喝玩乐</span></a>
  24. <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
  25. <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="1">吃喝玩乐</a></li>
  26. </ul></span></span>
  27. <input type="text" value="" class="input-xlarge">
  28. <div class="sui-msg msg-error msg-clear help-block">
  29. <div class="msg-con">该项为必填项</div>
  30. <s class="msg-icon"></s>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="control-group">
  35. <label class="control-label v-top"><b style="color: #f00;">*</b> <span style="padding:0 24px 0 0;"></span>容:</label>
  36. <div class="controls">
  37. <textarea style="height: 190px;" class="input-xxlarge"></textarea>
  38. <div style="vertical-align: top;" class="sui-msg msg-tips msg-default">
  39. <div class="msg-con">
  40. <p style="margin-bottom: 8px; font-weight: bold;">消息渠道发送字数提示:</p>
  41. <p>短信:&nbsp;&nbsp;61个汉字为一条短信,超过分多条发送</p>
  42. <p>旺旺:&nbsp;&nbsp;系统文本对话消息XXXX个汉字</p>
  43. <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浮出消息XXXX汉字</p>
  44. <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Html系统对话消息XXX个汉字</p>
  45. <p>站内信:XXXX个汉字</p>
  46. </div>
  47. <s class="msg-icon"></s>
  48. </div>
  49. <div class="sui-msg msg-error msg-clear help-block">
  50. <div class="msg-con">该项为必填项</div>
  51. <s class="msg-icon"></s>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="control-group">
  56. <label class="control-label"><span style="padding:0 24px 0 0;"></span>
  57. 接:
  58. </label>
  59. <div class="controls">
  60. <input type="text" value="" class="input-xxlarge">
  61. </div>
  62. </div>
  63. <div class="control-group">
  64. <label class="control-label v-top"><b style="color: #f00;">*</b>
  65. 发送渠道:
  66. </label>
  67. <div class="controls">
  68. <div class="row-fluid">
  69. <label data-toggle="radio" class="radio-pretty inline checked">
  70. <input type="radio" checked="checked" name="qudao"><span>商家中心</span>
  71. </label>
  72. <label data-toggle="radio" class="radio-pretty inline">
  73. <input type="radio" name="qudao"><span>旺旺弹窗</span>
  74. </label>
  75. <label data-toggle="radio" class="radio-pretty inline">
  76. <input type="radio" name="qudao"><span>站内信</span>
  77. </label>
  78. <div class="sui-msg msg-tips msg-default msg-clear help-block">
  79. <div class="msg-con">是否向子账号发送消息:
  80. <label data-toggle="radio" class="radio-pretty inline">
  81. <input type="radio" name="zzh" value="1"><span></span>
  82. </label>
  83. <label data-toggle="radio" class="radio-pretty inline checked">
  84. <input type="radio" checked="checked" name="zzh" value="0"><span></span>
  85. </label>
  86. </div>
  87. <s class="msg-icon"></s>
  88. </div>
  89. </div>
  90. <div class="row-fluid">
  91. <label class="checkbox inline">
  92. <input name="m1" type="checkbox" value="1" checked="">
  93. 短信发送给店长
  94. </label>
  95. </div>
  96. <div class="row-fluid">
  97. <label class="checkbox inline">
  98. <input name="m1" type="checkbox" value="2" checked="">
  99. 短信发送给电商决策人
  100. </label>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="control-group">
  105. <label class="control-label"><b style="color: #f00;">*</b>
  106. <span style="padding: 0 6px;"></span>人:
  107. </label>
  108. <div class="controls"><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop4" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
  109. <input value="1" name="zt" type="hidden"><i class="caret"></i><span>管理员</span></a>
  110. <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
  111. <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="1">管理员</a></li>
  112. </ul></span></span></div>
  113. </div>
  114. <div class="control-group">
  115. <label class="control-label"></label>
  116. <div class="controls">
  117. <button type="submit" class="sui-btn btn-primary">提交审核</button>
  118. <button type="reset" class="sui-btn">重置</button>
  119. </div>
  120. </div>
  121. </form>
.form-horizontal 用于切换表单字段水平操放