标签：disable ima href style height lead opacity tap mil
本课内容:
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"元素中，即可形成按钮组，按钮本身仍然可以随意搭配
尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自撸一个颜色吧！比如：粉红色或者菊花色（一个有味道的颜色）
layui - 用心与你沟通
标签：disable ima href style height lead opacity tap mil
原文地址：https://www.cnblogs.com/nanfengnan/p/14350682.html
