组件
项目中各种通用的 UI 组件的示例
按钮
根据 Bootstrap 的按钮进行扩展而来。
目录
种类
<!-- HTML -->
<button class="btn btn-red" type="button">主要操作</button>
<button class="btn btn-blue" type="button">次要操作</button>
<button class="btn btn-aqua" type="button">不推荐操作</button>大小
根据页面布局选择合适大小的按钮。
<!-- HTML -->
<div>
<button class="btn btn-red btn-lg" type="button">主按钮</button>
<button class="btn btn-blue btn-lg" type="button">按钮</button>
<button class="btn btn-aqua btn-lg" type="button">按钮</button>
</div>
<div>
<button class="btn btn-red" type="button">主按钮</button>
<button class="btn btn-blue" type="button">按钮</button>
<button class="btn btn-aqua" type="button">按钮</button>
</div>
<div>
<button class="btn btn-red btn-sm" type="button">主按钮</button>
<button class="btn btn-blue btn-sm" type="button">按钮</button>
<button class="btn btn-aqua btn-sm" type="button">按钮</button>
</div>各参数如下：
| 种类 | 视觉高度 | 字体大小 | 字体颜色 | 补白 | 圆角大小 |
|---|---|---|---|---|---|
| 大按钮 | 50px | 18px | #FFFFFF | 纵：16px横： 20px | 6px |
| 普通按钮 | 36px | 16px | 纵：10px横： 20px | ||
| 小按钮 | 28px | 14px | 纵：7px横： 20px |