设计规范

开发者文档
- 更新 v1.5.0:control-label 设置默认的
line-height: 24px
,去掉了margin-bottom: 5px
。 - 更新 v1.1.10:修复了在chrome下,水平表单布局可能出现布局错乱的bug。
按宽度分类
select
元素同样适用
- <form class="sui-form">
- <input type="text" placeholder=".input-mini" class="input-mini">
- <input type="text" placeholder=".input-small" class="input-small">
- <input type="text" placeholder=".input-medium" class="input-medium">
- <input type="text" placeholder=".input-large" class="input-large">
- <input type="text" placeholder=".input-xlarge" class="input-xlarge">
- <input type="text" placeholder=".input-xxlarge" class="input-xxlarge">
- </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
按高度分类
select
元素同样适用
- <form class="sui-form">
- <input type="text" placeholder=".input-thin" class="input-thin">
- <input type="text" placeholder=".input-default" class="input-default">
- <input type="text" placeholder=".input-fat" class="input-fat">
- <input type="text" placeholder=".input-xfat" class="input-xfat">
- </form>
四种尺寸:.input-thin, .input-default, .input-fat, .input-xfat
- 复制代码代码已复制
成块级
- <form class="sui-form">
- <input type="text" placeholder=".input-block-level" class="input-block-level">
- </form>
引用class:.input-block-level
不可编辑
- <form class="sui-form"><span class="input-xlarge uneditable-input">Some value here</span></form>
引用class:.input-block-level
Disabled inputs
- <form class="sui-form form-inline">
- <input id="disabledInput" type="text" placeholder="Disabled input here…" disabled="" class="input-xlarge">
- </form>
引用class:.input-block-level
带图标
- <form class="sui-form form-dark">
- <div class="input-control">
- <input type="text" class="input-thin"><i class="sui-icon icon-touch-magnifier"></i>
- </div>
- <div class="input-control">
- <input type="text"><i class="sui-icon icon-touch-magnifier"></i>
- </div>
- <div class="input-control">
- <input type="text" class="input-fat"><i class="sui-icon icon-touch-magnifier"></i>
- </div>
- <div class="input-control">
- <input type="text" class="input-xfat"><i class="sui-icon icon-touch-magnifier"></i>
- </div><br>
- <div class="input-control control-right">
- <input type="text" class="input-thin"><i class="sui-icon icon-touch-magnifier"></i>
- </div>
- <div class="input-control control-right">
- <input type="text"><i class="sui-icon icon-touch-magnifier"></i>
- </div>
- <div class="input-control control-right">
- <input type="text" class="input-fat"><i class="sui-icon icon-touch-magnifier"></i>
- </div>
- <div class="input-control control-right">
- <input type="text" class="input-xfat"><i class="sui-icon icon-touch-magnifier"></i>
- </div>
- </form>
- 复制代码代码已复制
文本字段四态
- <form class="sui-form">
- <input type="text" placeholder=".input-warning" class="input-warning">
- <input type="text" placeholder=".input-error" class="input-error">
- <input type="text" placeholder=".input-success" class="input-success">
- <input type="text" placeholder=".input-info" class="input-info">
- </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
Checkboxes and radios
checkbox和radio的详细文档请点 checkbox
默认状态
- <form class="sui-form">
- <label data-toggle="checkbox" class="checkbox-pretty checked">
- <input type="checkbox" checked="checked"><span>鸣人</span>
- </label>
- <label data-toggle="checkbox" class="checkbox-pretty">
- <input type="checkbox"><span>佐助</span>
- </label>
- <h3>单选框</h3>
- <label data-toggle="radio" class="radio-pretty checked">
- <input type="radio" checked="checked" name="radio1"><span>服装</span>
- </label>
- <label data-toggle="radio" class="radio-pretty">
- <input type="radio" name="radio1"><span>电器</span>
- </label>
- <label data-toggle="radio" class="radio-pretty">
- <input type="radio" name="radio1"><span>美食</span>
- </label>
- <h3>半选</h3>
- <label data-toggle="radio" class="checkbox-pretty halfchecked">
- <input type="checkbox"><span>半选</span>
- </label>
- <h3>禁用</h3>
- <label data-toggle="radio" class="checkbox-pretty checked disabled">
- <input type="checkbox" checked="checked" disabled=""><span>不可选</span>
- </label>
- </form>
- 复制代码代码已复制
内联状态
- <form class="sui-form">
- <label data-toggle="checkbox" class="checkbox-pretty inline checked">
- <input type="checkbox" checked="checked"><span>鸣人</span>
- </label>
- <label data-toggle="checkbox" class="checkbox-pretty inline">
- <input type="checkbox"><span>佐助</span>
- </label>
- <h3>单选框</h3>
- <label data-toggle="radio" class="radio-pretty inline checked">
- <input type="radio" checked="checked" name="radio1"><span>服装</span>
- </label>
- <label data-toggle="radio" class="radio-pretty inline">
- <input type="radio" name="radio1"><span>电器</span>
- </label>
- <label data-toggle="radio" class="radio-pretty inline">
- <input type="radio" name="radio1"><span>美食</span>
- </label>
- <h3>半选</h3>
- <label data-toggle="radio" class="checkbox-pretty inline halfchecked">
- <input type="checkbox"><span>半选</span>
- </label>
- <h3>禁用</h3>
- <label data-toggle="radio" class="checkbox-pretty inline checked disabled">
- <input type="checkbox" checked="checked" disabled=""><span>不可选</span>
- </label>
- </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
select
详细文档点击这里 dropdown
- <span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop12" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
- <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
- <ul id="menu12" role="menu" aria-labelledby="drop12" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
- </ul></span></span>
Textarea
- <form class="form-inline sui-form">
- <textarea rows="3"></textarea>
- </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
关联校验
- <form class="sui-form form-horizontal">
- <div class="control-group warning">
- <label for="inputWarning" class="control-label">警示输入框:</label>
- <div class="controls">
- <input type="text" id="inputWarning">
- <span class="help-inline">警示文案</span>
- </div>
- </div>
- <div class="control-group error">
- <label for="inputError" class="control-label">错误输入框:</label>
- <div class="controls">
- <input type="text" id="inputError">
- <span class="help-inline">出错文案</span>
- </div>
- </div>
- <div class="control-group success">
- <label for="inputSuccess" class="control-label">成功输入框:</label>
- <div class="controls">
- <input type="text" id="inputSuccess">
- <span class="help-inline">成功文案</span>
- </div>
- </div>
- <div class="control-group info">
- <label for="inputInfo" class="control-label">帮助输入框:</label>
- <div class="controls">
- <input type="text" id="inputInfo">
- <span class="help-inline">帮助文案</span>
- </div>
- </div>
- <div class="control-group warning">
- <label for="inputWarning" class="control-label">警示输入框:</label>
- <div class="controls"><input type="text" id="inputWarning">
- <div class="sui-msg msg-naked msg-tips"><i class="msg-icon"></i>
- <div class="msg-con">警告</div>
- </div>
- </div>
- </div>
- <div class="control-group error">
- <label for="inputError" class="control-label">错误输入框:</label>
- <div class="controls"><input type="text" id="inputError">
- <div class="sui-msg msg-naked msg-error"><i class="msg-icon"></i>
- <div class="msg-con">错误</div>
- </div>
- </div>
- </div>
- <div class="control-group success">
- <label for="inputSuccess" class="control-label">成功输入框:</label>
- <div class="controls"><input type="text" id="inputSuccess">
- <div class="sui-msg msg-naked msg-success"><i class="msg-icon"></i>
- <div class="msg-con">成功</div>
- </div>
- </div>
- </div>
- <div class="control-group info">
- <label for="inputInfo" class="control-label">帮助输入框:</label>
- <div class="controls"><input type="text" id="inputInfo">
- <div class="sui-msg msg-naked msg-info"><i class="msg-icon"></i>
- <div class="msg-con">帮助</div>
- </div>
- </div>
- </div>
- </form>
关联校验接口
warning
、error
、success
、info
- 复制代码代码已复制
按功能分类
搜索框
- <form class="sui-form form-search">
- <input type="text" class="input-medium search-query">
- <button type="submit" class="sui-btn btn-primary">Search</button>
- </form>
添加
.form-search
到 <form>
标签上并且添加 .search-query
到 <input>
标签上- 复制代码代码已复制
内联表单
- <span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop12" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
- <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
- <ul id="menu12" role="menu" aria-labelledby="drop12" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
- </ul></span></span>
添加
.form-inline
成为内联状态- 复制代码代码已复制
水平表单
- <form class="sui-form form-horizontal">
- <div class="control-group">
- <label for="inputEmail" class="control-label">邮箱:</label>
- <div class="controls">
- <input type="text" id="inputEmail" placeholder="Email">
- </div>
- </div>
- <div class="control-group">
- <label for="inputPassword" class="control-label">密码:</label>
- <div class="controls">
- <input type="password" id="inputPassword" placeholder="Password">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label"></label>
- <div class="controls">
- <label data-toggle="checkbox" class="checkbox-pretty inline">
- <input type="checkbox" name="remember-me"><span>记住我</span>
- </label>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label"></label>
- <div class="controls">
- <button type="submit" class="sui-btn btn-primary">Sign in</button>
- </div>
- </div>
- </form>
添加
.form-horizontal
成为水平状态- 复制代码代码已复制
扩展表单控件
默认选项
- <form class="sui-form">
- <div class="input-prepend"><span class="add-on">@</span>
- <input id="prependedInput" type="text" placeholder="Username" class="span2 input-fat">
- </div><br>
- <div class="input-append">
- <input id="appendedInput" type="text" class="span2 input-fat"><span class="add-on">.00</span>
- </div><br>
- <div class="input-inner">
- <input type="text" class="span2 input-fat"><span class="add-on">@</span>
- <input type="text" class="span2 input-fat">
- </div>
- </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
联合体
- <form class="sui-form form-inline">
- <div class="input-prepend input-append"><span class="add-on">$</span>
- <input id="appendedPrependedInput" type="text" class="span2 input-fat"><span class="add-on">.00</span>
- </div>
- </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
按钮替换文本
- <form class="sui-form form-inline">
- <div class="input-append">
- <input id="appendedInputButton" type="text" class="span2">
- <button type="button" class="sui-btn">Go!</button>
- </div>
- </form><br>
- <form class="sui-form form-inline">
- <div class="input-append">
- <input id="appendedInputButtons" type="text" class="span2">
- <button type="button" class="sui-btn">Search</button>
- <button type="button" class="sui-btn">Options</button>
- </div>
- </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
搜索表单
- <form class="sui-form form-search">
- <div class="input-append">
- <input type="text" class="span2 search-query">
- <button type="button" class="sui-btn">Search</button>
- </div>
- <div class="input-prepend">
- <button type="button" class="sui-btn">Search</button>
- <input type="text" class="span2 search-query">
- </div>
- </form>
六种尺寸:.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge
- 复制代码代码已复制
所有案例
demo1
- <form class="sui-form form-horizontal">
- <div class="control-group">
- <label class="control-label">单选框:</label>
- <div class="controls">
- <label data-toggle="radio" class="radio-pretty inline checked">
- <input type="radio" checked="checked" name="radio"><span>服装</span>
- </label>
- <label data-toggle="radio" class="radio-pretty inline">
- <input type="radio" name="radio"><span>电器</span>
- </label>
- <label data-toggle="radio" class="radio-pretty inline">
- <input type="radio" name="radio"><span>美食</span>
- </label>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">复选框:</label>
- <div class="controls">
- <label data-toggle="checkbox" class="checkbox-pretty inline checked">
- <input type="checkbox" checked="checked"><span>鸣人</span>
- </label>
- <label data-toggle="checkbox" class="checkbox-pretty inline">
- <input type="checkbox"><span>佐助</span>
- </label>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">输入框(迷你):</label>
- <div class="controls">
- <input type="text" class="input-mini">
- <div class="sui-msg msg-tips msg-naked">
- <div class="msg-con">提示信息,比如:建议你设置安全密码</div>
- <s class="msg-icon"></s>
- </div>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">输入框(小号):</label>
- <div class="controls">
- <input type="text" class="input-small">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">输入框(中号):</label>
- <div class="controls">
- <input type="text" class="input-medium">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">输入框(大号):</label>
- <div class="controls">
- <input type="text" class="input-large">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">输入框(加大):</label>
- <div class="controls">
- <input type="text" class="input-xlarge">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">输入框(加加):</label>
- <div class="controls">
- <input type="text" class="input-xxlarge">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">时间选择:</label>
- <div class="controls">
- <input type="text" class="input-medium input-date">
- -
- <input type="text" class="input-medium input-date">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">备注:</label>
- <div class="controls">
- <textarea rows="3" class="input-block-level"></textarea>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label"></label>
- <div class="controls">
- <button type="submit" class="sui-btn btn-primary">提交审核</button>
- <button type="reset" class="sui-btn">重置</button>
- </div>
- </div>
- </form>
.form-horizontal
用于切换表单字段水平操放- 复制代码代码已复制
demo2
- <form class="sui-form form-horizontal">
- <div class="control-group">
- <label class="control-label v-top"><b style="color: #f00;">*</b>
- 地点:
- </label>
- <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">
- <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
- <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
- </ul></span></span>
- <div class="sui-msg msg-error msg-clear help-block">
- <div class="msg-con">该项为必填项</div>
- <s class="msg-icon"></s>
- </div>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label v-top"><b style="color: #f00;">*</b> <span style="padding:0 24px 0 0;">主</span>题:</label>
- <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">
- <input value="1" name="zt" type="hidden"><i class="caret"></i><span>吃喝玩乐</span></a>
- <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="1">吃喝玩乐</a></li>
- </ul></span></span>
- <input type="text" value="" class="input-xlarge">
- <div class="sui-msg msg-error msg-clear help-block">
- <div class="msg-con">该项为必填项</div>
- <s class="msg-icon"></s>
- </div>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label v-top"><b style="color: #f00;">*</b> <span style="padding:0 24px 0 0;">内</span>容:</label>
- <div class="controls">
- <textarea style="height: 190px;" class="input-xxlarge"></textarea>
- <div style="vertical-align: top;" class="sui-msg msg-tips msg-default">
- <div class="msg-con">
- <p style="margin-bottom: 8px; font-weight: bold;">消息渠道发送字数提示:</p>
- <p>短信: 61个汉字为一条短信,超过分多条发送</p>
- <p>旺旺: 系统文本对话消息XXXX个汉字</p>
- <p> 浮出消息XXXX汉字</p>
- <p> Html系统对话消息XXX个汉字</p>
- <p>站内信:XXXX个汉字</p>
- </div>
- <s class="msg-icon"></s>
- </div>
- <div class="sui-msg msg-error msg-clear help-block">
- <div class="msg-con">该项为必填项</div>
- <s class="msg-icon"></s>
- </div>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label"><span style="padding:0 24px 0 0;">链</span>
- 接:
- </label>
- <div class="controls">
- <input type="text" value="" class="input-xxlarge">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label v-top"><b style="color: #f00;">*</b>
- 发送渠道:
- </label>
- <div class="controls">
- <div class="row-fluid">
- <label data-toggle="radio" class="radio-pretty inline checked">
- <input type="radio" checked="checked" name="qudao"><span>商家中心</span>
- </label>
- <label data-toggle="radio" class="radio-pretty inline">
- <input type="radio" name="qudao"><span>旺旺弹窗</span>
- </label>
- <label data-toggle="radio" class="radio-pretty inline">
- <input type="radio" name="qudao"><span>站内信</span>
- </label>
- <div class="sui-msg msg-tips msg-default msg-clear help-block">
- <div class="msg-con">是否向子账号发送消息:
- <label data-toggle="radio" class="radio-pretty inline">
- <input type="radio" name="zzh" value="1"><span>是</span>
- </label>
- <label data-toggle="radio" class="radio-pretty inline checked">
- <input type="radio" checked="checked" name="zzh" value="0"><span>否</span>
- </label>
- </div>
- <s class="msg-icon"></s>
- </div>
- </div>
- <div class="row-fluid">
- <label class="checkbox inline">
- <input name="m1" type="checkbox" value="1" checked="">
- 短信发送给店长
- </label>
- </div>
- <div class="row-fluid">
- <label class="checkbox inline">
- <input name="m1" type="checkbox" value="2" checked="">
- 短信发送给电商决策人
- </label>
- </div>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label"><b style="color: #f00;">*</b>
- 审<span style="padding: 0 6px;">核</span>人:
- </label>
- <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">
- <input value="1" name="zt" type="hidden"><i class="caret"></i><span>管理员</span></a>
- <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="1">管理员</a></li>
- </ul></span></span></div>
- </div>
- <div class="control-group">
- <label class="control-label"></label>
- <div class="controls">
- <button type="submit" class="sui-btn btn-primary">提交审核</button>
- <button type="reset" class="sui-btn">重置</button>
- </div>
- </div>
- </form>
.form-horizontal
用于切换表单字段水平操放- 复制代码代码已复制