Layui框架

最新推荐文章于 2024-04-27 01:00:51 发布
最新推荐文章于 2024-04-27 01:00:51 发布
阅读量1.1k 收藏 8
点赞数 2
文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78158657/article/details/132323317
版权
本文介绍了layui框架的使用方法，包括引入CSS和JS文件、布局容器、栅格系统（响应式设计和列布局）、按钮样式、导航组件（垂直和侧边导航）、以及轮播功能。适合前端开发者了解和实践layui在项目中的应用。
摘要由CSDN通过智能技术生成

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 用来定义条目容器
南迎泽
关注
layui前端框架
运维@小兵的博客
02-14 1038
文章目录导入layui`官网下载``Django项目配置使用静态文件`后台布局颜色栅格系统面板按钮表单上传文件表格数据表格弹出层 导入layui 官网下载 官网地址：https://www.layui.com/ 下载后解压 Django项目配置使用静态文件 在layui项目下创建static目录 settings文件添加如下内容 STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) 将解压后的layui目录移动到static目
Layui：一款强大的前端UI框架
最新发布
m0_46413639的博客
08-20 2118
在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。
LayUI框架
热门推荐
来一杯Java咖啡
10-25 2万+
一、引言 1.1 介绍 LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端页面的制作变得更加简单，可以说是为后端人员量身定制的一款开源框架。 可是很遗憾的是，贤心大神因为各种因素吧，从官网迁走了 不过layui中的些许知识对我们而言还是挺好用的， 我们也可以通过镜像网站 Layui - 经典开源模块化前端 UI 框架layui 是一套开源的 Web UI 解决方案，其内部采用的是自身经典的模块化规范，并遵...
layui框架
bryant_yang的博客
04-25 1832
取标签中的属性值 1.自定义属性 $(this).attr(“属性”); 将图片的URL存入key属性中 <div class="layui-form-item"> <img tag="img" key="bg-1.jpg" src="../image/bg-1.jpg" width="150" height="100" style="border:2px soli...
LayUI框架示例整合
06-21
这个“LayUI框架示例整合”是为初学者提供的一份实践教程，旨在帮助小白快速上手LayUI，掌握其基本用法和常见功能。 LayUI的核心思想是模块化，它将页面元素如表格、表单、按钮、弹窗等封装成独立的模块，开发者...
ThinkPHP5+layui框架后台管理系统.zip
08-04
《深入理解ThinkPHP5与layui框架构建后台管理系统》 在当今的互联网开发环境中，高效、易用且功能强大的后台管理系统是企业级应用不可或缺的一部分。本系统基于ThinkPHP5框架和layui前端组件库，旨在提供一个稳定、...
详解如何在vue项目中使用layui框架及采坑
10-17
在Vue项目中集成layui框架可能遇到的挑战及解决方法 layui是一款流行的前端UI框架，它提供了丰富的组件和优雅的设计风格。然而，在Vue这样的现代前端框架中使用layui并不像在传统HTML页面中那样直接。本文将深入...
layui框架与SSM前后台交互的方法
10-16
四、layui框架介绍layui是一个轻量级的前端组件库，它提供了丰富的UI组件和便捷的API接口，适用于后台管理系统界面开发。layui的主要特性包括：1. 高度模块化：layui的每个功能都封装成独立的模块，方便按需加载和...
layui框架简单解读，为什么要使用layui框架，layui框架的好处，后端程序员快速学习掌握layui框架技术型文档博文，layui学习笔记，快速掌握前端技术框架
2401_84446882的博客
04-27 1111
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
layui框架是什么？
Qianyingqwer的博客
08-19 832
layui框架是什么？ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览
LayUI前端设计框架
chenliang1038的博客
05-09 1067
LayUI框架1、 LayUI目录结构2、HTML连接layui3、模块3.1、自定义模块(define)3.2、模块使用(define)3.3、获取浏览器信息 参考文档：https://www.layuion.com/doc/ 1、 LayUI目录结构 ├─css //css目录 │ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：） │ │ ├─laydate │ │ └─layer │ └─layui.css //核心样式文件 ├─font //字
前端基础5——UI框架Layui
百慕卿君博客
09-06 1万+
Layui的常用设置
Layui框架简介
developer
09-27 1万+
layui简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，...
layui框架 在线样例
09-17
Layui框架是一款轻量级、易于使用的前端UI框架，被广泛应用于Web开发中。它提供了丰富的UI组件和强大的功能，使得开发人员能够快速、高效地构建出美观、易用的界面。同时，Layui框架还具备响应式布局的特性，适配不同的设备和屏幕尺寸。 Layui框架的在线样例主要提供了官方示例和文档，方便开发者学习和使用该框架。在官方示例中，我们可以找到各种常见的UI组件，如按钮、表单、表格等，并且可以查看它们在各种场景下的应用效果。通过这些在线样例，开发者可以快速了解和学习Layui框架的使用方法，从而节省开发时间。 除了官方示例外，Layui框架的在线样例还提供了丰富的文档内容，包括框架的基本介绍、使用教程、API文档等。这些文档详细地描述了每个组件的属性和方法，以及如何使用这些组件构建出不同的页面效果。通过在线样例配合文档的学习，开发者可以快速掌握Layui框架的核心概念和使用技巧。 Layui框架的在线样例不仅仅是一种演示和学习工具，它还是一个实用的开发辅助工具。在使用Layui框架开发项目时，开发者可以通过在线样例查找到适合自己需求的代码片段，并直接应用到自己的项目中。这样可以加快开发速度，同时保证代码的质量和可靠性。 总而言之，Layui框架的在线样例提供了一个方便快捷的学习和使用平台，帮助开发者快速掌握Layui框架的各种功能和技巧，并且可以在实际项目中高效地使用该框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值