LayUI 学习 01 —— 快速使用、页面元素
系列文章
LayUI 学习 01 —— 快速使用、页面元素
LayUI 学习 02 —— 内置组件
文章目录
- 系列文章
- 一、介绍
- 二、快速使用
- 三、页面元素
-
- 3.1、栅格系统
- 3.2、按钮
- 3.3、导航
- 3.4、选项卡
- 3.5、表格
- 3.6、表单
-
- 1、输入框
- 2、下拉框
- 3、复选框
- 4、开关
- 5、单选框
- 6、文本域
- 7、组装行内表单
- 8、表单方框风格
- 3.7、菜单
-
- 1、基础菜单
- 3.8、进度条
- 3.9、面板
- 3.10、徽章
- 3.11、时间线
- 3.12、辅助
- 3.13、管理系统界面布局
一、介绍
layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
总的来说，LayUI不会像使用Vue.js的ElementUI和iView那样前后端分离，而是类似Bootstrap将.css和.js放到自己项目使用。
二、快速使用
1、官网下载后解压，目录结构如下：
├─css //css目录
│ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心样式文件
├─font //字体图标目录
└─layui.js //核心库
2、将layui放入项目中。例如，我的Spring Boot项目就将LayUI解压的文件都放入static中（这是SpringBoot项目专门放静态资源的，如果是SSM就是resource里）。
3、LayUI基本都采取模块化开发，即要用什么功能就导入对应模块。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用 layuititle>
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<body>
<script src="../static/layui/layui.js">script>
<script>
/**
* 模块化加载和回调函数，这里都写在一个JS中
* layui.use(['模块1','模块2'], function(){这里写JS代码});
* 具体模块名要参考文档，后面我也会讲一些常用的。这里加载弹出层模块和表单模块
*/
layui.use(['layer', 'form'], function(){
//用的时候先定义一个变量来接受模块，后续就通过该变量来操控模块
var layer = layui.layer
,form = layui.form;
//使用弹出层模块，弹出一个消息
layer.msg('这是一个弹出层！！');
});
script>
body>
html>
三、页面元素
3.1、栅格系统
LayUI将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
栅格可以放入layui-container和layui-fluid容器中。
- 采用 layui-row 来定义行，如：
- 采用类似
layui-col-md*这样的预设类来定义一组列（column），且放在行（row）内。- md 代表的是不同屏幕下的标记
*代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12- 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行
- 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
- 可对列追加类似
layui-col-space5、layui-col-md-offset3这样的预设类来定义列的间距和偏移。 - 最后，在列（column）元素中放入自己的任意元素填充内容，完成布局！
下面简单举例：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用 layuititle>
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<body>
<div class="layui-container" >
常规布局（以中型屏幕桌面md为例）：
<div class="layui-row layui-col-space10">
<div class="layui-col-md6">
<div style="background-color: #00F7DE">6/12div>
div>
<div class="layui-col-md6">
<div style="background-color: #00F7DE">6/12div>
div>
div>
平板、笔记本的不同表现：
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md4" style="background-color: #5c52f7">
平板：6/12 | 笔记本：3/12
div>
<div class="layui-col-xs6 layui-col-sm12 layui-col-md4" style="background-color: #f761cb">
平板：6/12 | 笔记本：9/12
div>
div>
列嵌套：
<div class="layui-row">
<div class="layui-col-md6" style="background-color: #f7708e">
第一层
<div class="layui-row">
<div class="layui-col-md6" style="background-color: #d8f748">
第二层
<div class="layui-row">
<div class="layui-col-md6" style="background-color: #5887f7">
第三层
div>
div>
div>
div>
div>
div>
div>
body>
html>
在笔记本上的效果：
在iPad上的效果：
3.2、按钮
按钮使用非常简单，要用什么就找什么，直接用class选择器，同时还能加入图标。
注意：这里都是套用的官方提供的，强烈建议去看官方文档，包括颜色、图标以及动画都非常全面，文档
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 管理系统大布局 - Layuititle>
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>按钮主题legend>
fieldset>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary">原始按钮button>
<button type="button" class="layui-btn">默认按钮button>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮button>
<button type="button" class="layui-btn layui-btn-primary layui-border-cyan">边框按钮button>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>按钮尺寸legend>
fieldset>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-lg">大型按钮button>
<button type="button" class="layui-btn">默认按钮button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮button>
div>
<div style="width: 370px; margin: 0;">
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（即宽度最大化适应）button>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>灵活的图标按钮（更多图标请阅览：文档-图标）legend>
fieldset>
<div class="layui-btn-container">
<button type="button" class="layui-btn"><i class="layui-icon">i>button>
<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">i>button>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>还可以是圆角按钮legend>
fieldset>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮button>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>按钮组legend>
fieldset>
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加button>
<button type="button" class="layui-btn ">编辑button>
div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">i>button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">i>button>
div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">i>button>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>按钮容器legend>
fieldset>
<div class="layui-btn-container">
<button type="button" class="layui-btn">按钮一button>
<button type="button" class="layui-btn">按钮二button>
div>
body>
html>
效果：
3.3、导航
导航多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。需借助element模块才能使用。
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<body>
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9span>a>
li>
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot">span>a>
li>
<li class="layui-nav-item">
<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息a>dd>
<dd><a href="javascript:;">安全管理a>dd>
<dd><a href="javascript:;">退了a>dd>
dl>
li>
ul>
<ul class="layui-nav layui-nav-tree layui-nav-side" lay-shrink="all" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1a>dd>
<dd><a href="">跳转a>dd>
dl>
li>
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;">解决方案a>
<dl class="layui-nav-child">
<dd><a href="">移动模块a>dd>
<dd><a href="">后台模版a>dd>
dl>
li>
<li class="layui-nav-item"><a href="">产品a>li>
<li class="layui-nav-item"><a href="">大数据a>li>
ul>
<script src="../static/layui/layui.js">script>
<script>
layui.use('element', function () {
let element = layui.element;
})
script>
body>
html>
效果：
小导航（面包屑）
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<body>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">首页a>
<a href="">国际新闻a>
<a href="">亚太地区a>
<a><cite>正文cite>a>
span>
<script src="../static/layui/layui.js">script>
<script>
layui.use('element', function () {
let element = layui.element;
})
script>
body>
html>
效果：
3.4、选项卡
使用前需要导入element模块
选项卡的风格：
1、默认 layui-tab
2、简洁风格（追加class）： layui-tab-brief
3、卡片风格（追加class）： layui-tab-card
你可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<body>
<fieldset class="layui-elem-field layui-field-title">
<legend>卡片风格的Tablegend>
fieldset>
<div class="layui-tab layui-tab-card" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">选项1li>
<li>选项2li>
ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1div>
<div class="layui-tab-item">内容2div>
div>
div>
<script src="../static/layui/layui.js">script>
<script>
layui.use('element', function () {
let element = layui.element;
})
script>
body>
html>
效果：
3.5、表格
通常我们会写一列，然后利用循环将后台数据渲染到表格里，LayUI的表格还提供了排序等高级功能，这里先不说，后面用到table模块在用。
这里展示基本用法。
<table class="layui-table" lay-even lay-skin="row" lay-size="lg">
<colgroup>
<col width="70">
<col width="30">
colgroup>
<thead>
<tr>
<th>姓名th>
<th>性别th>
tr>
thead>
<tbody>
<tr>
<td>小白td>
<td>男td>
tr>
<tr>
<td>小红td>
<td>女td>
tr>
tbody>
table>
效果：
3.6、表单
需要先加载form模块，表单需要用class='layui-form'，且每个元素都要放一个独自的行区域块class='layui-form-item'中。
下面举例：
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">标签区域label>
<div class="layui-input-block">
表单元素
div>
div>
form>
1、输入框
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名label>
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入用户名"
lay-reqtext="用户名必须填" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交button>
div>
form>
- required：注册浏览器所规定的必填字段
- lay-reqtext=“用户名必须填”：如果不填，提交表单会提示该语句
- lay-verify：注册form模块需要验证的类型（后面会说如何验证）
- class=“layui-input”：layui.css提供的通用CSS类
- placeholder：默认提示语
- autocomplete=“off”：关闭自动填充
效果：
2、下拉框
<div class="layui-form-item">
<label class="layui-form-label">下拉框label>
<div class="layui-input-inline">
<select class="layui-select" lay-search lay-verify="">
<option value="" disabled selected>请选择option>
<optgroup label="组1">
<option value="1">内容1option>
optgroup>
<optgroup label="组2">
<option value="1">内容2option>
optgroup>
select>
div>
div>
效果：
3、复选框
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置*value=“1”*可自定义值，否则选中时返回的就是默认的on
<div class="layui-form-item">
<label class="layui-form-label">复选框label>
<div class="layui-input-block">
默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
div>
<div class="layui-input-block">
原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
div>
div>
效果：
4、开关
其实就是checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置*value=“1”*可自定义值，否则选中时返回的就是默认的on
<div class="layui-form-item">
<label class="layui-form-label">开关label>
<div class="layui-input-block">
<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
div>
div>
效果：
5、单选框
<div class="layui-form-item">
<label class="layui-form-label">单选框label>
<div class="layui-input-block">
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
div>
div>
效果：
6、文本域
添加一个样式class='layui-textarea'
<div class="layui-form-item">
<label class="layui-form-label">文本域label>
<div class="layui-input-inline">
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">textarea>
div>
div>
效果：
7、组装行内表单
class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围label>
<div class="layui-input-inline">
<input type="text" name="price_min" placeholder="￥" class="layui-input">
div>
<div class="layui-form-mid">-div>
<div class="layui-input-inline">
<input type="text" name="price_max" placeholder="￥" class="layui-input">
div>
div>
div>
效果：
8、表单方框风格
通过追加 layui-form-pane的class，来设定表单的方框风格。内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加pane属性。
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
div>
div>
form>
3.7、菜单
1、基础菜单
基础菜单本质就像ul li的嵌套，通常搭配面板layui-panel使用。
class="layui-menu"：表明是一个菜单lay-options="{id: 100, title: '', type: ''}"：菜单项参数，点击该项时会将参数传给回调函数。其中type是内部约定的，其他参数可随意命名。class="layui-menu-body-title"：表明是菜单标题class="layui-menu-item-divider"：一个分割线class="layui-menu-item-group layui-menu-item-down"：表明是一个菜单组，且默认向下展开class="layui-menu-item-parent" lay-options="{type: 'parent'}"：表明是横向父子菜单
<div class="layui-panel">
<ul class="layui-menu" id="docDemoMenu1">
<li lay-options="{id: 100}">
<div class="layui-menu-body-title">menu item 1div>
li>
<li lay-options="{id: 101}">
<div class="layui-menu-body-title">
<a href="#">menu item 2 <span class="layui-badge-dot">span>a>
div>
li>
<li class="layui-menu-item-divider">li>
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
<div class="layui-menu-body-title">
menu item 3 group <i class="layui-icon layui-icon-up">i>
div>
<ul>
<li lay-options="{id: 1031}">menu item 3-1li>
<li lay-options="{id: 1032}">
<div class="layui-menu-body-title">menu item 3-2div>
li>
ul>
li>
<li class="layui-menu-item-divider">li>
<li lay-options="{id: 104}">
<div class="layui-menu-body-title">menu item 4div>
li>
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
<div class="layui-menu-body-title">
menu item 5
<i class="layui-icon layui-icon-right">i>
div>
<div class="layui-panel layui-menu-body-panel">
<ul>
<li lay-options="{id: 1051}">
<div class="layui-menu-body-title">menu item 5-1div>
li>
<li lay-options="{id: 1051}">
<div class="layui-menu-body-title">menu item 5-2div>
li>
ul>
div>
li>
<li lay-options="{id: 106}">
<div class="layui-menu-body-title">menu item 6div>
li>
ul>
div>
效果：
3.8、进度条
进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。需要加载element模块
lay-percent ：代表进度条的初始百分比，你也可以动态改变进度，详见：进度条的动态操作
对父级元素设置属性 lay-showPercent=“yes” 来开启进度比的文本显示，支持：普通数字、百分数、分数。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。
class为 layui-progress-big 时，即为大尺寸的进度条风格
<div class="layui-progress layui-col-md2" lay-showPercent="yes">
<div class="layui-progress-bar" lay-percent="10%">div>
div>
<div class="layui-progress layui-col-md2 layui-progress-big">
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%">div>
div>
<div class="layui-progress layui-col-md2 layui-progress-big" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-blue" lay-percent="2/3">div>
div>
3.9、面板
1、常规面板
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-panel">
<div style="padding: 30px;">一个面板div>
div>
div>
div>
效果：
2、卡片面板
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">卡片面板div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
div>
div>
div>
div>
div>
效果：
3、折叠面板
<div class="layui-collapse lay-accordion">
<div class="layui-colla-item">
<h2 class="layui-colla-title">标题1h2>
<div class="layui-colla-content layui-show">内容1div>
div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">标题2h2>
<div class="layui-colla-content">内容2div>
div>
div>
<script src="../static/layui/layui.js">script>
<script>
layui.use('element', function(){
var element = layui.element;
});
script>
效果：
3.10、徽章
徽章是一个修饰性元素，有三种不同的风格类型：小圆点、椭圆体、边框体。常常和按钮、导航、选项卡等元素搭配。
<span class="layui-badge-dot">span>
<span class="layui-badge">6span>
<span class="layui-badge-rim">6span>
<button class="layui-btn">查看消息<span class="layui-badge">3span>button>
<ul class="layui-nav" style="text-align: left">
<li class="layui-nav-item">
个人中心 <span class="layui-badge-dot">span>
li>
ul>
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">网站设置li>
<li>邮件<span class="layui-badge">99+span> li>
ul>
div>
效果：
3.11、时间线
将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。
关于时间线，似乎也没有什么太多可介绍的东西。你需要留意的是以下几点
- 图标可以任意定义（但并不推荐更改）
- 标题区域并不意味着一定要加粗
- 内容区域可自由填充。
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon">i>
p>
div>
li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日h3>
<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳em>”的宏伟抱负。个人最爱的名篇有：p>
<ul>
<li>《登高》li>
<li>《茅屋为秋风所破歌》li>
ul>
div>
li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去div>
div>
li>
ul>
效果：
3.12、辅助
本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块
<blockquote class="layui-elem-quote">引用区域的文字1blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字2blockquote>
<fieldset class="layui-elem-field">
<legend>字段集区块 - 默认风格legend>
<div class="layui-field-box">
内容区域
div>
fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>字段集区块 - 横线风格legend>
<div class="layui-field-box">
内容区域
div>
fieldset>
赤色分割线
<hr class="layui-border-red">
橙色分割线
<hr class="layui-border-orange">
效果：
3.13、管理系统界面布局
layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。LayUI布局提供了一个管理界面，可以在其基础上布局我们自己的界面。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 管理系统大布局 - Layuititle>
<link rel="stylesheet" href="../static/layui/css/layui.css">
head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layout demodiv>
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">nav 1a>li>
<li class="layui-nav-item"><a href="">nav 2a>li>
<li class="layui-nav-item"><a href="">nav 3a>li>
<li class="layui-nav-item">
<a href="javascript:;">nav groupsa>
<dl class="layui-nav-child">
<dd><a href="">menu 11a>dd>
<dd><a href="">menu 22a>dd>
<dd><a href="">menu 33a>dd>
dl>
li>
ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
a>
<dl class="layui-nav-child">
<dd><a href="">set 1a>dd>
<dd><a href="">set 2a>dd>
dl>
li>
<li class="layui-nav-item"><a href="">Sign outa>li>
ul>
div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">menu group 1a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu item 1-1a>dd>
<dd><a href="javascript:;">menu item 1-2a>dd>
<dd><a href="javascript:;">menu item 1-3a>dd>
<dd><a href="">the linksa>dd>
dl>
li>
<li class="layui-nav-item">
<a href="javascript:;">menu group 2a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 2-1a>dd>
<dd><a href="javascript:;">list 2-2a>dd>
<dd><a href="">超链接a>dd>
dl>
li>
<li class="layui-nav-item"><a href="javascript:;">menu item 123a>li>
<li class="layui-nav-item"><a href="">the linksa>li>
ul>
div>
div>
<div class="layui-body">
<div style="padding: 15px;">内容主体区域div>
div>
<div class="layui-footer">
底部固定区域
div>
div>
<script src="../static/layui/layui.js">script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
script>
body>
html>
效果：
