layui——按钮
- 必要樣式 ?layui-btn
- 主題樣式
-
大小樣式
-
圖標結合
- 圓角樣式
- 按鈕組
- 事件監聽
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>按鈕</title><link rel="stylesheet" href="resources/layui/css/layui.css"> </head> <body><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><fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;"><legend>按鈕大小</legend><div><button type="button" class="layui-btn layui-btn-lg">最大按鈕</button><button type="button" class="layui-btn">默認按鈕</button><button type="button" class="layui-btn layui-btn-sm ">小型按鈕</button><button type="button" class="layui-btn layui-btn-xs">微型按鈕</button><button type="button" class="layui-btn layui-btn-xs layui-btn-danger">微型警告按鈕</button></div> </fieldset><fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;"><legend>圖標按鈕</legend><div><button type="button" class="layui-btn layui-icon layui-icon-rate-half"> </button><button type="button" class="layui-btn layui-icon layui-icon-cellphone">手機按鈕</button><button type="button" class="layui-btn layui-icon"> <span class="layui-icon"></span>手機按鈕</button></div> </fieldset><fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;"><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><fieldset class="layui-elem-field site-demo-button"><legend>按鈕組</legend><div class="layui-btn-group"><button type="button" class="layui-btn" id="add">增加</button><button type="button" class="layui-btn " id="update">編輯</button><button type="button" class="layui-btn" id="delete">刪除</button></div> </fieldset><script src="resources/layui/layui.js"></script> <script type="text/javascript">layui.use(["jquery"],function(){var $=layui.jquery;/* $(".layui-btn").click(function(){alert($(this).html())}) */$("#add").click(function(){alert($(this).html())})}) </script></body> </html>
總結
- 上一篇： layui使用方法——图标
- 下一篇： 导航菜单