一套开源的 Web UI 组件库。采用自身极简的模块化规范，并遵循原生 HTML/CSS/JS 的开发模式，极易上手，开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
公共类
公共类是 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 |
设置元素为圆形。需确保 width 和 height 相同 |
显示隐藏
| 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 |
设置向左三角 |
示例
向上三角：
<i class="layui-edge layui-edge-top"></i>
<i class="layui-edge layui-edge-top" style="border-bottom-color: black;"></i>
<hr>
向右三角：
<i class="layui-edge layui-edge-right"></i>
<i class="layui-edge layui-edge-right" style="border-left-color: black;"></i>
<hr>
向下三角：
<i class="layui-edge layui-edge-bottom"></i>
<i class="layui-edge layui-edge-bottom" style="border-top-color: black;"></i>
<hr>
向左三角：
<i class="layui-edge layui-edge-left"></i>
<i class="layui-edge layui-edge-left" style="border-right-color: black;"></i>
内外边距
| 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" 定义一段包含标题、段落、列表、链接等组合的文档区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本区域演示 - Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{= d.layui[2].cdn.css }}" rel="stylesheet">
</head>
<body>
<div class="layui-text" style="padding: 16px;">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<hr>
<ul>
<li>列表1</li>
<li>
列表2
<ul>
<li>列表2-1</li>
<li>列表2-2</li>
<li>列表2-3</li>
</ul>
</li>
<li>列表3</li>
</ul>
<hr>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<hr>
<h2>标题2</h2>
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1</p>
<p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
<blockquote>引用</blockquote>
<p>这是一个包含<a href="javascript:;">超文本</a>和<strong>加粗文本</strong>的段落</p>
</div>
</body>
</html>
