當前位置：首頁 >

layui——按钮

發布時間：2025/4/16 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 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——按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

按钮
layui