03 layui--页面元素

搬砖老金牛

已于 2023-03-17 19:02:17 修改

阅读量304

点赞数

分类专栏： layui 文章标签： layui 前端 javascript

于 2023-03-17 15:09:35 首次发布

本文链接：https://blog.csdn.net/qq_48968230/article/details/129482112

版权

layui 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

引言：本文主要是针对Layui官网文档中的l页面元素进行学习，然后归纳笔记，进行简化记忆，方便后期复盘巩固，如需深入学习，详见：Layui 页面元素规范与说明 (layuion.com).

一、CSS内置公共基础类

布局/容器

1. layui-main //设置一个宽度为1140px的水平居中块（无响应式）

2. layui-inline //用于将标签设为内联块状元素

3. layui-clear //消除浮动

4. layui-btn-container //定义按钮的父容器 v2.2.5新增

5. layui-btn-fluid //定义流体按钮（宽度最大适应化） v2.2.5新增

辅助

1. layui-icon //图标

2. layui-elip //单行文本溢出并显示省略号

3. layui-unselect //屏蔽选中

4. layui-disabled //设置元素不可点击

5. layui-circle //设置元素为圆形

6. layui-show //显示块状元素

7. layui-hide //隐藏元素

文本

1. layui-text //定义一段文本区域，该区域内的特殊标签（如a、li、em等）将会进行CSS渲染

2. layui-word-aux //浅色为文字，左右会有间隔

背景颜色

1. layui-bg-red //红

2. layui-bg-orange //橙

3. layui-bg-green //绿（主色调）

4. layui-bg-cyan //藏青

5. layui-bg-blue //蓝

6. layui-bg-black //深

7. layui-bg-gray //浅

字体大小及颜色

1. layui-font-12

2. layui-font-14

3. layui-font-16

4. layui-font-18

5. layui-font-20

--------------------

1. layui-font-red

2. layui-font-orange

3. layui-font-green

4. layui-font-cyan 青

5. layui-font-blue

6. layui-font-black

7. layui-font-gray 灰

二、CSS命名规范

命名格式一般为两种：

1. layui-模块名-状态或类型如, 定义按钮的原始风格：class = "layui-btn layui-btn-primary"

2. layui-状态或类型 (某些类并非是某个模块所特有的，通常会是一些公共类）

如，定义内联块状元素：class = "layui-inline"

三、HTML规范：结构

Layui在解析HTML元素时，必须充分确保其结构能够被支持。如：改变了Tab选项卡的结构，则很可能导致Tab功能失效，切换选项卡会内容不对应等。在嵌套HTML时，要细读各个元素模块的相关文档。

<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">标题一</li>
        <li>标题二</li>
        <li>标题三</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item>内容2</div>
        <div class="layui-tab-item>内容3</div>
    </div>
</div>