easyui、BootStrap以及layui的区别和easyui入门

easyui入门

  • easyui、BootStrap以及layui的区别
    • easyui
    • BootStrap
    • layui
  • easyui入门

easyui、BootStrap以及layui的区别

easyui

由 jquery+html4 组合,用来做后台的管理界面
优点:

  • 学习文档的完整性
  • 前端框架的稳定性
  • 组件的丰富性
  • 免费

**缺点:**easyui的界面效果是不美观,不支持响应式

BootStrap

由 jquery+html15 组合
优点:

  • 支持响应式
  • 界面比较美观
  • 容易上手

**缺点:**不是免费的,框架很多都是模块化,但你的代码过多,维护比较麻烦

layui

优点:

  • 免费
  • 界面比较美观
  • 学习文档也是比较全面,但比不过easyui

**缺点:**组件有很多都是平台开发出去让别人写,就有可能出现一些bug,稳定性没有easyui好

easyui入门

先创建一个项目
在WebContent中,创建一个Folder,命名为static,在static文件夹中创建静态资源(js,css,images)文件夹
easyui、BootStrap以及layui的区别和easyui入门_第1张图片
easyui、BootStrap以及layui的区别和easyui入门_第2张图片
easyui、BootStrap以及layui的区别和easyui入门_第3张图片

在js中导入依赖
easyui、BootStrap以及layui的区别和easyui入门_第4张图片

代码:

<%@ 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">
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   

<!--组件库源文件的js文件  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   

<title>登录后的主界面</title>
</head>
<body class="easyui-layout">

		<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">xxx管理系统</div>
		<div data-options="region:'west',split:true,title:'目录'" style="width:150px;padding:10px;">菜单管理</div>
		<div data-options="region:'east',split:true,collapsed:true,title:'右边'" style="width:100px;padding:10px;">east region</div>
		<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">版权信息</div>
		<div data-options="region:'center',title:'内容'"></div>

</body>
</html>

界面效果图:

easyui、BootStrap以及layui的区别和easyui入门_第5张图片

css样式代码中的路径不要写错

<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   

<!--组件库源文件的js文件  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static1/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   

不然会出现下面这种情况
easyui、BootStrap以及layui的区别和easyui入门_第6张图片
在浏览器上按F12(fn+F12)调出控制台可以看到
easyui、BootStrap以及layui的区别和easyui入门_第7张图片
说找不到jquery.easyui.min.jsp就说明路径错了

你可能感兴趣的:(easyui、BootStrap以及layui的区别和easyui入门)