layUi 格栅布局 导航菜单 轮播 表单

最新推荐文章于 2023-09-13 14:49:02 发布
最新推荐文章于 2023-09-13 14:49:02 发布
阅读量372 收藏
点赞数
文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62363650/article/details/132323668
版权

目录

layUI

  • 需要从layui官网手动下载组件到目录下使用<link>调用其中./layui-v2.7.6/layui/css/layui.css文件使用<script>./layui-v2.7.6/layui/layui.js文件
    在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="./layui-v2.7.6/layui/css/layui.css" rel="stylesheet">
  <link rel="stylesheet" href="./class.css">
</head>
<body>
	<script src="./layui-v2.7.6/layui/layui.js"></script>


</body>

栅格布局

  • Layui 栅格系统是一套具备响应式能力的布局方案，采用业界比较常用的容器横向 12 等分规则，预设了 5*12 种 CSS 排列类，内置多种大小尺寸的多终端适配，能很好地实现响应式布局，这意味着一套系统，能同时适配于电脑的不同大小屏幕和手机、平板等移动屏幕，使得网页布局变得更加灵活，同时也极大地降低了 HTML/CSS 代码的耦合

等比例水平排列

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="css文件地址" rel="stylesheet">
</head>
<body>
<div class="layui-row">
  <div class="layui-col-xs6">
    <div class="grid-demo grid-demo-bg1">6/12</div>
  </div>
  <div class="layui-col-xs6">
    <div class="grid-demo">6/12</div>
  </div>
</div>
<div class="layui-row">
  <div class="layui-col-xs3">
    <div class="grid-demo grid-demo-bg1">3/12</div>
  </div>
  <div class="layui-col-xs3">
    <div class="grid-demo">3/12</div>
  </div>
  <div class="layui-col-xs3">
    <div class="grid-demo grid-demo-bg1">3/12</div>
  </div>
  <div class="layui-col-xs3">
    <div class="grid-demo">3/12</div>
  </div>
</div>
</body>
</html>

移动设备、平板、桌面的复杂组合响应式

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="css文件地址" rel="stylesheet">
</head>
<body>
<div class="layui-row">
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
    <div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12</div>
  </div>
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
    <div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12</div>
  </div>
  <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
    <div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12</div>
  </div>
  <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
    <div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12</div>
  </div>
  <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
    <div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12</div>
  </div>
</div>
</body>
</html>

导航菜单

  • 通过 class=“layui-nav” 设置导航容器
  • 通过 class=“layui-nav-item” 设置导航菜单项
  • 追加 className 为 layui-this 可设置菜单选中项
  • 通过 class=“layui-nav-child” 设置导航子菜单项
  • 追加 className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="css文件地址" rel="stylesheet">
</head>
<body>
<ul class="layui-nav">
  <li class="layui-nav-item layui-this"><a href="">选中</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">常规</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="">菜单1</a></dd>
      <dd><a href="">菜单2</a></dd>
      <dd><a href="">菜单3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">选项</a>
    <dl class="layui-nav-child">
      <dd><a href="">选项1</a></dd>
      <dd class="layui-this"><a href="">选项2</a></dd>
      <dd><a href="">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">演示</a></li>
</ul>
 
<script src="js文件地址"></script>
</body>
</html>

轮播

  • 轮播组件 carousel 主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何内容的轮播式切换操作，亦可胜任 fullpage（全屏上下轮播）的需求。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="css文件地址" rel="stylesheet">
</head>
<body>
<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 src="js文件地址"></script> 
<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>
</body>
</html>

表单

  • 表单组件form是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。form是 Layui 最常用的组件之一。

登入模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="css文件地址" rel="stylesheet">
</head>
<body>
<style>
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
  <div class="demo-login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs7">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-vercode"></i>
            </div>
            <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 10px;">
            <img src="https://www.oschina.net/action/user/captcha" οnclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
      <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
    </div>
    <div class="layui-form-item demo-login-other">
      <label>社交账号登录</label>
      <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
      或 <a href="#reg">注册帐号</a>
    </div>
  </div>
</form>
  
<script src="js文件地址"></script> 
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  // 提交事件
  form.on('submit(demo-login)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>
</body>
</html>
哇塞445
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Layui的选项卡及菜单
m0_74915426的博客
07-12 812
一、介绍 二、选项卡的使用 三、选项卡和菜单联动 ......................
layui框架学习（6：基础菜单）
gc_2299的博客
02-12 2094
学习并记录layui框架中页面元素的基础菜单相关内容。
Layui菜单模块
lz17267861157的博客
07-11 1860
都是自己的一些个人分享，大家多多支持！
基于Layui框架，二次开发菜单导航
mufabixin的博客
04-11 1405
基于Layui框架，二次开发菜单导航
layui实现左侧导航树形菜单
TestXzing的博客
07-11 2636
今日金句在上篇博客中，我们学习了layui的入门，还实现了后台的登陆注册，今天我们就来完成后台首页的重要组成部分——左侧导航树形菜单
layui框架学习（4：导航）
gc_2299的博客
01-31 2694
学习并记录layui框架中页面元素的导航相关内容。
youshangxing.zip自适用布局网页设计+轮播
06-13
4. **弹性盒模型（Flexbox）** 和 **格栅系统（Grid System）**：这两种现代CSS布局模式为创建自适应布局提供了强大的工具，可以轻松地处理元素的对齐、排序和响应式调整。 **轮播组件** 轮播组件是网页设计中常见...
防爆格栅结构对压力损失的影响
05-24
为了研究防爆格栅所造成的压力损失,应用Fluent软件对空气通过防爆格栅进行模拟分析。定性分析了扩张腔形状与压力损失之间的关系。为防爆柴油机进排气系统防爆格栅的优化设计及应用提供参考,进而保证井下安全高效的...
土工格栅施工方案.doc
12-11
【土工格栅施工方案】 土工格栅是一种由高分子聚合物经拉伸而成的网状材料，常用于道路、铁路、水利等工程中，以增强地基稳定性，提高结构承载力。以下是对G209吉首市曙光至长沱公路土工格栅施工方案的详细说明： ...
土工格栅不同速率拉伸性能试验
06-28
为研究土工格栅在不同拉伸速率条件下的力学特性及其作用机理,通过对2种土工格栅进行不同拉伸速率条件下的拉伸性能试验,分析土工格栅的拉伸速率与强度、伸长率、变异系数和拉伸模量的关系.试验结果表明:土工格栅随...
RRT非格栅地图路径规划.rar
03-29
在机器人路径规划领域，RRT（ Rapidly-exploring Random Trees）算法是一种广泛应用的随机搜索方法，尤其适合处理复杂的非格栅地图环境。本资源"RRT非格栅地图路径规划.rar"似乎提供了一个经过优化的RRT实现，强调了...
layui栅格系统
taiyangwojiu的博客
12-10 2897
栅格系统 栅格系统 layui栅格系统将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。 栅格布局规则 响应式规则 响应式公共类 布局容器 列间距 列偏移 栅格嵌套 一、栅格布局规则 1. 采用 layui-row 来定义行，如：<div class="layui-row">...
Layui框架表单布局【每行一个，两个，三个input输入框】教程
热门推荐
yu980219的博客
09-02 1万+
这里写自定义目录标题欢迎使用Mar# 系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Mar# 系列文章目录 提示：这里可以添加系列文章
关于layui框架的form表单布局（小白向）
我是一只蘑菇17的博客
10-12 3495
在使用form表单的时候，必须先声明form模块，否则select、checkbox、radio等将无法显示，并且无法使用form相关功能，这是很多小白一开始经常犯的错误，虽然这很简单但也很基础，所以有必要在这里提一下。但通常来讲，我们不需要这么长的input，我们可以把外面的div的类换成class="layui-input-inline"试试。一般来讲，添加不同元素名和默认的layui-inline的效果是不一样的，这个就需要大家多加试验来挑选合适自己的类。但是这样并不好看，我们通常是这样使用。
Layui快速入门之第五节 导航
qq_61313896的博客
09-13 1790
Layui快速入门之第五节 导航
layui(八)——轮播图常见用法总结
banyongzhan5405的博客
08-10 1400
　　carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。 常见的options和方法整理如下： <div class="layui-carousel" id="test1" lay-filter="c...
Layui动态生成导航菜单子菜单不显示解决方法
weixin_69722347的博客
08-09 810
今天在使用Layui导航条动态添加的时候，发现动态添加后没有办法再次渲染他的效果，原因未知，但是已经解决了，j经常存在的问题我进行总结，直接贴图看结果。
【Layui】选项卡Tab：完美实现网页内容分类与导航
无法自律的人的博客
07-12 5827
Layui选项卡是一种基于Layui框架的前端组件，用于创建多个选项卡并在其之间进行切换。Layui是一个轻量级、易用、灵活的前端UI框架，旨在简化前端开发过程。使用Layui选项卡，你可以在页面中创建多个选项卡标签，每个标签对应一个内容区域。用户可以点击选项卡标签来切换显示相应的内容区域。这种方式常用于页面的分组显示或切换不同的功能模块。Layui选项卡提供了丰富的配置选项，包括标签样式、选项卡切换的触发事件、内容区域的布局方式等。它还支持动态添加和删除选项卡，以及自定义选项卡的样式和功能。
layui的导航,选项卡,表格,表单
serendipity_xr的博客
08-26 2104
layui 页面元素 一. 导航 先引入layui.css和layui.js <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" /> <script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script> 加载 element模块 <script type="text/javascript">
qt 格栅布局无法自适应大小
最新发布
09-22
Qt的栅格布局是一种简便的布局方式，可以将控件按照一定的行列配置进行排列。然而，栅格布局在某些情况下可能无法自适应大小。 首先，栅格布局中的行和列是固定的，无法根据内容的大小自动调整。这意味着如果控件的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值