Layui快速入门之第一节Layui的基本使用

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

目录

一:Layui的基本概念

二:Layui使用的基本步骤

1.在官网下载layui的基本文件,引入css和js文件

①:普通方式引入

②:第三方 CDN 方式引入

2.在script标签体中编写代码

3.测试


一:Layui的基本概念

                       Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,即无需涉足各类构建工具,只需面向浏览器本身,便可将页面所需呈现的元素与交互信手拈来,常用来当做后台管理系统的框架

特性:

  • 原生态开发
  • 轻量级模块化 
  • 外简内丰 
  • 开箱即用

文档地址:Layui - 经典开源模块化前端 UI 组件库(官方开发文档)

二:Layui使用的基本步骤

1.在官网下载layui的基本文件,引入css和js文件
①:普通方式引入
 <!--引入css文件 -->
<link type="text/css" rel="stylesheet" href="layui-v2.8.11/layui/css/layui.css">
 <!--引入js文件 模块化引入-->
 <script src="layui-v2.8.11/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
②:第三方 CDN 方式引入
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
 
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js">
2.在script标签体中编写代码
//一般写在一个js文件中
    layui.use(['layer','form'],function () {
        var layer=layui.layer,
            form=layui.form;
        layer.msg('我看见,我征服')
    });
3.测试

Layui快速入门之第一节Layui的基本使用,Layui,layui,前端,javascript文章来源地址https://www.toymoban.com/news/detail-699804.html

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

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

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

相关文章

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

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

    2024年02月13日
    浏览(33)
  • 十四天学会C++之第一天(入门和基本语法)

    C++诞生于20世纪80年代初,它的创造者是计算机科学家Bjarne Stroustrup。当时,Stroustrup在贝尔实验室工作,他希望为C语言添加一些功能,以便更好地支持系统开发。这个愿望促使他创建了C++。 C++的名字来源于它的基因,其中的\\\"C\\\"代表了C语言,而\\\"++\\\"表示C语言的一个增强版本。这

    2024年02月07日
    浏览(49)
  • layui框架的一些基本使用

    目录  1.栅格系统  2.按钮  2.表单  3.表格  4.面板 5.时间线  6.选项卡  7.弹出层 8.数据表格  layui的优缺点以及使用layui前的准备 优点: LayUi作为一款国产开源的前端UI,简单易上手,并且UI简洁美观。本身目标对象是不怎么懂前端的后端开发人员,也适合后端人员使用。 (

    2024年02月05日
    浏览(34)
  • 【Python零基础学习入门篇①】——第一节:基本语法与变量

    ⬇️⬇️⬇️⬇️⬇️⬇️ ⭐⭐⭐Hello,大家好呀我是陈童学哦,一个普通大一在校生,请大家多多关照呀嘿嘿😁😊😘 🌟🌟🌟 技术这条路固然很艰辛,但既已选择,该当坚毅地走下去,加油! 🌤️PUA: ” 你所看到的惊艳都曾平庸历练 **“**🚀🚀🚀 🍉🍉🍉 最后让我

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

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

    2024年02月16日
    浏览(43)
  • layui入门使用文档(包含几个重要的组件)

    一、引言 :注意部分配置是用到了和jsp交互使用在HTML时需要修改 1.1 介绍 https://www.layuiweb.com/ 在官网首页,可以很方便的下载LayUI LayUI 是一款经典模块化前端 UI 框架,我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端页面的制作变得更加简单。 二、环

    2024年02月02日
    浏览(32)
  • Layui禁止表格部分复选框,layui禁止表格自带第一列复选框,layui禁止表格部分复选框,layui获取表格复选框选中数据

    禁止某些行可以勾选操作,及选中后的操作和行操作 执行一个table示例 cols 的第一列就是需要重写的复选框 其中templet: \\\"#toolCheck\\\"的标签块 监听全选重写 获取复选框选中的值,tempTableList当前列表返回的数组 以上即可! 监听行复选框点击(如果没有重写复选框就可以用) 标签

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

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

    2024年02月16日
    浏览(35)
  • 基本环境准备(第一节)

    基本环境准备(第一节) 2023年8月9日 16:37   1.安装Node.js; Windows 上安装 Node.js 你可以采用以下两种方式来安装。 1、Windows 安装包(.msi) 本文实例以 v0.10.26 版本为例,其他版本类似, 安装步骤:   步骤 1 : 双击下载后的安装包 v0.10.26,如下所示: 步骤 2 : 点击以上的Run(运行),将

    2024年02月13日
    浏览(41)
  • Layui 简单介绍及入门

    目录 一.Layui   (国产品牌)         1.1 Layui是什么 二.比较layui和easyui,bootstrap的区别         2.1 layui和bootstrap的对比         2.2 layui和easyui对比 三.Layui入门 四.案例        用我的话来说就是  不仅拥有easyui丰富的组件库,还拥有bootstrap 的美观,嘿嘿         l

    2024年02月15日
    浏览(31)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包