搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

按钮 - 页面元素

向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。

</>code

  1. <button type="button" class="layui-btn">一个标准的按钮</button>
  2. <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

名称 组合
原始 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-primary layui-border-green"
百搭 class="layui-btn layui-btn-primary layui-border-blue"
暖色 class="layui-btn layui-btn-primary layui-border-orange"
警告 class="layui-btn layui-btn-primary layui-border-red"
深色 class="layui-btn layui-btn-primary layui-border-black"
尺寸 组合
大型 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"

</>code

  1. <button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>
主题 组合
原始 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"

哈哈哈哈哈,这组合名长得简直没朋友~

结构code

  1. <button type="button" class="layui-btn">
  2. <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
  3. </button>
  4. <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  5. <i class="layui-icon layui-icon-left"></i>
  6. </button>

温馨提示:各种图标字体请移步文档左侧【页面元素 - 图标】阅览

将按钮放入一个class="layui-btn-group"元素中,即可形成按钮组,按钮本身仍然可以随意搭配

结构code

  1. <div class="layui-btn-group">
  2. <button type="button" class="layui-btn">增加</button>
  3. <button type="button" class="layui-btn">编辑</button>
  4. <button type="button" class="layui-btn">删除</button>
  5. </div>
  6. <div class="layui-btn-group">
  7. <button type="button" class="layui-btn layui-btn-sm">
  8. <i class="layui-icon">&#xe654;</i>
  9. </button>
  10. <button type="button" class="layui-btn layui-btn-sm">
  11. <i class="layui-icon">&#xe642;</i>
  12. </button>
  13. <button type="button" class="layui-btn layui-btn-sm">
  14. <i class="layui-icon">&#xe640;</i>
  15. </button>
  16. <button type="button" class="layui-btn layui-btn-sm">
  17. <i class="layui-icon">&#xe602;</i>
  18. </button>
  19. </div>
  20. <div class="layui-btn-group">
  21. <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  22. <i class="layui-icon">&#xe654;</i>
  23. </button>
  24. <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  25. <i class="layui-icon">&#xe642;</i>
  26. </button>
  27. <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  28. <i class="layui-icon">&#xe640;</i>
  29. </button>
  30. </div>
按钮容器

尽管按钮在同节点并排时会自动拉开间距,但在按钮太多的情况,效果并不是很美好。因为你需要用到按钮容器

</>code

  1. <div class="layui-btn-container">
  2. <button type="button" class="layui-btn">按钮一</button>
  3. <button type="button" class="layui-btn">按钮二</button>
  4. <button type="button" class="layui-btn">按钮三</button>
  5. </div>

你是否发现,主题、尺寸、图标、圆角的交叉组合,可以形成难以计算的按钮种类。另外,你可能最关注的是配色,Layui内置的六种主题的按钮颜色都是业界常用的标准配色,如果他们仍然无法与你的网站契合,那么请先允许我“噗”一声。。。然后你就大胆地自加一个颜色吧!比如:粉红色或者菊花色(一个有味道的颜色)

layui - 在每一个细节中,用心与你沟通