向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。
用法
···
<button class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
</head>
<body>
<button class="layui-btn layui-btn-primary">一个原始的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的默认按钮</a>
<button class="layui-btn layui-btn-normal">一个百搭的按钮</button>
<button class="layui-btn layui-btn-warm">一个暖色的按钮</button>
<button class="layui-btn layui-btn-danger">一个警告的按钮</button>
<button class="layui-btn layui-btn-disabled">一个禁用的按钮</button>
</body>
</html>
主题:
名称 组合
原始 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-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 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"
<button class="layui-btn layui-btn-primary layui-btn-radius">一个原始的按钮</button>
<a href="http://www.layui.com" class="layui-btn layui-btn-radius">一个可跳转的默认按钮</a>
<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>
网友评论