314 次浏览【转载需注明来源】
博客作者:【qiang】
表单里面还有一个提交按钮,和重置按钮,这些按钮都用了layui内置的按钮样式。
按钮在网页里面非常的常见,并且很多的事件都是通过点击按钮实现的,layui里面的按钮预设的类名很多,实现起来也非常的方便,
在任意一个元素类名里面添加 lay-按钮 就可以实现一个普通的按钮了,
除此之外还可以追加不同的按钮样式类名,组合成各式各样的按钮。
下面是普通按钮的代码示例:
<按钮 按钮类型="普通按钮" 类名="lay-按钮">标准按钮</按钮> <区块 类名="lay-按钮">区块按钮</区块> <超链接 链接地址="http://www.baidu.com" 类名="lay-按钮">可跳转的按钮</超链接>
代码效果展示:
给按钮添加主题,代码示例:
<按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-原始">原始按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮">普通按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-百搭">百搭按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-暖色">暖色按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-警告">警告按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-禁用">禁用按钮</按钮>
给按钮设置边框主题,代码示例:
<按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-原始 lay-边框-绿色">主色按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-原始 lay-边框-蓝色">蓝色按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-原始 lay-边框-橘色">橘色按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-原始 lay-边框-红色">红色按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-原始 lay-边框-黑色">黑色按钮</按钮>
流体按钮和按钮大小代码示例:
<按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-流体按钮">流体按钮</按钮> <分割线 /> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-大型">大型按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮">普通按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-小型">小型按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-迷你">迷你按钮</按钮>
圆角按钮代码示例:
<按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-百搭 lay-按钮-圆角">百搭按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-暖色 lay-按钮-圆角">暖色按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-警告 lay-按钮-圆角">警告按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-禁用 lay-按钮-圆角">禁用按钮</按钮>
图标按钮代码示例:
<按钮 按钮类型="普通按钮" 类名="lay-按钮"><斜体文本 类名="lay-图标 lay-图标下箭头 lay-字体12"></斜体文本> 按钮</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-按钮-小型 lay-按钮-原始"> <斜体文本 类名="lay-图标 lay-图标左箭头"></斜体文本> </按钮>
按钮分组,按钮与按钮之间只有一条边框线,代码示例:
<区块 类名="lay-按钮-分组"> <按钮 按钮类型="普通按钮" 类名="lay-按钮">增加</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮">编辑</按钮> <按钮 按钮类型="普通按钮" 类名="lay-按钮">删除</按钮> </区块>
点击此处跳转案例下载:点击下载lay-按钮实例
不能恶意举报,否则进行封号处理!
测试账号