作者:神秘网友 发布时间:2021-01-30 20:20:08
本课内容:
1.普通按钮类:layui-btn 基础类(别的各种按钮都是在这个类后面添加类)
2.按钮主题:在layui-btn后面加按钮主题的类
名称 | 组合 |
---|---|
原始 | 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" |
3.按钮尺寸:在layui-btn后面添加按钮尺寸的类
尺寸 | 组合 |
---|---|
大型 | 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-lg layui-btn-normal" |
正常暖色 | class="layui-btn layui-btn-warm" |
小型警告 | class="layui-btn layui-btn-sm layui-btn-danger" |
迷你禁用 | class="layui-btn layui-btn-xs layui-btn-disabled" |
4.圆角按钮类:layui-btn layui-radius
5.带图标的按钮:原理在按钮里面加一个i标签
6.按钮组:layui-btn-group将按钮放入一个class="layui-btn-group"元素中,即可形成按钮组,按钮本身仍然可以随意搭配
7.按钮容器:layui-btn-container 作用(也是和按钮组之间的区别):放在按钮容器中的按钮之间有空格
1.普通按钮类使用例子 type有三种选择:button reset submit
button type="button" class="layui-btn"普通按钮/button
2.圆角按钮类的例子 圆角按钮和普通按钮的属性通用
button type="button" class="layui-btn layui-btn圆角按钮/button
3.带图标的按钮例子
button type="button" class="layui-btn"
i class="layui-icon layui-icon-face-smile"/i
/button
4.可跳转的按钮
a class="layui-btn"可跳转的按钮/a
5.按钮组
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
6.按钮容器例子
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
名称 | 组合 |
---|---|
原始 | 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" |
尺寸
大型按钮默认按钮小型按钮迷你按钮
尺寸 | 组合 |
---|---|
大型 | 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-lg layui-btn-normal" |
正常暖色 | class="layui-btn layui-btn-warm" |
小型警告 | class="layui-btn layui-btn-sm layui-btn-danger" |
迷你禁用 | class="layui-btn layui-btn-xs layui-btn-disabled" |
流体按钮(最大化适应) 流体按钮(最大化适应)
圆角
原始按钮默认按钮百搭按钮暖色按钮警告按钮禁用按钮
主题 | 组合 |
---|---|
原始 | class="layui-btn layui-btn-radius layui-btn-primary" |
默认 | class="layui-btn layui-btn-radius" |
百搭 | class="layui-btn layui-btn-radius layui-btn-normal" |
暖色 | class="layui-btn layui-btn-radius layui-btn-warm" |
警告 | class="layui-btn layui-btn-radius layui-btn-danger" |
禁用 | class="layui-btn layui-btn-radius layui-btn-disabled" |
大型百搭小型警告迷你禁用
尺寸 | 组合 |
---|---|
大型百搭 | class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" |
小型警告 | class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" |
迷你禁用 | class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled" |
哈哈哈哈哈,这组合名长得简直没朋友~
图标
添加?
??
温馨提示:各种图标字体请移步文档左侧【页面元素 - 图标】阅览
按钮组
增加编辑删除
将按钮放入一个class="layui-btn-group"元素中,即可形成按钮组,按钮本身仍然可以随意搭配
按钮容器
尽管按钮在同节点并排时会自动拉开间距,但在按钮太多的情况,效果并不是很美好。因为你需要用到按钮容器
按钮一按钮二按钮三按钮四按钮五按钮六按钮一按钮二按钮三按钮四按钮五按钮六按钮一按钮二按钮三按钮四按钮五按钮六按钮一按钮二
结语