layui前端框架

文章目录

---

​

导入layui

​​官网下载​​

官网地址：http://layui-doc.pearadmin.com/index.html

下载后解压

​​Django项目配置使用静态文件​​

在layui项目下创建static目录


settings文件添加如下内容

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

将解压后的layui目录移动到static目录下

常用类

​​导航栏显示​​

layui-nav-itemed  # 展开的样式类
layui-this      # 子菜单选中背景样式类

后台布局

官方文档：https://www.layui.com/doc/element/layout.html

打开官方示例

获取代码

复制代码到项目中的index.html文件中

修改两个路径


copy成功

然后就根据官网提供的示例去设计网页了

颜色

官网地址：https://www.layui.com/doc/element/color.html

栅格系统

官网地址：https://www.layui.com/doc/element/layout.html

面板

官网地址：https://www.layui.com/doc/element/panel.html

按钮

官网地址：https://www.layui.com/doc/element/button.html

表单

官网地址：https://www.layui.com/doc/element/form.html

上传文件

官网地址：https://www.layui.com/doc/modules/upload.html

表格

官网地址：https://www.layui.com/doc/element/table.html

数据表格

官网地址：https://www.layui.com/doc/modules/table.html

弹出层

官网地址：https://www.layui.com/doc/modules/layer.html