Layui按钮

最新推荐文章于 2024-01-25 17:37:36 发布
最新推荐文章于 2024-01-25 17:37:36 发布
阅读量803 收藏 2
点赞数
文章标签： layui javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57508774/article/details/122293275
版权

 效果图：

 源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入layui的css样式表-->
		<link rel="stylesheet" href="./layui/css/layui.css" media="all" />
	</head>
	<body>
		<br><br><br>
		<a href="http://www.layui.com" class="layui-btn">可跳转的按钮</a>	
		<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>	
		<br><br><br>
		
		<button type="button" class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>	
		<button type="button" class="layui-btn layui-btn-primary layui-border-blue">百搭按钮</button>	
		<button type="button" class="layui-btn layui-btn-primary layui-border-blue">暖色按钮</button>	
		<button type="button" class="layui-btn layui-btn-primary layui-border-blue">警告按钮</button>	
		<button type="button" class="layui-btn layui-btn-primary layui-border-black">深色按钮</button>	
		<br><br><br>
		
		<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>	
		<br><br><br>
		
		<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型百搭按钮</button>	
		<button type="button" class="layui-btn layui-btn-warm">正常暖色按钮</button>	
		<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">小型警告按钮</button>	
		<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">迷你禁用按钮</button>
		<br><br><br>
		
		<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
		<br><br><br>
		
		<button type="button" class="layui-btn layui-btn-radius layui-btn-primary">原始按钮</button>	
		<button type="button" class="layui-btn layui-btn-radius">标准按钮</button>	
		<button type="button" class="layui-btn layui-btn-radius layui-btn-normal">百搭按钮</button>	
		<button type="button" class="layui-btn layui-btn-radius layui-btn-warm">暖色按钮</button>	
		<button type="button" class="layui-btn layui-btn-radius layui-btn-danger">警告按钮</button>	
		<button type="button" class="layui-btn layui-btn-radius  layui-btn-disabled"">禁用按钮</button>	
		<br><br><br>
		
		<button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">大型百搭按钮</button>  
		<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">小型警告按钮</button>  
		<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled">迷你禁用按钮</button>  
		<br><br><br>
		
	<!--图标-->
	<button type="button" class="layui-btn">
	  <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
	</button>
	 
	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
	  <i class="layui-icon layui-icon-right"></i>
	</button>
	<br><br><br>
	
	<div class="layui-btn-group">
	  <button type="button" class="layui-btn">增加</button>
	  <button type="button" class="layui-btn">编辑</button>
	  <button type="button" class="layui-btn">删除</button>
	</div>
	      
	<div class="layui-btn-group">
	  <button type="button" class="layui-btn layui-btn-sm">
	    <i class="layui-icon">&#xe654;</i>
	  </button>
	  <button type="button" class="layui-btn layui-btn-sm">
	    <i class="layui-icon">&#xe642;</i>
	  </button>
	  <button type="button" class="layui-btn layui-btn-sm">
	    <i class="layui-icon">&#xe640;</i>
	  </button>
	  <button type="button" class="layui-btn layui-btn-sm">
	    <i class="layui-icon">&#xe602;</i>
	  </button>
	</div>
	 
	<div class="layui-btn-group">
	  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
	    <i class="layui-icon">&#xe654;</i>
	  </button>
	  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
	    <i class="layui-icon">&#xe642;</i>
	  </button>
	  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
	    <i class="layui-icon">&#xe640;</i>
	  </button>
	</div>
	<br><br><br>
	
	<div class="layui-btn-container">
	  <button type="button" class="layui-btn">按钮一</button> 
	  <button type="button" class="layui-btn">按钮二</button> 
	  <button type="button" class="layui-btn">按钮三</button> 
	</div>
	    
	</body>
</html>

Lovely-Zhang-1026
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui-按钮
chen2745213271的博客
09-28 3172
今天介绍一下layui里的按钮，通过框架中定义好的各种按钮类进行装饰达到自己想要的效果 首先是layui中的按钮颜色，该框架中定义了6种颜色，也就是平时按钮在页面中常见的颜色 下面以图片展示效果 HTML代码 在页面上的效果 接着介绍按钮的尺寸大小，该框架中定义了4种按钮大小 下面以图片展示效果 HTML代码 在页面上的效果 接着介绍圆角按钮，该按钮类只有一个，将四个角变成90度的圆弧 下面以图片展示效果 HTML代码 在页面上的效果 接着介绍按钮图标，按钮..
layui按钮
weixin_46705150的博客
07-03 299
1.导入导入你本地的js 官网的js添加链接描述 在这里修改你的js 这里也要修改成你的js 最终的效果图
layui的基本元素之一-----按钮
热门推荐
water_java的博客
08-28 1万+
layui的基本元素-----按钮按钮主题按钮尺寸图标按钮圆角按钮混搭按钮按钮组按钮容器 导入css样式文件：是使用者本地的路径 <link rel="stylesheet" href="layui/css/layui.css" media="all"> 按钮主题 默认按钮： class=“layui-btn” 原始按钮： class=“layui-btn layui-btn-pri...
layui框架学习（3：按钮）
gc_2299的博客
01-29 4676
学习并记录layui框架中页面元素的按钮相关内容。
layui 按钮知识
黄啊码
06-30 2740
作者:神秘网友发布时间:2021-01-30 20:20:08 layui按钮知识 本课内容: 1.普通按钮类:layui-btn 基础类(别的各种按钮都是在这个类后面添加类) 2.按钮主题:在layui-btn后面加按钮主题的类 名称 组合 原始 class="layui-btn layui-btn-primary" 默认 class="layui-btn" 百搭 class="layui-btn layui-btn-normal" 暖色 clas.
在Layui中实现开关按钮的效果实例
10-16
在Layui框架中，实现开关按钮的效果是一个常见的需求，特别是在构建数据表格或者表单时。Layui的开关按钮（switch）提供了简洁且交互性强的开/关选择功能，通常用于表示“开启”和“关闭”两种状态。本文将详细介绍...
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
10-16
1. **layui button**：在layui中，`layui-btn`类用于定义按钮样式，`layui-btn-primary`为默认的主按钮样式，`layui-btn-radius`则添加圆角效果。例如： ```html ()" class="layui-btn layui-btn-primary layui-...
layui侧边收缩菜单
02-02
这些菜单项可以是链接、按钮或者其他自定义元素，关键在于它们需要绑定对应的layui事件来实现收缩和展开的功能。 例如，我们可以这样设置HTML结构： ```html <div class="layui-side layui-bg-black"> ...
layui 点击重置按钮, select 并没有被重置的解决方法
10-16
今天小编就为大家分享一篇layui 点击重置按钮, select 并没有被重置的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui点击按钮页面会自动刷新的解决方案
10-16
今天小编就为大家分享一篇layui点击按钮页面会自动刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui当点击文本框时弹出选择框,显示选择内容的例子
10-16
今天小编就为大家分享一篇layui当点击文本框时弹出选择框,显示选择内容的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui——按钮
qq_39368007的博客
04-17 4714
必要样式 layui-btn 主题样式 大小样式 图标结合 圆角样式 按钮组 事件监听 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PU...
Layui快速入门之第四节 按钮
qq_61313896的博客
09-13 2828
Layui快速入门之第四节 按钮
后台友好的前端框架LayUI
daimeijin的博客
08-10 1372
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 LayUI入门 LayUI的官网 LayUI是开源模块化前端 UI 框架，由职业前端倾情打造，面向全层次的前后端开发者，易上手开箱即用的 Web UI 组件库。 入门指南 layui（谐音：类
Layui按钮和按钮组
qq_34820433的博客
04-17 567
除了默认的大小，还可以设置其它三种大小方案；按钮容器，合理的间隔，包括垂直和水平；自带的按钮和按钮组功能。本节课我们来开始了解。
Layui按钮点击改变按钮样式
WLS0723的博客
08-05 858
【代码】Layui按钮点击改变按钮样式。
layui按钮用法大全-颜色-尺寸-样式总结
u013931283的博客
12-26 7453
点击此链接,在线预览效果含相关代码
layui的数据表格，自定义添加按钮且可实现动态切换
最新发布
L_Augety的博客
01-25 2090
layui的数据表格，自定义添加按钮且可实现动态切换，实现不同按钮替换操作
layui 按钮居中底部
06-08
要让Layui按钮在容器底部水平居中，可以使用如下的CSS样式： ```css .container { position: relative; height: 200px; /* 容器高度 */ } .layui-btn { position: absolute; bottom: 0; left: 50%; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值