记录新的学习之LayUi-02Button - cocobear9

一枚普通的zisuer(lll￢ω￢),努力每天多学一点点

从官网上复制源代码查看

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图标</title>
    <%--引入css样式--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<%--引入js文件--%>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
    <legend>按钮主题</legend>
    <div>
        <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
        <button type="button" class="layui-btn">默认按钮</button>
        <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
        <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
        <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
        <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
    </div>
</fieldset>
</body>
</html>

<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
        <a class="layui-btn layui-btn-primary">AAA</a>
        <span class="layui-btn layui-btn-primary">BBBB</span>

把这个class样式加到a标签和<span>标签上同样是可行的

所以：1.必要样式:layui-btn

　　　2.主题样式:

layui-btn-primary原始按钮

layui-btn-normal百搭按钮

layui-btn-warm暖色按钮

layui-btn-danger警告按钮

layui-btn-disabled禁用按钮

=======================================================================================
3:按钮大小样式 layui-btn-lg大型按钮  layui-btn-sm小型按钮  layui-btn-sm小型按钮

4：混搭风格的按钮：样式结合

class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角

 class="layui-btn layui-btn-lg layui-icon layui-icon-rate-solid">图标按钮

<fieldset class="layui-elem-field site-demo-button">
    <legend>风格混搭的按钮</legend>
    <div>
        <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
        <a href="http://www.layui.com/doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享</button>
        <button type="button" class="layui-btn layui-btn-lg layui-icon layui-icon-rate-solid">图标按钮</button>
        <button type="button" class="layui-btn layui-btn-lg ">
            <span class="layui-icon">&#xe6c9;</span>图标按钮
        </button>
    </div>
</fieldset>

5.圆角按钮：

layui-btn-radius

<fieldset class="layui-elem-field site-demo-button">
    <legend>还可以是圆角按钮</legend>
    <div>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
        <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
        <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
    </div>
</fieldset>

6：按钮组 ：加一个

<div class="layui-btn-group">包裹起来

注:按钮组的监听事件,首先要引入jquety文件 layui.use(["jquery"],function(){

　　var $ =layui.jquery ;

........

})

<script>
        layui.use(["jquery"],function () {
            //这行必须加
            var $=layui.jquery;
            /*给按钮组加上监听事件*/
            /*$(".layui-btn").click(function () {
                alert($(this).html());
            })*/
            /*给add按钮加上监听事件*/
            $("#add").click(function () {
                alert($(this).html())
            })
        })
</script>

posted on 2020-10-13 19:52 cocobear9 阅读(145) 评论(0) 收藏举报

刷新页面返回顶部


博客园 © 2004-2025 浙公网安备 33010602011771号浙ICP备2021040463号-3

导航