ui框架主流
easyui
由jQuery和html4组成，一般用来做后台的管理界面
优点：
1、代码简洁；
2、比较稳定；
3、组件比较丰富；
4、免费
缺点：
不美观，不支持响应式。
bootstrap
由jQuery和html5组成
优点：
1、界面美观；
2、免费；
缺点：
bootstrap不是免费的，代码量多，不易于维护
layui
优点：
1、免费；
2、界面美观；
缺点：
layui稳定性不如easyui,有bug
为什么学习easyui?
1、从金钱的角度上，开发首先会排除掉bootstrap
2、从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要
优于layui
3、从公司的角度考虑选用那个框架：
easyui成本、公司的后端技术人员前端功底、前端的社区活跃度
easyui布局示例
效果
代码
在WebContent文件夹下新建一个static文件夹，用来放js，css，images。
然后在js文件夹下导入依赖文件
新建一个index,jsp放内容
首先在head标签中导入js文件以及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">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!--组件库源文件的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
导入顺序：
easyui.css—>icon.css–>jquery.min.js—>jquery.easyui.js
如果顺序不对，效果可能出不来。
body中的内容
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'"></div>
</body>
结果：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
