docs/class/index.md
<h2 id="base" lay-toc="{}" style="margin-bottom: 0;">普通类</h2>公共类是
layui.css中并不以组件形式存在的公共class选择器，而又能用于任何地方。
| className | 描述 |
|---|---|
| layui-main | 设置一个固定宽度为 1160px 的水平居中块 |
| layui-border-box | 设置元素及其所有子元素均为 box-sizing: border-box 模型的容器 |
| layui-clear | 清除前面的同级元素产生的浮动 |
| layui-clear-space <sup>2.8+</sup> | 清除容器内的空白符 |
| layui-inline | 设置元素为内联块状结构 |
| layui-ellip | 设置单行文本溢出并显示省略号 |
| 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 | 设置向左三角 |
示例
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}"> <textarea> 向上三角： <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> </textarea> </pre> <h2 id="edge-distance" lay-toc="{}">内外边距</h2>| 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 | 红 | <div class="layui-bg-red"> </div> |
| layui-bg-orange | 橙 | <div class="layui-bg-orange"> </div> |
| layui-bg-green | 绿 | <div class="layui-bg-green"> </div> |
| layui-bg-blue | 蓝 | <div class="layui-bg-blue"> </div> |
| layui-bg-purple <sup>2.8+</sup> | 紫 | <div class="layui-bg-purple"> </div> |
| layui-bg-black | 深 | <div class="layui-bg-black"> </div> |
| layui-bg-gray | 浅 | <div class="layui-bg-gray"> </div> |
| className | 文字大小和预览 |
|---|---|
| layui-font-12 | <span class="layui-font-12">12px</span> |
| layui-font-13 <sup>2.8+</sup> | <span class="layui-font-13">13px</span> |
| layui-font-14 | <span class="layui-font-14">14px</span> |
| layui-font-16 | <span class="layui-font-16">16px</span> |
| layui-font-18 | <span class="layui-font-18">18px</span> |
| layui-font-20 | <span class="layui-font-20">20px</span> |
| layui-font-22 <sup>2.8+</sup> | <span class="layui-font-22">22px</span> |
| layui-font-24 <sup>2.8+</sup> | <span class="layui-font-24">24px</span> |
| layui-font-26 <sup>2.8+</sup> | <span class="layui-font-26">26px</span> |
| layui-font-28 <sup>2.8+</sup> | <span class="layui-font-28">28px</span> |
| layui-font-30 <sup>2.8+</sup> | <span class="layui-font-30">30px</span> |
| layui-font-32 <sup>2.8+</sup> | <span class="layui-font-32">32px</span> |
| className | 文字颜色和预览 |
|---|---|
| layui-font-red | <span class="layui-font-red">红</span> |
| layui-font-orange | <span class="layui-font-orange">橙</span> |
| layui-font-green | <span class="layui-font-green">绿</span> |
| layui-font-blue | <span class="layui-font-blue">蓝</span> |
| layui-font-purple <sup>2.8+</sup> | <span class="layui-font-purple">紫</span> |
| layui-font-black | <span class="layui-font-black">深</span> |
| layui-font-gray | <span class="layui-font-gray">浅</span> |
通过设置 class="layui-text" 定义一段包含标题、段落、列表等组合的文本区域，通常用于 Markdown 文档。