<button type="button" class="layui-btn">一个标准的按钮</button> <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
| 名称 | 组合 |
|---|---|
| 原始 | class="layui-btn layui-btn-primary" |
| 默认 | class="layui-btn" |
| 百搭 | class="layui-btn layui-btn-normal" |
| 暖色 | class="layui-btn layui-btn-warm" |
| 警告 | class="layui-btn layui-btn-danger" |
| 禁用 | class="layui-btn layui-btn-disabled" |
| 名称 | 组合 |
|---|---|
| 主色 | class="layui-btn layui-btn-primary layui-border-green" |
| 百搭 | class="layui-btn layui-btn-primary layui-border-blue" |
| 暖色 | class="layui-btn layui-btn-primary layui-border-orange" |
| 警告 | class="layui-btn layui-btn-primary layui-border-red" |
| 深色 | class="layui-btn layui-btn-primary layui-border-black" |
| 尺寸 | 组合 |
|---|---|
| 大型 | class="layui-btn layui-btn-lg" |
| 默认 | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
| 尺寸 | 组合 |
|---|---|
| 大型百搭 | class="layui-btn layui-btn-lg layui-btn-normal" |
| 正常暖色 | class="layui-btn layui-btn-warm" |
| 小型警告 | class="layui-btn layui-btn-sm layui-btn-danger" |
| 迷你禁用 | class="layui-btn layui-btn-xs layui-btn-disabled" |
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
| 主题 | 组合 |
|---|---|
| 原始 | class="layui-btn layui-btn-radius layui-btn-primary" |
| 默认 | class="layui-btn layui-btn-radius" |
| 百搭 | class="layui-btn layui-btn-radius layui-btn-normal" |
| 暖色 | class="layui-btn layui-btn-radius layui-btn-warm" |
| 警告 | class="layui-btn layui-btn-radius layui-btn-danger" |
| 禁用 | class="layui-btn layui-btn-radius layui-btn-disabled" |
| 尺寸 | 组合 |
|---|---|
| 大型百搭 | class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" |
| 小型警告 | class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" |
| 迷你禁用 | class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled" |
<button type="button" class="layui-btn"> <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮 </button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon layui-icon-left"></i> </button>
温馨提示：各种图标字体请移步文档左侧【页面元素 - 图标】阅览
将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配
<div class="layui-btn-group"> <button type="button" class="layui-btn">增加</button> <button type="button" class="layui-btn">编辑</button> <button type="button" class="layui-btn">删除</button> </div> <div class="layui-btn-group"> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> </div> <div class="layui-btn-group"> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> </div>
尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
<div class="layui-btn-container"> <button type="button" class="layui-btn">按钮一</button> <button type="button" class="layui-btn">按钮二</button> <button type="button" class="layui-btn">按钮三</button> </div>
本章节内容共分 1 部分：
- 按钮
