Layui的使用

最新推荐文章于 2022-12-20 03:21:27 发布
最新推荐文章于 2022-12-20 03:21:27 发布
阅读量514 收藏 1
点赞数
分类专栏： 笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dad188/article/details/118511279
版权

1.Layui的引入

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui的引入</title>
    <!--引入css文件-->
    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css">
    <!--引入js文件-->
    <script src="layui-v2.6.8/layui/layui.js"></script>
    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
                ,form = layui.form;

            layer.msg('Hello World');
        });
    </script>
</head>
<body>
</body>
</html>

运行弹出HelloWorld就是引入成功！
在这里插入图片描述

1.1布局

1.1.1布局容器

layui和bootstrap用法相同，都有一个完完整宽度和固定宽度

1.1.1固定宽度

固定宽度，将栅格放入一个class="layui-container"的容器，以便在小屏幕以上设备中固定宽度，让列可控。两侧有留白效果，就是只有屏幕中间是信息显示区域

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

具体效果：
在这里插入图片描述

1.1.1完整宽度

完整宽度将栅格或者其他元素放入一个带有class="layui-fluid"的容器中，在屏幕上100%显示。

<div class="layui-fluid">
***
</div>

具体效果：
在这里插入图片描述

1.2栅格系统

1.2.1采用layui-row来定义行，例子：

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

1.2.2采用类似layui-col-md这样的预设类来定义一组列（column）,且放在行（row）中，其中
1.md是代表不同屏幕下的标记
2.变量代表是该列所占用的12等分数，可以选值1-12
3.最多是12，也就是在同一行，列数之和最多是12，如果超过12那麽就会自动换行。
4.列可以同时出现最多四种屏幕组合，分别是xs（超小屏幕，如手机），sm(小屏幕，如平板)，md(桌面中等屏幕)，lg（桌面大型屏幕）
在这里插入图片描述

5.可以对值追加类似layui-col-space5,layui-col-md-offset3这样的预设类来定义列的间距和位移
6.可以在列（column）元素中放入你自己的任意元素来填充内容
例子：

<div class="layui-row">
    <div class="layui-col-md4">
        内容的4/12
    </div>
    <div class="layui-col-md8">
        内容的8/12
    </div>
</div>

1.2.3列间距
列间距就是用layui-col-space*，其中*代表中间间距的数值，如果是1就代表1px;而这个列间距就需要加在行的后面。

<div class="layui-row layui-col-space2">
    <div class="layui-col-md4">
        内容的4/12
    </div>
    <div class="layui-col-md8">
        内容的8/12
    </div>
</div>

1.2.4列偏移
列偏移就是列的右移动，用layui-col-md（此处是屏幕尺寸大小）-offset来实现，其中代表偏移数值，如果是1,那么将移动1/12

<div class="layui-row layui-col-space2">
    <div class="layui-col-md4">
        内容的4/12
    </div>
    <div class="layui-col-md5 layui-col-md-offset1">
        内容的5/12
    </div>
</div>

1.2.5列嵌套
每列可以无限嵌套列，嵌套列的时候就是将第一个*/12在划分为12份。其中*代表第一个数值的大小
例子：

<div class="layui-row">
    <div class="layui-col-md6">
        <div class="layui-row">
            <div class="layui-col-md4">
                内容的4/12
            </div>
            <div class="layui-col-md8">
                内容的8/12
            </div>
        </div>
    </div>
</div>

1.3按钮元素
在这里插入图片描述
例子：
在这里插入图片描述
效果：
在这里插入图片描述
按钮大小设置：
在这里插入图片描述
可以与主题嵌套使用
效果：
在这里插入图片描述
圆角按钮：
在这里插入图片描述
就是将layui-btn-radius嵌套进去：
例子：
在这里插入图片描述
效果：
在这里插入图片描述
图标按钮：
在官网上有各种图标按钮的例子
在这里插入图片描述
具体使用方法就是：
第一种：

<button type="button" class="layui-btn">
<i class="layui-icon">&#xe685;</i>添加
</button>

第二种：

<button type="button" class="layui-btn">
<i class="layui-icon layui-icon-heart"></i>添加
</button>

1.4导航模块

引入必须的css和js模块
在这里插入图片描述

引入导航模块
在这里插入图片描述
水平导航
需要先添加layui-nav
利用html中ul和li配合使用
其中的layui-this表示被选中的模块就是下面例子中的产品，二级菜单就是layui-nav-child,对应的一级菜单就是layui-nav-item

<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</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>
</ul>
 
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

侧边导航栏
侧边导航栏就是需要在添加两个class分别是layui-nav-tree layui-nav-side
例子：

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="">跳转</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</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>

各种导航支持的颜色
在这里插入图片描述
还可以在导航的文字（在选项一）后面直接放入徽章效果：

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1<span class="layui-badge">6</span></a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="">跳转</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</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>

面包屑式导航：
其中lay-separator="-"这个就是添加分隔符号，可以任意更换

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

选项卡：
需要先引入模块
在这里插入图片描述
选项卡就是layui-tab
首先是头layui-tab-title
再就是想那个被首先选中就写上layui-this
再就是想那个内容被显示就写上layui-show
Tab风格：

<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">1</div>
    <div class="layui-tab-item">2</div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
    <div class="layui-tab-item">6</div>
  </div>
</div>

效果如下：
在这里插入图片描述

大陈&
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
00011 - layui 表格table列固定宽，且超出屏幕时横向滚动
05-26 1008
var tableIns = table.render({ elem:’#taskOptLogListTable’ ,url: ctx+’/task/taskOptLog/query’ ,error:admin.error ,cellMinWidth: 80 ,toolbar: ‘#taskOptLogListTable-toolbar’ ,defaultToolbar: [{ title: ‘条件过滤’ //标题 ,layEvent: ‘searchDiv’ //事件名，用于 toolbar 事件中使用
layui使用vue的例子
06-13
layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
layui 列间距BUG
qq_40943363的博客
06-19 1211
看了Layui文档列间隔的相关文档，LayUI示例效果如下：
layUI学习记录------列间距
aigezi_cdd的博客
07-29 4444
本人第一次写博客，只为记录自己的学习日常。最近在自学layUI，我把其中自己遇到的问题记录下来，希望能帮到和我一样初学layUI的朋友。如果谁有更好的学习资料欢迎分享出来，供大家一起学习。本文都是我的一些碎碎念，有不足之处欢迎指正，不喜勿喷。 列间距：通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列...
列间距column-gap
10-18 2005
column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || 取值说明 属性值 属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 此值用来设置列与列之间的距离，
layui javascript 导航菜单设置为href跳转后保持选中状态
Irvinfaith的博客
01-07 3360
问题： 通过layui的导航栏可以完成如下的布局： <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item"> <a class="" href="javascript:;">A</a> <dl class="layui-nav-child"> <dd><a
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
10-16
总结，这个实例展示了如何使用layui创建一个动态的用户交互体验：通过点击按钮触发弹层，弹层内展示表单，用户可以在表单中输入信息并进行交互。这种设计模式常见于需要用户进行选择或者编辑操作的场景，提高了界面...
layui使用form表单实现post请求页面跳转的方法
10-16
本文将详细介绍如何使用layui的form表单实现POST请求并进行页面跳转，以确保数据安全且避免信息泄露。 通常，通过`window.location.href`的方式添加参数进行页面跳转会将数据暴露在URL中，这可能带来安全风险。为了...
layui使用label标签的方法
10-16
今天小编就为大家分享一篇layui使用label标签的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui使用表格渲染获取行数据的例子
01-19
需求：使用前端框架layui生成表格，点击表格中一行数据中的按钮，获取到这行数据。 解决办法： 在render中增加字段： done: function (res, curr, count) { // $('.x-body').find('.layui-table-body').find(table...
利用layui实现侧边导航栏
月来better
10-18 4011
主要利用element模块插件实现侧边导航栏 第一种展示的侧边导航栏是依据菜单展示的内容来展示其背景样式的 <link rel="stylesheet" type="text/css" href="./libs/layui/css/layui.css"/> <ul class="layui-nav layui-nav-tree" lay-filter="test"> //layui-nav-itemed====》此类名是控制其该列表项展开 <li class="layu
layui组件相关学习
特立独行的博客
03-24 1856
Layui相关组件学习 狂神是一个很好的学习平台 Layui相关组件学习官网 1.选项卡 说明：在标签中使用class=layui-tab可定义该标签为一个选项卡，lay-allowClose="true"表示该选项卡可以被删除，使用layui-tab-item可以设置点击该选项卡时的内容显示。 <div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li class=
layui的使用
qq_44765534的博客
05-24 1775
> layuiAdmin.pro（即：单页版） > layuiAdmin.std（即：iframe 版） 所谓“单页版”，即 SPA（单页面应用系统）开发模式，也就是所有的页面动作都是在一个宿主页面中完成，通常用于前后端分离。其中视图层全权由前端把控，数据一律走 Ajax 异步请求。layuiAdmin 内部实现了一套基于 location.hash 的路由和模板机制，这使得你可以很轻松地实现界面的跳转与渲染。另外注意的是，接口鉴权不再适用于传统的 session 模式，一般需要采用 JWT
框架 - LayUI（一）
Qianmoer的博客
12-20 673
框架 - LayUI（一）
layui多层弹窗的实现
weixin_48095078的博客
12-14 5033
1.先引入layui的样式和JS <link href="layui.css" rel="stylesheet" / <script src="layui.js"></script> 2.定义父级弹窗 <script type="text/javascript"> layui.use('table',function(){ var layer=layui.layer, $=layui.$; ...
layui
persistence_PSH的博客
03-28 547
layui （谐音：类ui）是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，属于轻量级框架，适用于开发后端模式，在服务器端页面上有良好的效果，是提供给后端开发人员的ui框架。 1、 下载及其目录 官网：https://www.layui.com/ 在我们的下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下 下载完成后解压，创建一个新项目，将解压后的文件直接拷贝过来，其中除了layui以外都可以删除
启动tomcat卡在log4j_tomcat 的 JAVA_OPTS 分析设置
weixin_39915081的博客
12-06 539
JAVA_OPTS ，顾名思义，是用来设置JVM相关运行参数的变量。1、JVM:JAVA_OPTS="-server -Xms2048m -Xmx2048m -Xss512k"2、-server:一定要作为第一个参数，在多个CPU时性能佳3、-Xms：初始Heap大小，使用的最小内存,cpu性能高时此值应设的大一些4、-Xmx：java heap最大值，使用的最大内存上面两个值是分配JVM的最小和...
layui经典布局
Fuyonghui123的博客
05-07 951
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./layui-v2.6.5/layui/css/layui.css"> <script src="./layui-v2.6.5/layui/layui.js"&...
layui 栅格布局学习记录
很爱惜头发的博客
05-24 3113
栅格系统与后台布局
layui使用md5加密
最新发布
11-17
根据提供的引用内容，无法得知Layui如何使用md5加密。但是可以根据引用中提到的内容，前端需要使用md5加密来保护隐私，可以使用第三方库进行实现。以下是一个使用crypto-js库进行md5加密的例子： ```javascript // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值