美文网首页
7,按钮-页面元素

7,按钮-页面元素

作者: 滔滔逐浪 | 来源:发表于2019-01-15 15:50 被阅读0次

    向任意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>
    

    相关文章

      网友评论

          本文标题:7,按钮-页面元素

          本文链接:https://www.haomeiwen.com/subject/znsydqtx.html