热门标签
当前位置: article > 正文
Layui框架
作者：2023面试高手 | 2024-06-13 07:37:00
赞
踩
layui框架
Layui框架介绍
LayUI 是一款经典模块化前端 UI 框架 和Bootstrap有些相似，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。
使得前端页面的制作变得更加简单，可以说是为后端人员量身定制的一款开源框架。
1、Layui的使用
- 使用时我们只需要引入下述两个文件即可使用
<!-- LayUI的核心CSS文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<!-- LayUI的核心JS文件（采用模块化引入） -->
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
- 1
- 2
- 3
- 4
- 这是一个基本的入门页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用 layui</title> <!-- LayUI的核心CSS文件 --> <link rel="stylesheet" href="./layui/css/layui.css"> </head> <body> <!-- 你的 HTML 代码 --> <!-- LayUI的核心JS文件 --> <script src="./layui/layui.js"></script> <script> layui.use(['layer', 'form'], function(){ var layer = layui.layer, form = layui.form; layer.msg('Hello World'); }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
2、布局
布局容器
- 将栅格放入一个带有class="layui-container"的特定的容器中，以便在小屏以上的设备中固定宽度，让列可控。
- 固定宽度的两侧有留白效果
- 可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid"的容器中，那么宽度将不会固定，而是 100% 适应
- 完整宽度占据屏幕宽度的100%
<div class="layui-container " style="background-color: pink;height: 200px;">
固定宽度，两侧留白
</div>
<div class="layui-fluid " style="background-color: rgb(200, 21, 21);height: 200px;">
完整宽度，占据页面100%
</div>
- 1
- 2
- 3
- 4
- 5
- 6
3、栅格系统
我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
栅格布局规则
- 采用 class=“layui-row” 来定义行，
- 采用类似 layui-col-md* 这样的预设类来定义一组列(column)，且放在行(row)中
- 变量 md 代表的是不同屏幕下的标记
变量 * 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
可以在列（column）元素中放入你自己的任意元素填充内容，完成布局！
<div class="layui-container"> <!-- 定义行 --> <div class="layui-row"> <!-- 定义列 --> <div class="layui-col-md6" style="background-color: aqua;"> 内容6/12 </div> <div class="layui-col-md6" style="background-color: red;"> 内容6/12 </div> </div> <!-- 定义行 --> <div class="layui-row"> <!-- 定义列 --> <div class="layui-col-md4" style="background-color: powderblue;"> 内容4/12 </div> <div class="layui-col-md4" style="background-color: mediumaquamarine;"> 内容4/12 </div> <div class="layui-col-md6" style="background-color: grey;"> 内容6/12 </div> </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
响应式规则
- 简单来说，就是会针对四种不同的屏幕尺寸，进行响应式适配处理
<!-- 4. 响应式规则 栅格会自动根据屏幕的分辨率选择对应的样式效果。 --> <body> <h3>平板、桌面端的不同表现：</h3> <div class="layui-row"> <!-- 小屏幕占6列，中屏幕占4列 --> <div class="layui-col-sm6 layui-col-md4" style="background-color: thistle"> 平板≥768px：6/12 | 桌面端≥992px：4/12 </div> </div> <div class="layui-row"> <!-- 小屏幕占4列，中屏幕占6列 --> <div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;"> 平板≥768px：4/12 | 桌面端≥992px：6/12 </div> </div> <div class="layui-row"> <!-- 小屏幕占12列，中屏幕占8列 --> <div class="layui-col-sm12 layui-col-md8" style="background-color: coral"> 平板≥768px：12/12 | 桌面端≥992px：8/12 </div> </div> </body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
列间距
- 设定列之间的间距
- 且一行中最左的列不会出现在左边距，最右的列不会出现右边距
- 列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度
- 列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度
- 给容器添加class=“layui-col-space*”
-
- 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
-
<!-- 列边距 .layui-col-space* -->
<h3>列边距</h3>
<div class="layui-row layui-col-space20">
<div class="layui-col-md4">
<!-- 给具体的内容设置背景颜色 -->
<div style="background-color: hotpink">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: indianred">4</div>
</div>
<div class="layui-col-md4">
<div style="background-color: powderblue">4</div>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
注意：
- layui-col-space 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div 来达到目的
- 如果需要的间距高于30px （一般不常见），我们需要采用列偏移
列偏移
- 对列追加类似layui-col-ml-offset的预设类，从而让列向右偏移
- 其中*号代表的是偏移占据的列数，可选为1-12
- 如layui-col-md-offset3，即代表在中型桌面屏幕下，让列向右偏移3个列宽度
列嵌套
- 列之间可以无限嵌套列
<div class="layui-row"> <!-- 大的盒子占6列 --> <div class="layui-col-md6"> <div style="background-color: red"> <div class="layui-row"> <!-- 嵌套列 --> <div class="layui-col-md3" style="background-color: burlywood;"> 内部列 </div> <div class="layui-col-md5" style="background-color: indianred;"> 内部列 </div> <div class="layui-col-md2" style="background-color: mediumaquamarine;"> 内部列 </div> </div> </div> </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
4、按钮
按钮风格
- 向任意HTML元素设定class=“layui-btn”，建立一个基础按钮
- 通过追加样式为class=“layui-btn-{type}”来定义其他按钮风格
按钮尺寸
圆角按钮
图标按钮
- 对i标签设定class=“layui-icon”
-然后对元素加上图标对应的font-class
5、导航
- 导航一般应用于头部和侧边，是整个网页画龙点睛般存在
- 依赖加载模块：element
实现步骤：
1、引入的资源
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/><script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
- 1
2、依赖加载模块
<script type="text/javascript"> // 导航 依赖element模块,否则无法进行功能性操作 layui.use('element',function(){ var element = layui.element; }); </script>
- 1
3、垂直导航栏
- 给无序列表ul添加 class=“layui-nav layui-nav-tree”
- 给 li 添加 class=“layui-nav-item layui-nav-itemed” 表示此子项目是默认展开的
<!-- 垂直导航 layui-nav layui-nav-tree --> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="#">默认展开</a> <dl class="layui-nav-child"> <dd><a href="#">选项1</a></dd> <dd><a href="#">选项2</a></dd> <dd><a href="">跳转</a></dd> </dl> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="#">解决方案</a> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> </ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
4、侧边导航
- 给无序列表ul添加class=“layui-nav layui-nav-tree layui-nav-side”
- 设定layui-this来指向当前页面分类。
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --><ul class="layui-nav layui-nav-tree layui-nav-side"> <li class="layui-nav-item layui-nav-itemed"> <a href="#">默认展开</a> <dl class="layui-nav-child"> <dd><a href="#">选项1</a></dd> <dd><a href="#">选项2</a></dd> <dd><a href="">跳转</a></dd> </dl> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="#">解决方案</a> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li></ul>
- 1
水平导航：class=“layui-nav”
垂直导航：class=“layui-nav-three”
侧边导航：class=“layui-nav-tree layui-nav-side”
6、轮播
轮播组件 carousel 主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何内容的轮播式切换操作，亦可胜任 fullpage（全屏上下轮播）的需求。
<div class="layui-carousel" id="ID-carousel-demo-1"> <div carousel-item> <div>条目1</div> <div>条目2</div> <div>条目3</div> <div>条目4</div> <div>条目5</div> </div> </div> <hr class="ws-space-16"> <div class="layui-carousel" id="ID-carousel-demo-2"> <div carousel-item> <div>条目1</div> <div>条目2</div> </div> </div> <script> layui.use(function(){ var carousel = layui.carousel; // 渲染 - 常规轮播 carousel.render({ elem: '#ID-carousel-demo-1', width: 'auto' }); // 渲染 - 设置时间间隔、动画类型、宽高度等属性 carousel.render({ elem: '#ID-carousel-demo-2', interval: 1800, anim: 'fade', width: 'auto', height: '120px' }); }); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 在元素外层设置 class=“layui-carousel” 来定义一个轮播容器
- 在元素内层设置属性 carousel-item 用来定义条目容器
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/711443
推荐阅读
相关标签
