layui按钮的使用

最新推荐文章于 2023-04-08 16:27:56 发布
最新推荐文章于 2023-04-08 16:27:56 发布
阅读量4.2k 收藏 3
点赞数
分类专栏： # LayUI 文章标签： layui layUI layui按钮 layui按钮样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/threelifeadv/article/details/105316051
版权 
<style type="text/css">
.site-demo-button {
	margin-bottom: 30px;
}

.site-demo-button div {
	margin: 20px 30px 10px;
}

.site-demo-button .layui-btn+.layui-btn {
	margin-left: 0;
}

.site-demo-button .layui-btn {
	margin: 0 7px 10px 0;
}
</style>

按钮主题：

<!-- 按钮：layui-btn -->
<fieldset class="layui-elem-field site-demo-button">
    <legend>按钮主题</legend>
	<div>
	<!-- 原始按钮-无色：layui-btn-primary -->
		<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
		<!-- 默认按钮-墨绿：无 -->
		<button type="button" class="layui-btn">默认按钮</button>
		<!-- 百搭按钮-蓝色：layui-btn-normal -->
		<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
		<!-- 暖色按钮-黄色：layui-btn-warm -->
		<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
		<!-- 警告按钮-橙红：layui-btn-danger -->
		<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
		<!-- 禁用按钮-置灰：layui-btn-disabled -->
		<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
	</div>
</fieldset>

总结：

按钮类型使用方式关键class
原始按钮<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>layui-btn-primary
默认按钮<button type="button" class="layui-btn">默认按钮</button> 
百搭按钮<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>layui-btn-normal
暖色按钮<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>layui-btn-warm
警告按钮<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>layui-btn-danger
禁用按钮<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>layui-btn-disabled

按钮尺寸：

<fieldset class="layui-elem-field site-demo-button">
		<legend>按钮尺寸</legend>
		<div>
			<!-- 按钮：layui-btn，默认风格：无class-->
			<!-- 大型：layui-btn-lg -->
			<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
			<!-- 正常 -->
			<button type="button" class="layui-btn">默认按钮</button>
			<!-- 小型：layui-btn-sm -->
			<button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
			<!-- 迷你：layui-btn-xs -->
			<button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>

			<br>
			<!-- 按钮：layui-btn，百搭：layui-btn-normal -->
			<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
			<button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
			<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
			<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>

			<br>
			<!-- 流式按钮：layui-btn-fluid -->
			<div style="width: 300px; margin: 0;">
				<button type="button" class="layui-btn layui-btn-fluid">流体按钮</button>
			</div>
		</div>
	</fieldset>

总结：

按钮类型使用方式关键class
大型按钮<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>layui-btn-lg
默认按钮<button type="button" class="layui-btn">默认按钮</button> 
小型按钮<button type="button" class="layui-btn layui-btn-sm">小型按钮</button>layui-btn-sm
迷你按钮<button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>layui-btn-xs
流体按钮<button type="button" class="layui-btn layui-btn-fluid">流体按钮</button>layui-btn-fluid

图标按钮：

<!-- 图标基础：layui-icon -->
	<!-- 图标两种实现方式：1、文字：<i class="layui-icon">&#xe68d;</i>；2、class：<i class="layui-icon layui-icon-time"></i> -->
	<fieldset class="layui-elem-field site-demo-button">
		<legend>图标按钮</legend>
		<div>
			<button type="button" class="layui-btn">
				<i class="layui-icon">&#xe68d;</i>
			</button>
			<button type="button" class="layui-btn">
				<i class="layui-icon">&#xe624;</i>
			</button>
			<button type="button" class="layui-btn">
				<i class="layui-icon">&#xe67e;</i>
			</button>
			<button type="button" class="layui-btn">
				<i class="layui-icon">&#xe68e;</i>
			</button>
			<button type="button" class="layui-btn">
				<i class="layui-icon">&#xe669;</i>
			</button>
			<button type="button" class="layui-btn">
				<i class="layui-icon">&#xe65c;</i>
			</button>

			<br>

			<button type="button" class="layui-btn layui-btn-danger">
				<i class="layui-icon layui-icon-time"></i>
			</button>
			<button type="button" class="layui-btn layui-btn-danger">
				<i class="layui-icon layui-icon-addition"></i>
			</button>
			<button type="button" class="layui-btn layui-btn-danger">
				<i class="layui-icon layui-icon-subtraction"></i>
			</button>
			<button type="button" class="layui-btn layui-btn-danger">
				<i class="layui-icon layui-icon-home"></i>
			</button>
			<button type="button" class="layui-btn layui-btn-danger">
				<i class="layui-icon layui-icon-refresh"></i>
			</button>
			<button type="button" class="layui-btn layui-btn-danger">
				<i class="layui-icon layui-icon-return"></i>
			</button>

		</div>
	</fieldset>

总结：

按钮类型使用方式关键class
图标按钮<button type="button" class="layui-btn"><i class="layui-icon">&#xe68d;</i> </button>无，将图标文字符直接插入
图标按钮

<button type="button" class="layui-btn layui-btn-danger">
        <i class="layui-icon layui-icon-time"></i>

 </button>

layui-icon-xxx

圆角按钮：

<!-- 圆角按钮：layui-btn-radius -->
	<fieldset class="layui-elem-field site-demo-button">
		<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>

总结：

按钮类型使用方式关键class
圆角按钮<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>layui-btn-radius

按钮组：

<!-- 按钮组：layui-btn-group -->
	<fieldset class="layui-elem-field site-demo-button">
		<legend>按钮组</legend>
		<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"></i>
			</button>
			<button type="button" class="layui-btn layui-btn-sm">
				<i class="layui-icon"></i>
			</button>
			<button type="button" class="layui-btn layui-btn-sm">
				<i class="layui-icon"></i>
			</button>
			<button type="button" class="layui-btn layui-btn-sm">
				<i class="layui-icon"></i>
			</button>
		</div>
		<div class="layui-btn-group">
			<button type="button"
				class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
			<button type="button"
				class="layui-btn layui-btn-primary layui-btn-sm">
				<i class="layui-icon"></i>
			</button>
			<button type="button"
				class="layui-btn layui-btn-primary layui-btn-sm">
				<i class="layui-icon"></i>
			</button>
			<button type="button"
				class="layui-btn layui-btn-primary layui-btn-sm">
				<i class="layui-icon"></i>
			</button>
		</div>
	</fieldset>

按钮容器：

<!-- 按钮容器：layui-btn-container -->
	<fieldset class="layui-elem-field site-demo-button">
		<legend>按钮容器</legend>
		<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>
			<button type="button" class="layui-btn">按钮一</button>
			<button type="button" class="layui-btn">按钮二</button>
			<button type="button" class="layui-btn">按钮三</button>
			<button type="button" class="layui-btn">按钮一</button>
			<button type="button" class="layui-btn">按钮二</button>
			<button type="button" class="layui-btn">按钮三</button>
			 <br>
			 <button type="button" class="layui-btn">按钮一</button>
			<button type="button" class="layui-btn">按钮二</button>
			<button type="button" class="layui-btn">按钮三</button>
			<button type="button" class="layui-btn">按钮一</button>
			<button type="button" class="layui-btn">按钮二</button>
			<button type="button" class="layui-btn">按钮三</button>
			<button type="button" class="layui-btn">按钮一</button>
			<button type="button" class="layui-btn">按钮二</button>
			<button type="button" class="layui-btn">按钮三</button>
		</div>
	</fieldset>

总结：

按钮类型使用方式关键class
按钮组<div class="layui-btn-group"><button></button></div>layui-btn-group
按钮容器<div class="layui-btn-container"><button></button></div>layui-btn-container

 

散落的流沙
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui-操作按钮
麦兜仪的博客
04-20 1086
操作按钮 //放在table标签后面 <script type="text/html" id="barTool"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> //edit理解用来做事件的标记 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
10-16
总结，这个实例展示了如何使用layui创建一个动态的用户交互体验：通过点击按钮触发弹层，弹层内展示表单，用户可以在表单中输入信息并进行交互。这种设计模式常见于需要用户进行选择或者编辑操作的场景，提高了界面...
layui操作列按钮个数和文字颜色的判断实例
10-16
今天小编就为大家分享一篇layui操作列按钮个数和文字颜色的判断实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui按钮
Lovely-Zhang-1026的博客
01-03 803
效果图： 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入layui的css样式表--> <link rel="stylesheet" href="./layui/css/layui.css" media="all" /> </head> <body&..
《layui宇宙版教程》：按钮
来吧，学习！
08-16 615
1.7 按钮 向任意HTML元素设置class="layui-btn"来创建一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成多种按钮风格。 1.7.1 用法 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><...
LayUI部分基础介绍
qq_37708081的博客
01-03 3975
Layui 一、概述 1.下载 https://www.layui.com/ 2.下载文件的说明 Css 样式 Font 字体 Images 图片 Lay |-modules 内置模块 Layui.all.js 包含了所有模块的 js Layui.js 框架 如果要使用必须使用 layui.use([“table”,”laydate”,”layda”]),function() 二、学习内...
layUI基本使用———基本元素
BUG专业户
04-19 1947
layUI基本使用——基本元素(按钮,导航,选项卡,表单,表格)
在Layui中实现开关按钮的效果实例
10-16
首先，为了使用Layui的开关按钮，我们需要引入Layui的JS和CSS文件。在HTML页面中，添加以下代码以引入Layui库： ```html <script src="/common/plugins/layui-v2.2.5/layui.js" charset="utf-8"> ...
layui一个页面使用多个文件upload上传按钮
09-02
本篇文章将详细讲解如何在layui中实现一个页面上使用多个独立的文件上传按钮，以及相关的配置和注意事项。 首先，layui的upload组件是基于HTML5的File API构建的，支持多文件选择、预览、上传进度显示等功能。在...
代码_layui的使用_
10-02
layui提供了多种页面元素和组件，如表格、表单、按钮、图标、弹窗等，这些都可以方便地通过简单的API调用来实现。在实际项目中，layui能够快速构建出美观且响应式的界面，提高开发效率。 要开始使用layui，你需要在...
layui点击按钮页面会自动刷新的解决方案
10-16
今天小编就为大家分享一篇layui点击按钮页面会自动刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui之按钮的学习
zhouzhou_98的博客
10-01 1536
学习网址：https://www.bilibili.com/video/av59813890?p=3 相关样式 1，必要样式 layui-btn 2，主题样式 |-- layui-btn-primary 原始按钮 |-- layui-btn-normal 百搭按钮 ...
layui的使用
IT二叔的博客
04-08 2229
layui 一、概述 1.下载 https://www.layui.com/ 2.下载文件说明 css 样式 font:字体 image:图片 lay: |–models |– layui.all.js 包含了所有模块的js layui.js 框架 如果要使用必须使用layui.use([“table”,“layer”,“laydate”,“form”],function(){}) 二、学习的内容 1.图标 2.按钮 3.导航菜单 4.选项卡 5.进度条 6.面板+布局 7.徽章 8.时间线 9.
layui学习笔记（五）关于layui按钮下拉菜单dropdown使用。研究dropdown数据提取、显示过长、样式显示问题。
xych_ccui的博客
04-08 3974
方法有很多，比如：选择多条文章-按钮弹窗-下拉菜单select-选择分类-提交。也可以选择多条文章-直接下拉菜单select-选择分类直接执行提交。/ccadmins/article/moveClass 接口控制器。我用的是按钮，不能直接select下来菜单，也不想弹窗。今天做后台文章列表的时候，添加了一个功能：给文章。最终效果：一个是没加样式的，一个是加了样式的。有想继续研究的可以把分类的树形结构整合在里面。，即用了按钮也用了下拉菜单。下面是我一些做法，仅供学习参考。layui的js部分。
Layui 弹出层选择数据实现
bdwl_cn的博客
02-09 2089
实际Web项目中，下拉框仅能实现数据量少的场景，当我们添加一个商品时，我们总希望在添加选择前能看到产品的规格、图片、参数信息，那么用下拉框就显得力不从心了。
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的基本元素之一-----按钮
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按钮总结
热门推荐
shaonian1996
12-06 2万+
                                          layui按钮总结 按钮类设置：class="layui-btn" ；不设置其它任何二级类名就是普通按钮 1   主题类 ：layui-btn-primary 原始主题。 原始 class="layui-btn layui-btn-primary" 默认 class="layui-btn" ...
layUI基本使用——基本元素
BUG专业户
04-19 1305
layui基本使用----- 基本元素 (按钮,导航,选项卡,表格,表单)
layui 按钮居中底部
最新发布
06-08
要让Layui按钮在容器底部水平居中，可以使用如下的CSS样式： ```css .container { position: relative; height: 200px; /* 容器高度 */ } .layui-btn { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } ``` 其中，`.container` 是按钮所在的容器，`height` 属性可以根据实际情况设置。`.layui-btn` 是Layui按钮的类名，`position: absolute;` 将其定位在父元素的底部，`bottom: 0;` 表示距离底部的距离为0，`left: 50%;` 将其水平居中，`transform: translateX(-50%);` 实现水平居中。 示例代码如下： ```html <div class="container"> <button class="layui-btn">按钮</button> </div> ``` 希望这个方法能够帮助到你。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值