005-按钮

最新推荐文章于 2022-07-23 16:29:52 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-07-23 16:29:52 发布

阅读量443

点赞数

分类专栏： layui学习

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/113029188

版权

layui学习专栏收录该内容

32 篇文章

订阅专栏

1. 向任意HTML元素设定class="layui-btn", 建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合, 从而形成更多种按钮风格。

2. 用法

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="#" class="layui-btn">一个可跳转的按钮</a>

3. 主题

主题	组合
原始	class="layui-btn layui-btn-primary"
默认	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

4. 尺寸

尺寸	组合
大型	class="layui-btn layui-btn-lg"
默认	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"
流体按钮	class="layui-btn layui-btn-fluid"

5. 圆角按钮

名称	组合
默认	class="layui-btn layui-btn-radius"

6. 图标按钮

6.1. 实例

<button class="layui-btn"><i class="layui-icon">&#xe61f;</i></button>
<a href="#" class="layui-btn"><i class="layui-icon">&#xe640;</i></a>

7. 按钮组

7.1. 将按钮放入一个class="layui-btn-group"元素中, 即可形成按钮组:

<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>

8. 按钮容器

8.2. 尽管按钮在同节点并排时会自动拉开间距, 但在按钮太多的情况, 效果并不是很美好。因为你需要用到按钮容器:

<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>

9. 例子

9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>按钮 - layui</title>
		
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>

		<style>
			body { padding: 10px 50px; }
		</style>
	</head>
	<body>
		<h2>按钮主题:</h2>
		<button class="layui-btn layui-btn-primary">原始按钮</button>
		<button class="layui-btn">默认按钮</button>
		<button class="layui-btn layui-btn-normal">百搭按钮</button>
		<button class="layui-btn layui-btn-warm">暖色按钮</button>
		<a href="#" class="layui-btn layui-btn-danger">警告按钮</a>
		<a href="#" class="layui-btn layui-btn-disabled">禁用按钮</a>
		<br /><br />


		<h2>按钮尺寸:</h2>
		<button class="layui-btn layui-btn-lg">大型按钮</button>
		<button class="layui-btn">默认按钮</button>
		<button class="layui-btn layui-btn-sm">小型按钮</button>
		<button class="layui-btn layui-btn-xs">迷你按钮</button><br /><br />

		<button class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button><br /><br />
		<button class="layui-btn layui-btn-primary layui-btn-fluid">流体按钮(最大化适应)</button>
		<br /><br />


		<h2>按钮圆角:</h2>
		<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
		<button class="layui-btn layui-btn-radius">默认按钮</button>
		<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
		<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
		<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
		<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
		<br /><br />


		<h2>按钮图标：</h2>
		<button class="layui-btn"><i class="layui-icon">&#xe61f;</i></button>
		<button class="layui-btn"><i class="layui-icon">&#xe603;</i></button>
		<button class="layui-btn"><i class="layui-icon">&#xe602;</i></button>
		<button class="layui-btn"><i class="layui-icon">&#xe654;</i></button>
		<button class="layui-btn"><i class="layui-icon">&#xe642;</i></button>
		<a href="#" class="layui-btn"><i class="layui-icon">&#xe640;</i></a>
		<a href="#" class="layui-btn"><i class="layui-icon">&#xe641;</i></a>
		<br /><br />
		

		<h2>按钮图文:</h2>
		<button class="layui-btn"><i class="layui-icon">&#xe61f;</i>添加</button>
		<button class="layui-btn"><i class="layui-icon">&#xe603;</i>向左</button>
		<button class="layui-btn"><i class="layui-icon">&#xe602;</i>向右</button>
		<button class="layui-btn"><i class="layui-icon">&#xe654;</i>添加</button>
		<button class="layui-btn"><i class="layui-icon">&#xe642;</i>编辑</button>
		<a href="#" class="layui-btn"><i class="layui-icon">&#xe640;</i>删除</a>
		<a href="#" class="layui-btn"><i class="layui-icon">&#xe641;</i>分享</a>
		<br /><br />


		<h2>按钮组:</h2>
		<div class="layui-btn-group">
	    	<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe61f;</i>添加</button>
	  		<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe642;</i>编辑</button>
	  		<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe640;</i>删除</button>
	  		<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe641;</i>分享</button>
		</div>
		<br /><br />


		<h2>按钮容器:</h2>
		<div class="layui-btn-container">
	    	<button class="layui-btn">按钮一</button> 
	  		<button class="layui-btn">按钮二</button> 
	  		<button class="layui-btn">按钮三</button> 
	  		<button class="layui-btn">按钮四</button> 
	  		<button class="layui-btn">按钮五</button> 
	  		<button class="layui-btn">按钮六</button> 
	  		<button class="layui-btn">按钮七</button> 
	  		<button class="layui-btn">按钮八</button> 
	  		<button class="layui-btn">按钮九</button> 
	  		<button class="layui-btn">按钮十</button> 
	  		<button class="layui-btn">按钮十一</button> 
	  		<button class="layui-btn">按钮十二</button> 
	  		<button class="layui-btn">按钮十三</button> 
	  		<button class="layui-btn">按钮十四</button> 
	  		<button class="layui-btn">按钮十五</button> 
	  		<button class="layui-btn">按钮十六</button> 
	  		<button class="layui-btn">按钮十七</button> 
	  		<button class="layui-btn">按钮十八</button> 
	  		<button class="layui-btn">按钮十九</button> 
	  		<button class="layui-btn">按钮二十</button> 
	  		<button class="layui-btn">按钮二十一</button> 
	  		<button class="layui-btn">按钮二十二</button> 
	  		<button class="layui-btn">按钮二十三</button> 
	  		<button class="layui-btn">按钮二十四</button> 
	  		<button class="layui-btn">按钮二十五</button> 
	  		<button class="layui-btn">按钮二十六</button> 
	  		<button class="layui-btn">按钮二十七</button> 
	  		<button class="layui-btn">按钮二十八</button> 
	  		<button class="layui-btn">按钮二十九</button>
	  		<button class="layui-btn">按钮三十</button> 
	  		<button class="layui-btn">按钮三十一</button> 
	  		<button class="layui-btn">按钮三十二</button> 
	  		<button class="layui-btn">按钮三十三</button> 
	  		<button class="layui-btn">按钮三十四</button> 
	  		<button class="layui-btn">按钮三十五</button> 
	  		<button class="layui-btn">按钮三十六</button> 
	  		<button class="layui-btn">按钮三十七</button> 
	  		<button class="layui-btn">按钮三十八</button> 
	  		<button class="layui-btn">按钮三十九</button> 
		</div>	
	</body>
</html>

9.2. 效果图