Layui框架

南迎泽

于 2023-08-16 18:12:32 发布

阅读量1k

点赞数 2

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/2301_78158657/article/details/132323317

版权

layui框架

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>

这是一个基本的入门页面

<!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>

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>

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>

响应式规则

简单来说，就是会针对四种不同的屏幕尺寸，进行响应式适配处理

<!--
	            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>

列间距

设定列之间的间距
且一行中最左的列不会出现在左边距，最右的列不会出现右边距
列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度
列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度
给容器添加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>

注意：

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>

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>

2、依赖加载模块

<script type="text/javascript">    // 导航 依赖element模块,否则无法进行功能性操作    layui.use('element',function(){        var element = layui.element;    });					</script>

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>

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>

水平导航：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>

在元素外层设置 class=“layui-carousel” 来定义一个轮播容器
在元素内层设置属性 carousel-item 用来定义条目容器

南迎泽

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Layui框架

LayUI 是一款经典模块化前端 UI 框架和Bootstrap有些相似，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。使得前端页面的制作变得更加简单，可以说是为后端人员量身定制的一款开源框架。
复制链接

扫一扫