🔥前端框架LayUI详解 地址 🔥前端LayUI框架快速上手详解(一) https://blog.csdn.net/Augenstern_QXL/article/details/ 🔥前端LayUI框架快速上手详解(二) https://blog.csdn.net/Augenstern_QXL/article/details/
- 最新版本v2.6.8
- 官方文档讲解较细致，但同时也较繁琐，本篇旨在记录常用样式的用法与注意点.
- 配套视频讲解地址:B站直达
和 Bootstrap 有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
- 官网：https://www.layui.com/
- 点击立即下载即可
- 下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。
- 使用时我们只需引入下述两个文件即可使用
- 这是一个基本的入门页面
2.1.1、固定宽度
- 将栅格放入一个带有 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
- 固定宽度的两侧有留白效果
2.1.2、完整宽度
- 可以不固定容器宽度。将栅格或其它元素放入一个带有 的容器中，那么宽度将不会固定，而是 100% 适应
- 完整宽度占据屏幕宽度的100%
我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
2.2.1、栅格布局规则
- 采用 来定义行，如：
- 采用类似 这样的预设类来定义一组列(column)，且放在行(row)中
- 变量 代表的是不同屏幕下的标记
- 变量 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
- 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
- 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
- 可对列追加类似 、 这样的预设类来定义列的间距和偏移。
- 可以在列（column）元素中放入你自己的任意元素填充内容，完成布局！
示例：
2.2.2、响应式规则
- 简单来说，就是会针对四类不同尺寸的屏幕，进行响应式适配处理。
我们将屏幕尺寸切换为小屏幕平板尺寸
2.2.3、列间距
- 设定列之间的间距
- 且一行中最左的列不会出现左边距，最右的列不会出现右边距
- 列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。
- 给容器添加
- 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
注意：
- 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div 来达到目的
- 如果需要的间距高于30px（一般不常见），我们需要采用列偏移
2.2.4、列偏移
- 对列追加类似 的预设类，从而让列向右偏移
- 其中 号代表的是偏移占据的列数，可选中为 1 - 12
- 如 ，即代表在 中型桌面屏幕下，让该列向右偏移3个列宽度。
2.2.5、列嵌套
- 列之间可以无限嵌套列
- 向任意 HTML 元素设定 ，建立一个基础按钮。
- 通过追加样式为 来定义其他按钮风格
名称 组合 原始 默认 百搭 暖色 警告 禁用
尺寸 组合 大型 默认 小型 迷你 流体按钮(最大化适应)
主题 组合 原始 默认 百搭 暖色 警告 禁用
3.4.1、图标
- 对 i 标签 设定
- 然后对元素加上图标对应的
- 内置图标一览表：https://www.layui.com/doc/element/icon.html
3.4.2、图标按钮
- 导航一般应用于头部和侧边，是整个网页画龙点晴般的存在
- 依赖加载模块：
实现步骤：
- 引入的资源
- 依赖加载模块
- 给一个无序列表 ul 添加
- 给 li 添加 表示的是导航的子项
- 给 li 添加 表示当前被选中的项
- 给 li 里面容器添加 表示的是二级菜单
4.2.1、图片与徽章
除了一般的文字导航，我们还内置了图片和徽章的支持，如：
通过对导航追加CSS背景类，让导航呈现不同的主题色
- 给无序列表 ul 添加 可设置墨绿色背景的导航
- 水平导航支持其他的背景主题有：(藏青)、(墨绿)、(艳蓝)
- 垂直导航支持的其他背景颜色有： (藏青)
- 给无序列表 ul 添加
- 给 li 添加 表示此子项目是默认展开的
- 给无序列表 ul 添加
- 设定来指向当前页面分类。
水平、垂直、侧边三个导航的 HTML 结构是完全一样的，不同的是
水平导航：
垂直导航需要追加：
侧边导航需要追加：
- 给 span 标签 添加
- 我们还可以通过设置属性 来自定义分隔符
- 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。
- 依赖加载模块：
实现步骤：
- 引入的资源
- 依赖加载模块
- 默认风格给容器添加 ：
- 简洁风格给容器追加：
- 卡片风格给容器需要追加：
默认风格：
简洁风格需要追加：
卡片风格需要追加：
- 给 table 标签增加
- 在 标签中定义表格列的宽度
- 表示相应列所占的宽度
- 标签表示表格的头部区域
- 标签用于定义表格中的行(行头)
- 标签用于定义表格中的表头(列头)
- 标签用于定义表格中的行(行头)
静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：
属性名 属性值 备注 lay-even 无 用于开启隔行背景，可与其他属性一起使用 lay-skin=“属性值” line(行边框风格)
row(列边框风格)
nob(无边框风格) 若使用默认风格不设置该属性即可 lay-size=“属性值” sm(小尺寸)
lg(大尺寸) 若使用默认尺寸不设置该属性即可
row(列边框风格)
nob(无边框风格) 若使用默认风格不设置该属性即可 lay-size=“属性值” sm(小尺寸)
lg(大尺寸) 若使用默认尺寸不设置该属性即可
将我们所需要的基础属性写在 标签上即可：如（一个带有隔行背景，且行边框风格的大尺寸表格）：
- 依赖加载模块：
实现步骤：
- 引入的资源
- 依赖加载模块
- 在一个容器中设定 来标识一个表单元素块
- 基本的行区块结构，它提供了响应式的支持。
- 给 div 添加 代表”行“
- 给 label 添加 代表”区“
- 给 div 添加 代表”块“
常用属性 描述 required 浏览器固定的必填字段 lay-verify 需要验证的类型(值为 required 的话表示必填项) 提供的通用的样式 占据全部宽度 占据部分宽度 placeholder 当文本框为空时，默认显示的文本信息 autocomplete 表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时，会填充)
- required：注册浏览器所规定的必填字段
- ：注册 form 模块需要验证的类型
- ：layui.css 提供的通用 CSS 类
- 通过 属性设置默认选中项
- 通过 属性开启禁用，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项)
- 通过 标签给 select 分组
- 通过设置 属性开启搜索匹配功能
7.2.1、分组
- 可以通过 标签给select分组
7.2.2、开启搜索匹配
- 通过设置 属性开启搜索匹配功能
- 通过设置 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)
- 通过 属性设置被选中的项
- 通过· 属性设置复选框的样式效果( 表示原始效果)
- 通过 属性禁用元素
7.3.1、开关
- 将复选框，设置 形成开关风格
- 通过 来设定开关的两种状态的文本，通过 分隔
- 通过 属性设置默认打开状态
- 通过 属性禁用开关
- 通过 属性设置选中的值
- 通过 设置默认选中项
- 通过 属性禁用单选框
- 通过 属性设置选中的值
- 给 textarea 标签添加
行内表单：表单元素在一行显示（div 盒子也不会全部占完宽度）
- 给 div 设置 ： 定义外层行内
- 给 div 设置 ：定义内层行内
- 给 form 标签追加 ，来设定表单的方框风格。
- 内部结构不变，值得注意的是：复选框/开关/单选框 这些组合在该风格下需要额外添加 属性
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/1358.html