layui框架简单解读,为什么要使用layui框架,layui框架的好处,后端程序员快速学习掌握layui框架技术型文档博文,layui学习笔记,快速掌握前端技术框架

于是我们可以通过以下进行调整,在技术文档中

在这里插入图片描述

看标记,那一列有一个md,md就是我们之前写的div引用布局时写的,我们可以根据不同的设备进行更改即可在这里插入图片描述

但是我们一直这样修改,岂不是很麻烦,所以,我们可以直接在class内,直接在md9之后,添加一个空格,再写一个,只不过这个就不要时md了,可以换其他设备,这样就可以在多台设备进行添加

在这里插入图片描述

7、管理系统界面布局

=========================================================================

我们管理系统,其实大体都差不多,都是上面有一个导航栏,左边有一个目录栏,右边有一个主题,可能最下面还有一个尾栏,

技术文档内就有指出:

在这里插入图片描述

代码实现:

栅格系统

123

123

123

示例布局已经做好,现在要添加颜色, 之前我们是按照原先的div的颜色标签进行添加颜色的,其实在框架内部,提供了颜色:

在这里插入图片描述

在这里插入图片描述

添加代码后的颜色是这样:来看下效果:

在这里插入图片描述

发现并不尽人意,那是因为,主体部分我们并没有限定高度,但是限定高度仍属于div的属性,子啊框架中,我们可以通过layui-layout-admin解决,他会自动生成管理系统布局:

在这里插入图片描述

那此刻我们的管理系统布局已经做好了:

在这里插入图片描述

左边的空白部分是菜单,我们暂时可以忽略;

| | |

| — | — |

说实现,现在已经凌晨一点07分了,真晚了,真不想在写了;再写一点,今晚先发布出去,等之后在添加改吧,唉,苦逼的编程生活

| | |

| — | — |

8、按钮组件

=====================================================================

我们一开始使用的示例,就是由框架生成的按钮的效果

在这里插入图片描述

代码演示:

栅格系统

一个标准的按钮

a标签的按钮

span标签的按钮

在这里插入图片描述

我们普通的框架按钮,作用在其他元素上,都可以生成按钮

除了这些,还有一些其他格式的按钮,我们只需要添加不同的class就可以了,就不再一一展示了

在这里插入图片描述

在这里插入图片描述

这些按钮添加响应的class即可,下面讲一下图标按钮的使用

8.1、图标按钮的使用


在我们的文档中就有描述在这里插入图片描述

如何才能把 图标和按钮组合起来呢,主要由两个方法:

class引入:

在这里插入图片描述

效果:

在这里插入图片描述

想要更换,更换后面的样式即可

在这里插入图片描述图标下面的就是:

另外一种就是使用样式上面的那一段文字:

在这里插入图片描述

具体使用如下:

在这里插入图片描述

只不过是早之前的版本,推荐使用class那个

| | |

| — | — |

9、导航栏

====================================================================

导航栏再前端的应用中非常广泛,通常我们再使用平台,进行不同页面的切换,导航栏可以简洁高效的实现效果:

代码演示:

在这里插入图片描述

栅格系统
    • java
    • python
    • C
    • C++
    • 运行效果:

      在这里插入图片描述

      9.1、解决效果问题


      可以看到,我们只是创建了一个导航栏,并没有其他的属性,在这里显得不自然,那么我们可以再li标签内部添加一个a标签,包裹选项:

      在这里插入图片描述现在就好看很多:

      在这里插入图片描述

      9.2、默认选项


      再我们的导航栏中,可能再实际的项目展示的过程中,可能需要默认选中某一个选项:

      在这里插入图片描述在这里插入图片描述

      9.3、实现导航栏的二级菜单


      再导航栏中,我们可以对选项添加子选项,也就是二级菜单,如果我们想哪个菜单下面添加菜单,就直接再a标签中添加dl标签即可:如:

      在这里插入图片描述

      效果:

      在这里插入图片描述

      9.4、模块的使用事项


      我们再使用这个模块的时候,需要导入模块:

      在这里插入图片描述

      其实即使我们不导入模块,我们的导航栏效果照样可以实现,但也仅仅只能实现效果,无法对导航进行功能操作

      如果需要导入多个模块,如下:

      在这里插入图片描述

      9.5、导航中徽章的使用(消息提示效果)


      我们在网站中经常发发现某些提示的效果,比如我们在csdn的时候,如果有人评论点赞了我们的文章,那么消息那一栏就会出现一个小红点,这个效果在layui的徽章中可以实现:

      在这里插入图片描述

      在我们的文档中就有指明徽章的使用:

      在这里插入图片描述

      在这里插入图片描述

      我们要想使用徽章,直接把相关的样式直接扔到a标签内就行了:

      在这里插入图片描述

      代码演示:在这里插入图片描述

      在这里插入图片描述

      9.6、导航更换主题


      我们的导航默认应该是藏青色,想换其他颜色,也是可以的

      在这里插入图片描述

      水平导航有三种 主题,垂直的只有默认的一种

      ,如果想要更换,直接把对应的方法调用即可,我们的导航引入是用ul标签,直接在ul标签使用即可

      代码演示:

      在这里插入图片描述

      在这里插入图片描述

      当然,也不知也三种,如果想用其他颜色,可以后面的代码即可

      在这里插入图片描述在这里插入图片描述

      在这里插入图片描述

      9.7、垂直导航、菜单效果


      在我们的管理系统中,左侧都会有一个菜单栏,我们通过导航也可以实现,在ul标签内添加layui-nav-tree即可:

      在这里插入图片描述

      在这里插入图片描述

      目前的菜单也只是导航 自适应的效果,我们还可以添加layui-nav-side实现导航布满左侧的效果

      在这里插入图片描述

      在这里插入图片描述

      9.8、垂直导航二级菜单点不出来效果


      当我们点击左边的二级菜单,他会直接刷新页面,我们可以把设置a标签,让他不再转跳

      在这里插入图片描述

      完整代码:

      栅格系统
      • java
      • python
      • 99+

      • C
      • 移动模块
        后台模版
        电商平台

      • C++
        • java
        • python
        • 99+

        • C
        • 移动模块
          后台模版
          电商平台

        • C++
        • | | |

          | — | — |

          10、选项卡的使用

          ========================================================================

          选项卡就是当我们点击菜单或者导航时,主体窗口会出现不同的效果,这个就是选项卡

          在这里插入图片描述

          代码展示:

          在这里插入图片描述

          他们之间的联系时一一对应的,下面的第一个内容对应的上面第一个标签;还有选项卡的大小是根据内容的多少进行匹配的,如果想要设定选项卡的大小,直接在选项卡中设置高度即可

          效果:

          在这里插入图片描述我们点击哪个,就会跳到哪个选项卡

          10.1、细节添加


          在这之前,我们的选项卡的选项点击效果不是特别明显,我们可以添加layui-tab-brief,实现效果:

          在这里插入图片描述

          在这里插入图片描述

          字体会变颜色,另外还可以出现一个指示栏,这样效果就可以展示的更加明显

          10.2、选项后面添加X


          我们在有些应用上,我们可以关闭某些选项,点击后面的X就可以了,layui就可以实现,我们只需要添加一串代码即可lay-allowClose=“true”

          在这里插入图片描述在这里插入图片描述

          点击X就可以关闭;

          | | |

          | — | — |

          11、form表单的使用(重点)

          ===============================================================================

          在我们学习基础的jsp的时候,基本上我们都会手敲form表单,但展示美观一般,在框架它自身就有表单

          在这里插入图片描述

          代码演示:需要导入form模块

          在这里插入图片描述

          之后需要使用form的标签,并指定class

          栅格系统

          立即提交

          重置

          在这里插入图片描述

          11.1、指定输入框长度


          默认div就是自适应屏幕的,如果我们想要指定,只能通过手动设置在这里插入图片描述

          11.2、提交按钮的两种方法:


          除了刚刚在文中注释的,还有一种提交方法

          当然,只要在指定layui的div中不写的话他也会默认提交,这是第一种方法,在这里插入图片描述

          第二种方法,就是把提交这个功能直接交给layui进行管理,添加lay-submit在这里插入图片描述

          11.3、 表单验证


          之前我们大都是通过span标签与jq进行表单验证的,示例:如果不使用之前那种导入jq的方法,也可以使用如下方法

          在这里插入图片描述

          在这里插入图片描述

          之前的方式仍然可以使用,同时我们也可以使用layui中的在这里插入图片描述

          在这里插入图片描述

          我们也可以通过表单项的值获取输入的值

          在这里插入图片描述在这里插入图片描述

          在这里插入图片描述

          11.4、实现ajax的请求发送


          如果我们想要实现ajax发送,那我们需要把提交按钮改成type=“button”,另外把lay-submit lay-filter="formDemo"去掉,添加id

          在这里插入图片描述在这里插入图片描述

          在这里插入图片描述

          11.5、表单中的各个选项及其注意事项


          11.5.1、required必填项

          如果我们设置某个文本框设置位必填项,我们之前就会通过表单验证的形式,以及span的方式,现在layui只需要添加required即可

          在这里插入图片描述

          在这里插入图片描述

          另外我们还可以更换校验的格式,之前写的required可以删掉

          在这里插入图片描述

          在这里插入图片描述

          除了这些,我们也可以进行其他校验,比如手机号,邮箱等:

          在这里插入图片描述

          11.5.2、placeholder初始文本提示

          在这里插入图片描述

          在这里插入图片描述

          11.5.3、autocomplete="off"历史记录是否展示

          添加off就是不默认展示

          如果是on就会出现以下效果:在这里插入图片描述

          在这里插入图片描述

          11.5.4、密码

          密码跟之前一样,改type:password

          11.5.5、下拉框

          北京 上海 广州 深圳 杭州

          在这里插入图片描述

          同时也支持分组:

          请选择 你工作的第一个城市? 你的工号? 你最喜欢的老师?

          在这里插入图片描述

          另外对于如果选项多的话,我们也可以通过添加lay-search对选项进行搜索

          在这里插入图片描述

          在这里插入图片描述

          11.5.6、复选框

          在这里插入图片描述

          11.5.7、开关

          在这里插入图片描述

          只有用户是开启的状态,我们才可以获取里面的值,可以直接使用value

          11.5.8、单选框

          在这里插入图片描述

          在这里插入图片描述

          11.5.9、文本域

          在这里插入图片描述基本上和之前使用一样

          在这里插入图片描述

          11.6、组装行内表单


          为了可以模范模拟查询的样式,所以有了组装行内表单

          在这里插入图片描述

          在这里插入图片描述

          在这里插入图片描述

          | | |

          | — | — |

          12、弹出层

          =====================================================================

          在这里插入图片描述

          需要加载模块

          在这里插入图片描述

          在这里插入图片描述

          弹出层出现小图标

          最后

          除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

        • 5
          点赞
        • 4
          收藏
          觉得还不错? 一键收藏
        • 3
          评论

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

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

        请填写红包祝福语或标题

        红包个数最小为10个

        红包金额最低5元

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

        抵扣说明:

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

        余额充值