设计规范
开发者文档
- 按钮统一使用下面提供的高度和样式，最好不要自己添加新的尺寸和样式（但是可以把其中某些样式进行重载）。
- 一般情况下推荐使用灰白色按钮，根据具体的页面和使用环境来选择。
- 比较重要的操作或者需要用户明显注意到的地方使用蓝色按钮。
- 黄色按钮请谨慎使用，在非常重要和特殊的情况下需要用户迅速发现并立即处理的时候使用，一个页面不能超过一个黄色按钮。
- 更新 v1.2.1：修复了 btn-bordered 的禁用状态样式。
不同大小和功能的按钮
- <a href="javascript:void(0);" class="sui-btn btn-xlarge">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-xlarge btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-xlarge btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-xlarge btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-xlarge btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-xlarge btn-danger">危险</a>
- <a href="javascript:void(0);" class="sui-btn btn-xlarge btn-link">链接</a>
- <br><br><a href="javascript:void(0);" class="sui-btn btn-large">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-large btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-large btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-large btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-large btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-large btn-danger">危险</a>
- <a href="javascript:void(0);" class="sui-btn btn-large btn-link">链接</a>
- <br><br><a href="javascript:void(0);" class="sui-btn">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-danger">危险</a>
- <a href="javascript:void(0);" class="sui-btn btn-link">链接</a>
- <br><br><a href="javascript:void(0);" class="sui-btn btn-small">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-small btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-small btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-small btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-small btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-small btn-danger">危险</a>
- <a href="javascript:void(0);" class="sui-btn btn-small btn-link">链接</a>
- <br><br><a href="javascript:void(0);" class="sui-btn disabled">默认禁用</a> <a href="javascript:void(0);" class="sui-btn disabled btn-primary">首要禁用</a> <a href="javascript:void(0);" class="sui-btn disabled btn-success">成功禁用</a> <a href="javascript:void(0);" class="sui-btn disabled btn-info">信息禁用</a> <a href="javascript:void(0);" class="sui-btn disabled btn-warning">警告禁用</a> <a href="javascript:void(0);" class="sui-btn disabled btn-danger">危险禁用</a> <a href="javascript:void(0);" class="sui-btn disabled btn-link">链接禁用</a>
按钮有四种尺寸：small, default, large 和 xlarge
按钮七种不同功能："default", "primary", "success", "info", "warning", "danger", "inverse"
还有一种是禁用的按钮，通过增加
.disabled class 或者添加 disabled属性
- 复制代码代码已复制
只有描边的按钮
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-xlarge">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-xlarge btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-xlarge btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-xlarge btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-xlarge btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-xlarge btn-danger">危险</a>
- <br><br><a href="javascript:void(0);" class="sui-btn btn-bordered btn-large">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-large btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-large btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-large btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-large btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-large btn-danger">危险</a>
- <br><br><a href="javascript:void(0);" class="sui-btn btn-bordered">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-danger">危险</a>
- <br><br><a href="javascript:void(0);" class="sui-btn btn-bordered btn-small">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-small btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-small btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-small btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-small btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-bordered btn-small btn-danger">危险</a>
- <br><br><a href="javascript:void(0);" class="sui-btn btn-bordered disabled">默认禁用</a> <a href="javascript:void(0);" class="sui-btn btn-bordered disabled btn-primary">首要禁用</a> <a href="javascript:void(0);" class="sui-btn btn-bordered disabled btn-success">成功禁用</a> <a href="javascript:void(0);" class="sui-btn btn-bordered disabled btn-info">信息禁用</a> <a href="javascript:void(0);" class="sui-btn btn-bordered disabled btn-warning">警告禁用</a> <a href="javascript:void(0);" class="sui-btn btn-bordered disabled btn-danger">危险禁用</a>
- 复制代码代码已复制
带图标的按钮
- <a href="javascript:void(0);" class="sui-btn"><i class="sui-icon icon-pencil"></i>默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-primary"><i class="sui-icon icon-pencil"></i>首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-success"><i class="sui-icon icon-pencil"></i>成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-info"><i class="sui-icon icon-pencil"></i>信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-warning"><i class="sui-icon icon-pencil"></i>警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-danger"><i class="sui-icon icon-pencil"></i>危险</a>
- <a href="javascript:void(0);" class="sui-btn btn-link"><i class="sui-icon icon-pencil"></i>链接</a>
带图标的按钮
- 复制代码代码已复制
块级按钮
- <a href="javascript:void(0);" class="sui-btn btn-block btn-xlarge">默认</a>
- <a href="javascript:void(0);" class="sui-btn btn-block btn-xlarge btn-primary">首要</a>
- <a href="javascript:void(0);" class="sui-btn btn-block btn-xlarge btn-success">成功</a>
- <a href="javascript:void(0);" class="sui-btn btn-block btn-xlarge btn-info">信息</a>
- <a href="javascript:void(0);" class="sui-btn btn-block btn-xlarge btn-warning">警告</a>
- <a href="javascript:void(0);" class="sui-btn btn-block btn-xlarge btn-danger">危险</a>
- <a href="javascript:void(0);" class="sui-btn btn-block btn-xlarge btn-link">链接</a>
块级按钮会独占一行
- 复制代码代码已复制