LayUI 按钮使用

概述

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为 layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

官网：
https://www.layui.com/doc/element/button.html

使用

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="https://bigdataboy.cn" class="layui-btn">一个可跳转的按钮</a>

主题

不同颜色风格的按钮

尺寸

按钮的大小样式

特殊样式

按钮的 圆角 ，图标 ，流体按钮（最大化适应）

<div class="layui-row">
        <button type="button" class="layui-btn layui-btn-warm">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
        <!-- 暖色图标按钮 -->
        <button type="button" class="layui-btn layui-btn-warm layui-icon layui-icon-add-1">添加</button>
    </div>

按钮组

按钮组 与 按钮容器的差别在于 按钮之间的间距

<!-- 按钮组 包裹在 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>

按钮容器

按钮组 与 按钮容器的差别在于 按钮之间的间距

<!-- 按钮容器 包裹在 layui-btn-container 类中 -->
<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>

事件监听

使用 Jquery 来为按钮添加各种事件

<button type="button" id="btn" class="layui-btn layui-btn-normal">圆形百搭按钮</button>

<script>
    var $ = layui.jquery;
    $('#btn').click(function () {
        layer.alert("大数据男孩")
    })
</script>