layui

最新推荐文章于 2024-06-04 17:34:22 发布

isTrueLoveColour

最新推荐文章于 2024-06-04 17:34:22 发布

阅读量549

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/persistence_PSH/article/details/115278324

版权

layui

（谐音：类ui）是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，属于轻量级框架，适用于开发后端模式，在服务器端页面上有良好的效果，是提供给后端开发人员的ui框架。

1、下载及其目录

官网：https://www.layui.com/

在我们的下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下
在这里插入图片描述

下载完成后解压，创建一个新项目，将解压后的文件直接拷贝过来，其中除了layui以外都可以删除

在这里插入图片描述

mondules中有很多相关的模块
font为字体图标
image为图片目录
lay是模块的核心目录
layui.all.js为完整的核心库
layui.js为基础的核心库

2、快速上手

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入css和js两个文件：

./layui/css/layui.css
./layui/layui.js ，如果是采用非模块化方式，此处可换成：./layui/layui.all.js ，第一种方式使用什么引入什么，第二种全部引入，常用第一种，加载的资源的会比比较少

<!--引入css核心文件-->
<link rel="stylesheet" type="text/css" href="C:\Users\如果真爱有颜色\Desktop\layui-v2.5.7\layui\css/layui.css">
  
<!--引入js核心文件0-->
<script src="C:\Users\如果真爱有颜色\Desktop\layui-v2.5.7\layui/layui.js" type="text/javascript"charset="utf-8"></script>

layui.use() 来加载对应模块

<body>
    <script>
    
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      //引入表单，定义一个表单元素的全局变量，就可以通过这个变量来引用layui表单中的组件和样式等
      ,form = layui.form;     
      layer.msg('Hello World');
    });
    </script> 
</body>

不用去管其它任何文件。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面：

如果想用其他模块，也是一样的，去声明模块和回调函数即可

3、页面布局

1、布局容器

固定宽度 layui-containe r的布局和完整宽度 layui-fiuid 布局

<link rel="stylesheet" type="text/css" href="C:\Users\如果真爱有颜色\Desktop\layui-v2.5.7\layui\css/layui.css">

<!--固定宽度，两侧会有留白-->
<div class="layui-container" style="background-color: rgb(79, 197, 252);
     height: 500px ;">固定宽度       
</div>
<br>

<!--完整宽度，占据屏幕百分之百-->
<div class="layui-fiuid" style="background-color: rgb(120, 255, 127); 
	height: 500px ;">完整宽度
</div>

2、删格系统

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

一、行：采用 layui-row 来定义行，如：

<div class="layui-row"></div>

二、列：

采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：

变量md 代表的是不同屏幕下的标记（可选值见下文）
变量*** 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

栅格系统:

先定义行 layui-row
在定义列 layui-col-md*
- md表示不同屏幕的标识（xs, sm , md , lg）
- *表示列的数量
- 每一行都内均分为12列，超过12列则换行

<body>
    <h1><a href="layui1.html">首页</a></h1>
    <!--在固定宽度的布局容器中定义行-->
    <div class="layui-container">
        <div class="layui-row">
            <!--在行中定义列，这里是4列-->
            <div class="layui-col-md4" style="background-color: rgb(122, 229, 243);">
                 共有12列，这里占了4列  
            </div>
            <div class="layui-col-md8" style="background-color: rgb(233, 139, 62);">
                共有12列，这里占了8列  
           </div>
        </div>

        <div class="layui-row">
            <!--在行中定义列，这里是4列-->
            <div class="layui-col-md7" style="background-color: rgb(114, 71, 233);">
                 共有12列，这里占了7列  
            </div>
            <div class="layui-col-md3" style="background-color: rgb(226, 100, 195);">
                共有12列，这里占了3列  
           </div>
           <div class="layui-col-md5" style="background-color: rgb(245, 14, 91);">
            共有12列，到这里已经超出了5列，所以会自动换行  
       </div>
        </div>
    </div>
</body>

效果如下，共12行，如果超出会自动换行

在这里插入图片描述

3、响应式规则

栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理
在这里插入图片描述

响应式规则：

栅格会自动根据屏幕的分辨率来选择对应的样式效果

<body>
    <h1><a href="layui1.html">首页</a></h1>
    <h2>不同屏幕的不同表现</h2>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs8 layui-col-md4" style="background-color: cornflowerblue;">
                超小屏幕占8行。中等屏幕占4行
            </div>

        </div>

        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-md6" style="background-color: rgb(99, 24, 219);">
                超小屏幕占6行。中等屏幕占6行
            </div>

        </div>
        <div class="layui-row">
            <div class="layui-col-xs4 layui-col-md8" style="background-color: rgb(99, 24, 219);">
                超小屏幕占4行。中等屏幕占8行
            </div>
        </div>
    </div>
</body>

结果如下：

中等屏幕：

在这里插入图片描述

小屏幕：

在这里插入图片描述

4、列边距

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是

语法规则： .layui-col-space* *代表px值

layui-col-space1,2,4,5,6,8,10 …30

支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔

    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs4 layui-col-md4">
            <!--这里把背景颜色加入内容，是为了防止背景间隙也被染色-->>
            <div style="background-color: cyan;">超小屏幕占4行。中等屏幕占4行</div>
        </div>
        <div class="layui-col-xs2 layui-col-md6">
            <div style="background-color: darkorange;">超小屏幕占2行。中等屏幕占6行</div>
        </div>

    </div>

效果如下：

在这里插入图片描述

列偏移

将列向右移动指定列数

语法：layui-col-md-offset*

<h2>列偏移</h2>
    <div class="layui-row ">
        <div class="layui-col-xs4 layui-col-md4">
            <!--这里把背景颜色加入内容，是为了防止背景间隙也被染色-->>
            <div style="background-color: cyan;">超小屏幕占4行。中等屏幕占4行</div>
        </div>
        <div class="layui-col-xs2 layui-col-md6 layui-col-md-offset10  layui-col-xs-offset5">
            <div style="background-color: darkorange;">超小屏幕占2行,向右偏移5。中等屏幕占6行，向右偏移10</div>
        </div>

 </div>

效果如下：

在这里插入图片描述

列嵌套

可以队栅格进行无数次的嵌套，在列元素中（layui-col-md*）中插入元素（layui-row）,即可完成嵌套，每一行有12列，在列中在插入行，可以无线嵌套

    <div class="layui-row">
        <div class="layui-col-md6  " style="background-color: darkorange;">
            <divstyle="background-color: rgb(13, 54, 131);>

                <div class="layui-row">
                    <div class="layui-col-md4" style="background-color: deeppink;">
                        内部列
                    </div>

                    <div class="layui-col-md4" style="background-color: deeppink;">
                        内部列
                    </div>

                </div>
        </div>

    </div>

列中嵌行，行内再加列

在这里插入图片描述

4、按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

<body>
   <!--基础按钮-->
    <button type="button" class="layui-btn">标准按钮</button>
    <!--给a标签加上类ui属性，依然保持了其跳转功能-->
    <a href="layui1.html" class="layui-btn">跳转至首页的按钮</a>
    <div class="layui-btn">按钮</div>
    <button type="button">没有layui属性的按钮</button>
    
</body>

在这里插入图片描述

主题

原始	class=“layui-btn layui-btn-primary”
默认	class=“layui-btn”
百搭	class=“layui-btn layui-btn-normal”
暖色	class=“layui-btn layui-btn-warm”
警告	class=“layui-btn layui-btn-danger”
禁用	class="layui-btn layui-btn-disabled"ng)

在这里插入图片描述

	<button type="button" class="layui-btn layui-btn-warm">标准按钮</button>
    <a href="layui1.html" class="layui-btn layui-btn-danger">跳转至首页的按钮</a>
    <div class="layui-btn layui-btn-primary">按钮1</div>
    <div class="layui-btn layui-btn-normal">按钮2</div>
    <div class="layui-btn layui-btn-disabled">按钮3</div>
    <div class="layui-btn">按钮4</div>
    <button type="button">没有layui属性的按钮</button>

尺寸

尺寸	组合
大型	class=“layui-btn layui-btn-lg”
默认	class=“layui-btn”
小型	class=“layui-btn layui-btn-sm”
迷你	class=“layui-btn layui-btn-xs”

在这里插入图片描述

圆角

layui-btn-radius

    <button type="button" class="layui-btn layui-btn-warm  layui-btn-radius">标准按钮</button>
    <a href="layui1.html" class="layui-btn layui-btn-danger  layui-btn-radius">跳转至首页的按钮</a>
    <div class="layui-btn layui-btn-primary layui-btn-lg layui-btn-radius">按钮1</div>
    <div class="layui-btn layui-btn-normal  layui-btn-radius ">按钮2</div>
    <div class="layui-btn layui-btn-disabled layui-btn-sm layui-btn-radius">按钮3</div>
    <div class="layui-btn layui-btn-xs layui-btn-radius">按钮4</div>
    <button type="button">没有layui属性的按钮</button>

在这里插入图片描述

图标按钮

 <button type="button" class="layui-btn layui-btn-warm  layui-btn-radius">
        <i class="layui-icon layui-icon-heart"></i>
    </button>
    <div class="layui-btn layui-btn-primary layui-btn-lg layui-btn-radius">
        <i class="layui-icon layui-icon-bluetooth"></i>
    </div>
    <div class="layui-btn layui-btn-primary layui-btn-lg layui-btn-radius">
        <i class="layui-icon layui-icon-wifi"></i>
    </div>

在这里插入图片描述

5、图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标

<i class="layui-icon 对应的图标</i>   
          
<!--在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标-->
<i class="layui-icon">&#xe60c;</i>   
其中的 &#xe60c; 即是图标对应的 unicode 字符

内置图标一览表（168个）; https://www.layui.com/doc/element/icon.html

isTrueLoveColour

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui

layui（谐音：类ui）是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，属于轻量级框架，适用于开发后端模式，在服务器端页面上有良好的效果，是提供给后端开发人员的ui框架。1、下载及其目录官网：https://www.layui.com/在我们的下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下下载完成后解压，创建一个新项目，将解压后的文件直接拷贝过来，其中除了layui以外都可以删除
复制链接

扫一扫