1. 向任意HTML元素设定class="layui-btn", 建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合, 从而形成更多种按钮风格。
2. 用法
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="#" class="layui-btn">一个可跳转的按钮</a>3. 主题
| 主题 |
组合 |
| 原始 |
class="layui-btn layui-btn-primary" |
| 默认 |
class="layui-btn" |
| 百搭 |
class="layui-btn layui-btn-normal"
扫描二维码关注公众号，回复：
12266399 查看本文章
|
| 暖色 |
class="layui-btn layui-btn-warm" |
| 警告 |
class="layui-btn layui-btn-danger" |
| 禁用 |
class="layui-btn layui-btn-disabled" |
4. 尺寸
| 尺寸 |
组合 |
| 大型 |
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-fluid" |
5. 圆角按钮
| 名称 |
组合 |
| 默认 |
class="layui-btn layui-btn-radius" |
6. 图标按钮
6.1. 实例
<button class="layui-btn"><i class="layui-icon"></i></button>
<a href="#" class="layui-btn"><i class="layui-icon"></i></a>7. 按钮组
7.1. 将按钮放入一个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>8. 按钮容器
8.2. 尽管按钮在同节点并排时会自动拉开间距, 但在按钮太多的情况, 效果并不是很美好。因为你需要用到按钮容器:
<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>9. 例子
9.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>按钮 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<style>
body { padding: 10px 50px; }
</style>
</head>
<body>
<h2>按钮主题:</h2>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<a href="#" class="layui-btn layui-btn-danger">警告按钮</a>
<a href="#" class="layui-btn layui-btn-disabled">禁用按钮</a>
<br /><br />
<h2>按钮尺寸:</h2>
<button class="layui-btn layui-btn-lg">大型按钮</button>
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-sm">小型按钮</button>
<button class="layui-btn layui-btn-xs">迷你按钮</button><br /><br />
<button class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button><br /><br />
<button class="layui-btn layui-btn-primary layui-btn-fluid">流体按钮(最大化适应)</button>
<br /><br />
<h2>按钮圆角:</h2>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
<br /><br />
<h2>按钮图标：</h2>
<button class="layui-btn"><i class="layui-icon"></i></button>
<button class="layui-btn"><i class="layui-icon"></i></button>
<button class="layui-btn"><i class="layui-icon"></i></button>
<button class="layui-btn"><i class="layui-icon"></i></button>
<button class="layui-btn"><i class="layui-icon"></i></button>
<a href="#" class="layui-btn"><i class="layui-icon"></i></a>
<a href="#" class="layui-btn"><i class="layui-icon"></i></a>
<br /><br />
<h2>按钮图文:</h2>
<button class="layui-btn"><i class="layui-icon"></i>添加</button>
<button class="layui-btn"><i class="layui-icon"></i>向左</button>
<button class="layui-btn"><i class="layui-icon"></i>向右</button>
<button class="layui-btn"><i class="layui-icon"></i>添加</button>
<button class="layui-btn"><i class="layui-icon"></i>编辑</button>
<a href="#" class="layui-btn"><i class="layui-icon"></i>删除</a>
<a href="#" class="layui-btn"><i class="layui-icon"></i>分享</a>
<br /><br />
<h2>按钮组:</h2>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>添加</button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>编辑</button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>删除</button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>分享</button>
</div>
<br /><br />
<h2>按钮容器:</h2>
<div class="layui-btn-container">
<button class="layui-btn">按钮一</button>
<button class="layui-btn">按钮二</button>
<button class="layui-btn">按钮三</button>
<button class="layui-btn">按钮四</button>
<button class="layui-btn">按钮五</button>
<button class="layui-btn">按钮六</button>
<button class="layui-btn">按钮七</button>
<button class="layui-btn">按钮八</button>
<button class="layui-btn">按钮九</button>
<button class="layui-btn">按钮十</button>
<button class="layui-btn">按钮十一</button>
<button class="layui-btn">按钮十二</button>
<button class="layui-btn">按钮十三</button>
<button class="layui-btn">按钮十四</button>
<button class="layui-btn">按钮十五</button>
<button class="layui-btn">按钮十六</button>
<button class="layui-btn">按钮十七</button>
<button class="layui-btn">按钮十八</button>
<button class="layui-btn">按钮十九</button>
<button class="layui-btn">按钮二十</button>
<button class="layui-btn">按钮二十一</button>
<button class="layui-btn">按钮二十二</button>
<button class="layui-btn">按钮二十三</button>
<button class="layui-btn">按钮二十四</button>
<button class="layui-btn">按钮二十五</button>
<button class="layui-btn">按钮二十六</button>
<button class="layui-btn">按钮二十七</button>
<button class="layui-btn">按钮二十八</button>
<button class="layui-btn">按钮二十九</button>
<button class="layui-btn">按钮三十</button>
<button class="layui-btn">按钮三十一</button>
<button class="layui-btn">按钮三十二</button>
<button class="layui-btn">按钮三十三</button>
<button class="layui-btn">按钮三十四</button>
<button class="layui-btn">按钮三十五</button>
<button class="layui-btn">按钮三十六</button>
<button class="layui-btn">按钮三十七</button>
<button class="layui-btn">按钮三十八</button>
<button class="layui-btn">按钮三十九</button>
</div>
</body>
</html>9.2. 效果图
