作者：莫嬷嬷 | 来源：互联网 | 2023-09-24 21:24
1.向任意HTML元素设定classlayui-btn,建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以
1. 向任意HTML元素设定class&＃61;"layui-btn", 建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合, 从而形成更多种按钮风格。
2. 用法
一个可跳转的按钮
3. 主题
| 主题 | 组合 |
| 原始 | class&＃61;"layui-btn layui-btn-primary" |
| 默认 | class&＃61;"layui-btn" |
| 百搭 | class&＃61;"layui-btn layui-btn-normal" |
| 暖色 | class&＃61;"layui-btn layui-btn-warm" |
| 警告 | class&＃61;"layui-btn layui-btn-danger" |
| 禁用 | class&＃61;"layui-btn layui-btn-disabled" |
4. 尺寸
| 尺寸 | 组合 |
| 大型 | class&＃61;"layui-btn layui-btn-lg" |
| 默认 | class&＃61;"layui-btn" |
| 小型 | class&＃61;"layui-btn layui-btn-sm" |
| 迷你 | class&＃61;"layui-btn layui-btn-xs" |
| 流体按钮 | class&＃61;"layui-btn layui-btn-fluid" |
5. 圆角按钮
| 名称 | 组合 |
| 默认 | class&＃61;"layui-btn layui-btn-radius" |
6. 图标按钮
6.1. 实例
&＃xe640;
7. 按钮组
7.1. 将按钮放入一个class&＃61;"layui-btn-group"元素中, 即可形成按钮组:
8. 按钮容器
8.2. 尽管按钮在同节点并排时会自动拉开间距, 但在按钮太多的情况, 效果并不是很美好。因为你需要用到按钮容器:
9. 例子
9.1. 代码
按钮主题:
警告按钮禁用按钮
按钮尺寸:
按钮圆角:
按钮图标&＃xff1a;
&＃xe640;&＃xe641;
按钮图文:
&＃xe640;删除&＃xe641;分享
按钮组:
按钮容器:
9.2. 效果图
京公网安备 11010802041100号