master

分支 (1)

管理

管理

master

Simple
/
button.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Simple - 简！ </title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <meta name="keywords" content="layui,ui,ui框架,前端框架,JS组件,Simple">
    <meta name="description" content="Simple 是一个基于layui框架，一个轻量，简约，包含丰富模块化前端框架，帮您快速构建网站。">
    <link rel="stylesheet" href="./css/s.css">
    <link rel="stylesheet" href="./css/extend.css">
    <script src="./layui.js"></script>
</head>
<body>

<div class="s-header">
    <div class="layui-container flex space-between">
        <a class="s-header-a" href="./core.html">
            <img src="./img/logo/logo-grey.png" alt="" class="s-header-logo">
        </a>
        <ul class="s-header-menu">
            <li><a href="./">首页</a></li>
            <li><a href="./core.html" class="active">基础框架</a></li>
            <li><a href="http://www.we63.com/index.php">组件库</a></li>
            <li><a href="http://www.we63.com/page.php">页面库</a></li>
        </ul>
    </div>
</div>

<div class="s-subheader" style="">
    <div class="layui-container flex">
        <ul class="flex">
            <li><a href="color.html">色彩</a></li>
            <li><a href="typo.html">排版</a></li>
            <li><a href="button.html">按钮</a></li>
            <li><a href="badge.html">徽标</a></li>
            <li><a href="nav.html">导航</a></li>
            <li><a href="breadcrumb.html">面包屑</a></li>
            <li><a href="table.html">表格</a></li>
            <li><a href="form.html">表单</a></li>
            <li><a href="panel.html">面板</a></li>
            <li><a href="progress.html">进度条</a></li>
            <li><a href="icon.html">图标</a></li>
            <li><a href="blank.html">前台空页面</a></li>
            <li><a href="admin.html">后台空页面</a></li>
            <li><a href="help.html">辅助类</a></li>
        </ul>
    </div>
</div>


<div class="layui-container">

<div class="layui-row">

    <div class="layui-col-md12">


        <div class="heading-block">

            <h1>按钮·操作</h1>
            <p>表单一体化，流畅的用户体验</p>
        </div>


        <h1 class="heading-mi">缺省按钮</h1>


                    <div class="example">
                        <p>
                            <button class="layui-btn">默认按钮</button>
                            <button class="layui-btn layui-btn-primary">主按钮primary</button>
                            <button class="layui-btn layui-btn-warm">暖色按钮warm</button>
                            <button class="layui-btn layui-btn-danger">警告按钮danger</button>
                            <button class="layui-btn layui-btn-disabled">禁用按钮disabled</button>
                        </p>
                        <p style="margin-top: 1.5rem">
                            <button class="layui-btn bg-green">绿色</button>
                            <button class="layui-btn bg-pink">粉色</button>
                            <button class="layui-btn bg-purple">紫色</button>
                            <button class="layui-btn bg-grey">灰色</button>
                            <button class="layui-btn bg-cyan">青色</button>
                            <button class="layui-btn bg-orange">橙色</button>
                            <button class="layui-btn bg-black">黑色</button>
                            <button class="layui-btn bg-lightblue">浅蓝</button>
                            <button class="layui-btn bg-lightblack">浅黑</button>
                            <button class="layui-btn bg-deepblue">深蓝</button>
                            <button class="layui-btn bg-deepblack">深黑</button>
                        </p>


                </div>


        <h1 class="heading-mi">按钮尺寸</h1>


                    <div class="example">
                        <p>
                            <button class="layui-btn layui-btn-lg layui-btn-normal">大型百搭</button>
                            <button class="layui-btn layui-btn-warm">正常暖色</button>
                            <button class="layui-btn layui-btn-sm layui-btn-danger">小型警告</button>
                            <button class="layui-btn layui-btn-xs layui-btn-disabled">禁用</button>

                        </p>

                    </div>


        <h1 class="heading-mi">流体按钮</h1>


        <div class="example">

            <div style="margin-top: 10px;">
                <button class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
            </div>

            <div style="margin-top: 10px;">
                <button class="layui-btn layui-btn-primary layui-btn-fluid">流体按钮（最大化适应）</button>
            </div>


        </div>


        <h1 class="heading-mi">胶囊按钮</h1>


                    <div class="example">
                        <p>
                            <button class="layui-btn layui-btn-radius layui-btn-primary">原始按钮</button>
                            <button class="layui-btn layui-btn-radius">默认按钮</button>

                            <button class="layui-btn layui-btn-radius layui-btn-warm">暖色按钮</button>
                            <button class="layui-btn layui-btn-radius layui-btn-danger">警告按钮</button>
                            <button class="layui-btn layui-btn-radius layui-btn-disabled">禁用按钮</button>


                            <button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">大型百搭</button>
                            <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">小型警告</button>
                            <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled">迷你禁用</button>

                        </p>

                    </div>


        <h1 class="heading-mi">图标按钮</h1>


                    <div class="example">
                        <p>
                            <button class="layui-btn"><i class="layui-icon"></i> 添加</button>


                            <button class="layui-btn"><i class="layui-icon"></i></button>
                            <button class="layui-btn"><i class="layui-icon"></i></button>

                            <button class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">ဂ</i></button>

                            <button class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon"></i></button>


                            <button class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i></button>
                            <button class="layui-btn layui-btn-sm layui-btn-warm"><i class="layui-icon"></i></button>
                            <button class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon"></i></button>
                            <button class="layui-btn layui-btn-sm layui-btn-disabled"><i class="layui-icon"></i></button>


                        </p>

                    </div>


        <h1 class="heading-mi">按钮组</h1>


                    <div class="example">
                        <div class="layui-btn-group">
                            <button class="layui-btn">增加</button>
                            <button class="layui-btn">编辑</button>
                            <button class="layui-btn">删除</button>
                        </div>
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                            <button class="layui-btn layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                            <button class="layui-btn layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                            <button class="layui-btn layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                        </div>

                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                        </div>

                    </div>


        <h1 class="heading-mi">按钮容器</h1>


                <div class="example">
                    <div class="layui-btn-container">
                        <button class="layui-btn">按钮一</button>
                        <button class="layui-btn">按钮二</button>
                        <button class="layui-btn">按钮三</button>
                        <button class="layui-btn">按钮四</button>
                        <button class="layui-btn">按钮五</button>
                        <button class="layui-btn">按钮六</button>
                        <button class="layui-btn">按钮一</button>
                        <button class="layui-btn">按钮二</button>
                        <button class="layui-btn">按钮三</button>
                        <button class="layui-btn">按钮四</button>
                        <button class="layui-btn">按钮五</button>
                        <button class="layui-btn">按钮六</button>
                        <button class="layui-btn">按钮一</button>
                        <button class="layui-btn">按钮二</button>
                        <button class="layui-btn">按钮三</button>
                        <button class="layui-btn">按钮四</button>
                        <button class="layui-btn">按钮五</button>
                        <button class="layui-btn">按钮六</button>
                        <button class="layui-btn">按钮一</button>
                        <button class="layui-btn">按钮二</button>
                    </div>
                </div>


            </div>

</div>
</div>

<div class="layui-col-md12">
    <div class="s-footer">
        <ul>
            <li><strong>Simple </strong></li>
            <li>Version: v1.0</li>
            <li>Last Update:2018-8-3</li>
            <li>
                <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260258189'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/stat.php%3Fid%3D1260258189%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
            </li>
        </ul>
    </div>
</div>

<script>


    layui.use(['element','form','jquery','upload','laydate'], function(){

        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;

        var laydate = layui.laydate;


        // 子菜单静态高亮
        $('.s-subheader a').each(function(){

            filename=location.href.substr(location.href.lastIndexOf('/')+1);

            if ($(this).attr("href") == filename ){
                $(this).addClass("active");
            }
        });

        //执行实例
        var uploadInst = upload.render({
            elem: '#btnlogo' //绑定元素
            ,url: '/upload/' //上传接口
            ,done: function(res){
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>
</body>
</html>