layui 按钮

示例里可以观看样式

图标加文字，加图标， 按钮组 查看代码 引入css

• 实例

    <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>
  

• 不用button 只要是容器标签就好

    <a   class="layui-btn layui-btn-primary"> 111</a>
    <span class="layui-btn layui-btn-primary">2222</span>
  

基础样式 layui-btn必须要有 主题样式其他

• layui-btn-primary 原始按钮
• layui-btn-normal 百搭按钮
• layui-btn-warm 暖色按钮
• layui-btn-danger 警告按钮
• layui-btn-disabled 禁用按钮

按钮的大小 layui-btn必须要有 layui-btn-lg 大

• layui-btn-lg 大型按钮
• layui-btn-sm 小型
• layui-btn-xs 微型

可以对以上进行组合

按钮加图标

去文字

• 按钮加图标

图标+文字

•   <button type="button" class="layui-btn layui-icon layui-icon-heart">空心按钮</button>
  

•   <button type="button" class="layui-btn "><span class="layui-icon layui-icon-heart">空心按钮 </span></button>
  

圆角按钮 圆角样式 layui-btn-radius

•   <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
  

风格混搭的按钮 所有放在一起

按钮组

    <fieldset class="layui-elem-field site-demo-button">
      <legend>按钮组</legend>
      <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>
    </fieldset>

按钮事件监听

• 加入id 页面中所有按钮加事件 等价于jquery文件

• 需要引入 jquery.js只是一个模块，想要使用需要加入

    layui.use(["jquery"],function(){
        var $=layui.jquery;
        $(".layui-btn").click(function(){
            alert($(this).html())
        })
    })
    //点击哪个打印那个文本内用