layui框架的一些基本使用

这篇具有很好参考价值的文章主要介绍了layui框架的一些基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

 1.栅格系统

 2.按钮

 2.表单

 3.表格

 4.面板

5.时间线

 6.选项卡

 7.弹出层

8.数据表格 


layui的优缺点以及使用layui前的准备
优点:
LayUi作为一款国产开源的前端UI,简单易上手,并且UI简洁美观。本身目标对象是不怎么懂前端的后端开发人员,也适合后端人员使用。
(1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。
(2)layui是提供给后端开发人员最好的ui框架,基于DOM驱动,只要不涉及到交互layui还是很不错的
缺点:
由于LayUi是个人开源的项目并且开源时间不长,因此bug会比较多,也会有一些限制。兼容性也不强,尤其是在移动端。不由于设计的初衷,LayUi只适合小型项目,即便是小项目,也经常会遇到诸多问题。官网对集成较好的技术收费。

layui官网已于2021年10月13日下架,但是我们可以在layui镜像站里来学习layui的相关知识
镜像站@Layui - 经典开源模块化前端 UI 框架 https://www.layui.site/index.htm 使用layui需要进行layui的引入,直接点击下方地址即可进行下载使用(可根据下方图片提示)

layui引入所需文件https://pan.baidu.com/s/1_RquAr1UNlYPW-SIUANL6A?pwd=wmy1layui框架的一些基本使用layui框架的一些基本使用

 

 1.栅格系统

1. 采用 layui-row 来定义行,如:<div class="layui-row"></div>
2. 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。其中:
  • 变量md 代表的是不同屏幕下的标记(可选值见下文)
  • 变量* 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12
  • 如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
3. 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5. 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!

示例


<body>
		<div class="layui-container">
			<!-- 定义行-->
			<div class="layui-row">
				<!-- 定义列 -->
				<div class="layui-col-md5" style="background-color: #007DDB;">
					内容5/12
				</div>
				<div class="layui-col-md7" style="background-color: #00F7DE;">
					内容7/12
				</div>
			</div>
			<div class="layui-row">
				<!-- 定义列 -->
				<div class="layui-col-md4" style="background-color: #EB7350;">
					内容4/12
				</div>
				<div class="layui-col-md4" style="background-color: #FFB800;">
					内容4/12
				</div>
				<!-- 超过12会自动换行 -->
				<div class="layui-col-md6" style="background-color: #C2C2C2;">
					内容6/12
				</div>
			</div>
			<div class="layui-row">
			    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: pink;">
			      移动:6/12 | 平板:6/12 | 桌面:4/12
			    </div>
			    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: palegoldenrod;">
			      移动:6/12 | 平板:6/12 | 桌面:4/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: peru;">
			      移动:4/12 | 平板:12/12 | 桌面:4/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: powderblue;">
			      移动:4/12 | 平板:7/12 | 桌面:8/12
			    </div>
			    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: palegreen;">
			      移动:4/12 | 平板:5/12 | 桌面:4/12
			    </div>
			  </div>
		</div>
	</body>

效果如下:

layui框架的一些基本使用

 2.按钮

主题:

名称 组合
原始 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"

layui框架的一些基本使用

主色 class="layui-btn layui-btn-primary layui-border-green"
百搭 class="layui-btn layui-btn-primary layui-border-blue"
暖色 class="layui-btn layui-btn-primary layui-border-orange"
警告 class="layui-btn layui-btn-primary layui-border-red"
深色 class="layui-btn layui-btn-primary layui-border-black"

layui框架的一些基本使用

2.尺寸文章来源地址https://www.toymoban.com/news/detail-448174.html

尺寸 组合

到了这里,关于layui框架的一些基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • layui的基本使用-日期控件的业务场景使用入门实战案例一

    效果镇楼;       1 前端UI层面;   苟日新一刻钟总结反观:  2  那么业务场景的话,就没有那么简单了。首先就是解决方案里面可不止一个文件夹,是多个项目组成的解决方案。比如仓储层,Repository项目,业务层项目,Services,同时各自对应了各自的接口项目;Model 实体

    2024年02月13日
    浏览(33)
  • layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来

    该笔记记录如何使用layui的模块化方法。 访问layui官网 Layui - 极简模块化前端 UI 组件库 下载官网的layui压缩包文件,解压到本地文件夹,文件结构如下: vscode创建项目;    位置     测试写了三个文件夹,才测试出来bug 坑所在,知道原因。引入没有错误,错误的是位置啊。

    2024年02月16日
    浏览(44)
  • springboot里结合layui对表格数据的一些记录

    这段代码主要实现了一个前端的数据表格展示功能,使用了 layui 的表格组件进行渲染。以下是对代码的解释: 首先,定义了一个名为 active 的对象,其中包含了一个方法 reload,这个方法用于重新加载数据表格,并且根据用户选择的条件进行数据筛选和显示。 reload 方法内部执

    2024年02月16日
    浏览(36)
  • 【个人博客系统网站】框架升级 · 工程目录 · 数据库设计

    【JavaEE】进阶 · 个人博客系统(1) 标准项目目录: controller ,前后端交互控制器,接受请求,[处理请求],调用service,将响应返回给前端 service ,调用数据持久层mapper层 mapper ,进行数据库操作 model ,实体类 common ,公共类,Utils工具类 utils是“utilities”的缩写,即工具、实

    2024年02月10日
    浏览(46)
  • github一些有趣的使用场景和基本使用方法

    首先,确保您的计算机上安装了 Git。您可以从 Git 官方网站(https://git-scm.com/)下载并安装适用于您操作系统的版本。 如果您还没有 GitHub 帐户,请在 GitHub 网站上注册一个新帐户(https://github.com)。 打开命令行界面(终端或命令提示符),运行以下命令来配置您的 Git 用户名

    2024年02月08日
    浏览(46)
  • Vue Grid Layout -️ 适用Vue.js的栅格布局系统(保姆级使用教程)

    官网:Vue Grid Layout -️ 适用Vue.js的栅格布局系统 Gitee:https://gitee.com/wfeng0/vue2-grid-layout  在官网的描述中,我们可以看出,该栅格布局具有以下特性:  在具有 拖拽组成页面、组件动态调整大小、边缘碰撞监测 的系统中,使用该布局无疑是最合适的。当然,目前也有很多现成

    2023年04月16日
    浏览(38)
  • 【STM32】 DSP库函数的一些基本使用

    对于一些刚接触STM32的童靴来说,DSP库一定是一个陌生的东西。通俗来说,DSP库就是为了让MCU能够使用像DSP(数字信号处理的芯片)功能弄的一些官方库函数,它是基于MCU的FPU(浮点运算功能)的,如果你连FPU都不知道咋开,我个人建议先去查一查啥是FPU以及DSP库移植的一些

    2024年02月01日
    浏览(33)
  • Multisim软件常用仪表的使用与一些基本测量方法

    本文作者使用multisim14.0中文破解版 (图1) (图2) 函数信号发生器用法讲解: 函数信号发生器 可产生三类五种波形,分别是 正弦信号、三角波、锯齿波、方波和脉冲波 (图3) 右框可调单位,如振幅: (图4) 示例:脉冲波 1KHz 20% 0-5V的脉冲信号 步骤: (图5) 示波器用

    2024年02月07日
    浏览(39)
  • Layui基本功能(增删改查)

    话不多说,根据我前面的博客我们直接进行操作。 记住以下的文件放置,防止操作出不来.  这是我们要完成的界面及功能   数据查看 我们在userDao方法里面进行增删改查的方法 我们在userAction进行方法的编写 R工具类的介绍 userDao方法 因为我们的数据库的rid需要转成权限名,

    2024年02月16日
    浏览(36)
  • 前端框架LayUI

    Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适 用。 可以直接使用Bootstrap提供的 CSS 样式表,Bootstrap的源码是采用最流行的CSS预处理工具Less和Sass开发的。可以直接采用预编译的CSS文件快速开发,也可以从Bootstrap源码自定义自

    2024年02月02日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包