公共类

公共类是 layui.css 中并不以组件形式存在的公共 class 选择器,而又能用于任何地方。

普通类

className 描述
layui-main 设置一个固定宽度为 1160px 的水平居中块
layui-border-box 设置元素及其所有子元素均为 box-sizing: content-box 模型的容器
layui-clear 清除前面的同级元素产生的浮动
layui-clear-space 2.8+ 清除容器内的空白符
layui-inline 设置元素为内联块状结构
layui-elip 设置单行文本溢出并显示省略号
layui-unselect 屏蔽选中
layui-disabled 设置元素为不可点击状态
layui-circle 设置元素为圆形。需确保 widthheight 相同

显示隐藏

className 描述
layui-show 设置元素为 display: block 可见状态
layui-hide 设置元素为 display: none 隐藏状态,且不占用空间
layui-show-v 设置元素为 visibility: visible 可见状态
layui-hide-v 设置元素为 visibility: hidden 不可见状态,且依旧占用空间

三角实体

className 描述
layui-edge 定义一个三角形基础类
layui-edge-top 设置向上三角
layui-edge-right 设置向右三角
layui-edge-bottom 设置向下三角
layui-edge-left 设置向左三角

示例

  

内外边距

className 描述
layui-padding-1 4px 内边距
layui-padding-2 8px 内边距
layui-padding-3 16px 内边距
layui-padding-4 32px 内边距
layui-padding-5 48px 内边距
layui-margin-1 4px 外边距
layui-margin-2 8px 外边距
layui-margin-3 16px 外边距
layui-margin-4 32px 外边距
layui-margin-5 48px 外边距

背景颜色

className 背景色 预览
layui-bg-red
 
layui-bg-orange
 
layui-bg-green 绿
 
layui-bg-blue
 
layui-bg-purple 2.8+
 
layui-bg-black
 
layui-bg-gray
 

文字大小

className 文字大小和预览
layui-font-12 12px
layui-font-13 2.8+ 13px
layui-font-14 14px
layui-font-16 16px
layui-font-18 18px
layui-font-20 20px
layui-font-22 2.8+ 22px
layui-font-24 2.8+ 24px
layui-font-26 2.8+ 26px
layui-font-28 2.8+ 28px
layui-font-30 2.8+ 30px
layui-font-32 2.8+ 32px

文字颜色

className 文字颜色和预览
layui-font-red
layui-font-orange
layui-font-green 绿
layui-font-blue
layui-font-purple 2.8+
layui-font-black
layui-font-gray

文档容器

通过设置 class="layui-text" 定义一段包含标题、段落、列表、链接等组合的文档区域。