layui第一篇（layui佈局、圖示、按鈕、表單）
阿新 • • 發佈：2018-12-20
<html> <head> <meta content="text/html;charset=UTF-8"/> <script type="text/javascript" src="layui-v2.3.0/layui/layui.js"></script> <link rel="stylesheet" href="layui-v2.3.0/layui/css/layui.css"> <style> i{color: #1E9FFF;} </style> </head> <body> <!-- [ xs超小螢幕 ,sm小螢幕 ,md中等螢幕 ,lg大型螢幕 ] layui-container容器（寬度限制） --> <!-- layui-fluid:鋪滿 --> <div class="layui-container"> <!--row行--> <div class="layui-row"> <!-- [ layui-col-xs3 ,layui-col-sm3 ,layui-col-md3 ] xs移動 sm平板 md桌面 --> <div class="layui-col-md12"> <i class="layui-icon"></i><i class="layui-icon layui-icon-face-smile"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-read"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-edit"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-delete"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-form"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-search"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-component"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-home"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-refresh"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-ok"></i> <i class="layui-icon">ဆ</i><i class="layui-icon layui-icon-close"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-app"></i> <i class="layui-icon"></i><i class="layui-icon layui-icon-fire"></i> </div> <div class="layui-col-md3" style="background-color:#FFB800">佔用3/12</div> <div class="layui-col-md9" style="background-color:#009688">佔用9/12</div> <div class="layui-col-md6" style="background-color:#FF5722">佔用6/12</div> <div class="layui-col-md6" style="background-color:#2F4056">佔用6/12</div> <div class="layui-col-md9" style="background-color:#01AAED">佔用9/12</div> <div class="layui-col-md3" style="background-color:#5FB878">佔用3/12</div> <div class="layui-col-md12" style="background-color:#393D49">佔用12/12</div> </div> </div> <div class="layui-fluid"> <!--layui-btn-lg大型 layui-btn-sm小型 layui-btn-xs迷你--> <button class="layui-btn"><i class="layui-icon layui-icon-read"></i></button> <button class="layui-btn"><i class="layui-icon layui-icon-edit"></i></button> <button class="layui-btn"><i class="layui-icon layui-icon-fire"></i></button> <button class="layui-btn"><i class="layui-icon layui-icon-app"></i></button> <button class="layui-btn"><i class="layui-icon layui-icon-ok"></i></button> <button class="layui-btn"><i class="layui-icon layui-icon-form"></i></button> <button class="layui-btn"><i class="layui-icon layui-icon-search"></i></button> <button class="layui-btn"><i class="layui-icon layui-icon-close"></i></button> <button class="layui-btn ">標準按鈕</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> <a href="http://www.baidu.com" class="layui-btn layui-btn-normal">連結按鈕</a> <button class="layui-btn layui-btn-xs">迷你按鈕</button> <button class="layui-btn layui-btn-sm">小型按鈕</button> <button class="layui-btn">正常按鈕</button> <button class="layui-btn layui-btn-lg">大型按鈕</button> <button class="layui-btn layui-btn-fluid">流體按鈕</button> <!--layui-btn-group:按鈕組--> <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> <div class="layui-container"> <div class="layui-col-md6"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">輸入框</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密碼框</label> <div class="layui-input-inline"> <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">輔助文字</div> </div> <div class="layui-form-item"> <label class="layui-form-label">單選框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男" checked> <input type="radio" name="sex" value="女" title="女"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文字域</label> <div class="layui-input-block"> <textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> </body> <script> layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; //訊息提示框 layer.msg('Hello World'); //監聽提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); //=============================== var requestData = JSON.stringify(data.field); layer.msg(JSON.stringify(requestData)); //=============================== return false;//阻止action跳轉 }); }); </script> </html>