layui前端web开发框架

whatistheanswer

已于 2022-09-01 09:11:11 修改

阅读量488

点赞数

分类专栏： Web前端开发文章标签： layui ui css

于 2022-08-29 14:26:40 首次发布

本文链接：https://blog.csdn.net/whatistheanswer/article/details/125800215

版权

layui是一款优秀的前端开发框架，提供了栅格布局、导航等多种页面元素。本文将介绍layui的下载与使用，以及如何实现栅格布局和导航。在栅格布局中，layui采用行列方式，通过layui-container、layui-row和layui-col-md等类实现响应式布局。同时，layui的导航功能包括水平导航和垂直导航，如layui-nav、layui-nav-item、layui-nav-child等元素，可用于构建后台管理系统。

摘要由CSDN通过智能技术生成

layui前端开发框架

1下载与使用

官网地址：https://layuion.com/
layui文件目录结构

layui
- css
  - layui.css
- font
- image
- lay
  - modules(加载模块)
  - dest
- layui.js

2页面元素

1栅格布局

采用行列的整体页面布局方式，具体使用步骤如下

在div标签的类选择器中加入layui-container
row定义列完整定义layui-row（使用同上）
行的定义有三种类型xs,sm,lg三种根据屏幕自适应，完整定义类似于layui-col-md（使用同上）

2导航

水平导航（依赖加载模块element）
导航栏定义layui-nav
一级标题layui-nav-item
二级标题layui-nav-child

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<link rel="stylesheet" type="text/css" href="./css/layui.css">
	<title></title>
</head>
<body>
	<ul class