搜索组件模块
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结构code

  1. <blockquote class="layui-elem-quote">引用区域的文字</blockquote>
  2. <blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
字段集区块 - 默认风格
内容区域。

同样内置了两种风格,另一种风格即该文档的标题横线:字段集一行

HTML结构code

  1. <fieldset class="layui-elem-field">
  2. <legend>字段集区块 - 默认风格</legend>
  3. <div class="layui-field-box">
  4. 内容区域
  5. </div>
  6. </fieldset>
  7. <fieldset class="layui-elem-field layui-field-title">
  8. <legend>字段集区块 - 横线风格</legend>
  9. <div class="layui-field-box">
  10. 内容区域
  11. </div>
  12. </fieldset>
  13. 你可以把它看作是一个有标题的横线
默认分割线
赤色分割线
橙色分割线
墨绿分割线
青色分割线
蓝色分割线
黑色分割线

HTML结构code

  1. 默认分割线
  2. <hr>
  3. 赤色分割线
  4. <hr class="layui-border-red">
  5. 橙色分割线
  6. <hr class="layui-border-orange">
  7. 墨绿分割线
  8. <hr class="layui-border-green">
  9. 青色分割线
  10. <hr class="layui-border-cyan">
  11. 蓝色分割线
  12. <hr class="layui-border-blue">
  13. 黑色分割线
  14. <hr class="layui-border-black">

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