页面元素之按钮
2020-04-01 本文已影响0人
小疏林er
1、用法
向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。不一定非要向button、<input text="button">等添加才能实现按钮，也可以向超链接添加class="layui-btn"类，来实现跳转功能。
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="layui/layui.js" ></script> <link rel="stylesheet" href="layui/css/layui.css" /> </head> <body> <button class="layui-btn">button标签,默认按钮</button> <a href="test_动画.html" class="layui-btn layui-bg-blue">超链接,添加蓝色背景颜色</a> <input type="button" class="layui-btn layui-btn " value='input type="button"标签",默认按钮'/> <button class="layui-btn layui-btn-lg">button标签,超大按钮</button> <button class="layui-btn layui-btn-disabled">button标签,禁用按钮</button> <button class="layui-btn layui-btn-radius ">button标签,圆角按钮</button> <button class="layui-btn layui-btn-warm">button标签,暖色按钮</button> <button class="layui-btn layui-btn-fluid">button标签,流体按钮</button> </body> </html>测试效果：
测试效果.png
2、风格
主题
主题样图.png
尺寸
尺寸样图.png
圆角
圆角样图.png
3、添加图标
只需要将字体图标（
<i class="layui-icon"></i>）添加在标签中即可，但是<input type="button"/>是单标签，不能写在标签中间，需要追加layui-icon类才能实现效果。详细可参考之前写的 页面元素之图标。示例代码：
<button class="layui-btn "> <i class="layui-icon">发布</i> </button> <a href="test_动画.html" class="layui-btn layui-bg-blue"> <i class="layui-icon"></i> </a> <input type="button" class="layui-btn layui-icon" value=' 查询'/>测试效果:
测试效果.png
注：<button></button>和<input type="button"/>有很大区别，详细可参考
- button和input type="button"区别及注意事项 http://www.divcss5.com/html/h50380.shtml
4、按钮组
将按钮放入一个class="layui-btn-group" 的div元素中，即可形成按钮组，按钮本身仍然可以随意搭配。
示例代码：
<div class="layui-btn-group"> <button class="layui-btn "> <i class="layui-icon">发布</i> </button> <a href="test_动画.html" class="layui-btn layui-bg-blue"> <i class="layui-icon"></i> </a> <input type="button" class="layui-btn layui-icon" value=' 查询'/> </div>测试效果:
测试效果.png
注:可以康康和上一步的区别,为了方便观察,我只是添加了一个class="layui-btn-group" 的div,按钮代码并没有改变。
5、按钮容器
尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器，使用方法和按钮组相同，将按钮放入一个class="layui-btn-container" 的div元素中，即可实现。(单行按钮时,基本没什么影响,一旦换行后,间距就出现了问题,另外添加按钮容器也方便管理)
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<h1>添加按钮容器效果</h1>
<div class="layui-btn-container">
<button class="layui-btn " style="width: 200px;">
<i class="layui-icon">发布</i>
</button>
<a href="test_动画.html" class="layui-btn layui-bg-blue"style="width: 200px;">
<i class="layui-icon"></i>
</a>
<input type="button" class="layui-btn layui-icon" value=' 查询'style="width: 200px;"/>
<button class="layui-btn " style="width: 200px;">
<i class="layui-icon">发布</i>
</button>
<a href="test_动画.html" class="layui-btn layui-bg-blue"style="width: 200px;">
<i class="layui-icon"></i>
</a>
<input type="button" class="layui-btn layui-icon" value=' 查询'style="width: 200px;"/>
<button class="layui-btn " style="width: 200px;">
<i class="layui-icon">发布</i>
</button>
<a href="test_动画.html" class="layui-btn layui-bg-blue"style="width: 200px;">
<i class="layui-icon"></i>
</a>
<input type="button" class="layui-btn layui-icon" value=' 查询'style="width: 200px;"/>
</div>
<h1>未添加按钮容器效果</h1>
<button class="layui-btn " style="width: 200px;">
<i class="layui-icon">发布</i>
</button>
<a href="test_动画.html" class="layui-btn layui-bg-blue"style="width: 200px;">
<i class="layui-icon"></i>
</a>
<input type="button" class="layui-btn layui-icon" value=' 查询'style="width: 200px;"/>
<button class="layui-btn " style="width: 200px;">
<i class="layui-icon">发布</i>
</button>
<a href="test_动画.html" class="layui-btn layui-bg-blue"style="width: 200px;">
<i class="layui-icon"></i>
</a>
<input type="button" class="layui-btn layui-icon" value=' 查询'style="width: 200px;"/>
<button class="layui-btn " style="width: 200px;">
<i class="layui-icon">发布</i>
</button>
<a href="test_动画.html" class="layui-btn layui-bg-blue"style="width: 200px;">
<i class="layui-icon"></i>
</a>
<input type="button" class="layui-btn layui-icon" value=' 查询'style="width: 200px;"/>
</body>
</html>
测试效果:
测试效果.png
注:
为了观察到区别,我将按钮进行了多次复制,上面的一组添加了按钮容器(class="layui-btn-container" 的div元素),第二组与第一组相同,但是没有添加按钮容器,可以看到按钮之间的间隔出现了问题,所以当页面按钮很多时建议统一添加到按钮容器中,但是一般页面的按钮不会太多,所以用的时候不会太多。
