小汤学编程之JavaEE学习day06——LayUI_javaee如何导入layui-CSDN博客

├─css //css目录
│ │─modules //模块css目录
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件

入门案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
    <!-- 引入layui的样式 -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- 使用layUI的按钮样式-->
<button type="button" class="layui-btn">一个标准的按钮</button>

<script src="layui/layui.js"></script>
<script>
	/* 使用layUI的弹出层模块  */
	layui.use(['layer'], function(){
    
	  var layer = layui.layer; 
	  /* 弹出hello world提示 */
	  layer.msg('Hello World');
	});
	
</script> 
</body>
</html>

二、栅格布局

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- <div class="layui-fluid"> : 铺满   -->
<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9 layui-col-lg6 layui-bg-blue">
      你的内容 9/12
    </div>
    <div class="layui-col-md3 layui-col-lg6 layui-bg-red">
      你的内容 3/12
    </div>
  </div>
 </div>
</body>
</html>

采用 layui-row 来定义行，如：<div class="layui-row"></div>

列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

三、图标

方式一：<i class="layui-icon layui-icon-face-smile" ></i>
方式二：<i class="layui-icon"></i>

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标。

四、按钮

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。还可以与字体图标一起用，构成图标按钮。

1.按钮类型

<button type="button" class="layui-btn">一个标准的按钮</button>

<a href="http://www.bailiban.com" class="layui-btn">一个可跳转的按钮</a>

2.主题

主题	类型
class=“layui-btn layui-btn-primary”	原始按钮
class="layui-btn	默认按钮
class=“layui-btn layui-btn-normal”	百搭按钮
class=“layui-btn layui-btn-warm”	暖色按钮
class=“layui-btn layui-btn-danger”	警告按钮
class=“layui-btn layui-btn-disabled”	禁用按钮

3.尺寸

尺寸	类型
class=“layui-btn layui-btn-lg”	大型按钮
class="layui-btn "	默认按钮
class=“layui-btn layui-btn-sm”	小型按钮
class=“layui-btn layui-btn-xs”	迷你按钮
class=“layui-btn layui-btn-fluid”	流体按钮（最大化适应）

4.圆角

class="... layui-btn-radius ..."

5.按钮组

<div class="layui-btn-group"></div>

五、后台布局

LayUI提供了一套布局的模板，可以直接拿来用作后台的页面布局。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a