easyui,Bootstrap以及Layui的对比,EasyUi的入门

easyui

  • ui框架
    • easyui
    • BootStrap
    • LayUi
  • esayui Layout布局示例
    • 结果
    • 代码
  • 总结

ui框架

ui框架主流有三种:

easyui

由jQuery和html4组成,一般用来做后台的管理界面

特点/优势:

  • easyui的学习资料比较饱和。(在他们官网里可看)
  • 代码比较简洁
  • easyui简化了代码,只需要通过编写一些简单HTML标记,就可以定义用户界面。
  • 有强大的数据交互功能
  • 比较稳定
  • 组件比较丰富
  • easyui节省很多网页开发的时间和规模。
  • easyui很简单但功能强大的
  • 免费

缺点是不怎么美观,看起来不像一个网页,所以常用于后台的管理界面,而且不支持响应式。

BootStrap

特点/优势:

  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

  • 所有的主流浏览器都支持 Bootstrap。

  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。

  • Bootstrap 的响应式设计 CSS 能够自适应于台式机、平板电脑和手机。

  • 它包含了功能强大的内置组件,易于定制。

  • 它还提供了基于 Web 的定制。

  • 界面也比较美观

缺点是它不是免费的,而且由于框架很多都是模块化的,当你的网站比较多样化,界面复杂的话就不太适合使用,因为此时您需要大量重写代码,维护比较麻烦,也失去了使用框架的意义。

LayUi

特点/优势:

  • 界面效果比较美观

  • 免费

  • 学习文档也比较全面,但完整性不如easyui

  • 是现在企业使用的ui框架里的大头

  • 可以直接在官网里copy框架的源码。

缺点是有很多组件是平台开发出去让别人写的,就可能存在一些小问题,小bug,稳定性也没有easyui好。

综上所述
从金钱的角度上,开发首先会排除掉bootstrap
从学习文档的完整性、前端框架的稳定性,组件的丰富性考虑,easyui都要
优于layui
一般用easyUI做系统级项目(企业级项目),用bootstrap做网站类项目。
那像我们这种还要学习的话,肯定优先选择学习文档完整性较高的ui框架了。

所以我们今天主要来讲一讲easyui的入门。

esayui Layout布局示例

结果

先放一成品:
easyui,Bootstrap以及Layui的对比,EasyUi的入门_第1张图片

代码

然后放代码:
先建一个web项目
在WebContent文件夹下新建一个Folder文件,取名static,用来放静态资源(js,css,images)
easyui,Bootstrap以及Layui的对比,EasyUi的入门_第2张图片
easyui,Bootstrap以及Layui的对比,EasyUi的入门_第3张图片
然后在js文件夹下导入依赖
easyui,Bootstrap以及Layui的对比,EasyUi的入门_第4张图片
新建一个页面index.jsp
在head标签中导入js文件以及css文件
注意:这里导入js文件时,一定顺序不要错还有路径名不要错,不然就会效果出不来,如下图:
easyui,Bootstrap以及Layui的对比,EasyUi的入门_第5张图片
在这里插入图片描述

<!-- 写全局样式 -->
<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>   

然后写主体代码:

<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">这里可以放logo</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;">右边</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">这里放版权信息</div>
	<div data-options="region:'center',title:'内容'">这里可以放内容</div>
</body>

最后验证一下是否成功就完啦~

总结

Layout布局是EasyUi的基础,希望看完我这篇博客,可以对你们有帮助,bǎi bài~
在这里插入图片描述

你可能感兴趣的:(easyui,Bootstrap以及Layui的对比,EasyUi的入门)