为了引入移动端,加入响应式设计,ITOO V4.0项目web前端将从EasyUI向BootStrap过渡。
easyUI核心是封装好的JS代码,看上去规范整洁, BootStrap必须采用html5,核心是动态CSS(less),页面看上去扁平化,绚丽。下面是两者的对比图:
虽然页面风格迥异,但是两者学起来的套路基本相同。
1.官网是最好的学习利器,权威,具有针对性。
2.把控件抽象出来,直接封装复用就行。
3.只需修改MVC中的视图层即可。
代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮</title> <link href="../../BootStrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /> <meta name="viewport" content="width=device-wdith,initia-scale=1.0"> <!--[if lt IE 9]> <script src="http://html$shim.googlecode.com/svn/trunk/html5.js"></script>> <!--[endif]--> </head> <body> <script src="../../BootStrap/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> <script src="../../BootStrap/bootstrap-3.3.5-dist/js/bootstrap.js"></script> <script src="../../BootStrap/bootstrap-3.3.5-dist/js/bootstrap-dropdown.js"></script>@*下拉*@框 <div class="container"> <h1 class="page-header">按钮<small>按钮的基本样式</small></h1> <div> 常规按钮 </div> <button type="button" class="btn btn-sm"> <span class="glyphicon " aria-hidden="true"></span>小按钮 </button> <button type="button" class="btn "> <span class="glyphicon " aria-hidden="true"></span>常规按钮 </button> <button type="button" class="btn btn-lg "> <span class="glyphicon " aria-hidden="true"></span>大按钮 </button> <div> 带图标按钮 </div> @*带图标按钮*@ <div> <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加 </button> <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除 info </button> <button type="button" class="btn btn-success"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭 success </button> <button type="button" class="btn btn-warning"> <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>导入 warning </button> <button type="button" class="btn btn-danger"> <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>导出 danger </button> <button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询 primary </button> <button type="button" class="btn btn-inverse"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>刷新 inverse </button> </div> @*按钮组*@ <div> 按钮组 </div> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> @*下拉框*@ <div> 下拉框 </div> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 新生需求 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">后台配置</a></li> <li><a href="#">新生报到</a></li> <li><a href="#">报表分析</a></li> </ul> </div> </div> </body> </html>
最后总要墨迹几句,看到BootStrap让我对我们新生的页面重燃希望,4.0一定要做的炫彩纷呈,手机电脑都能自适应。
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文地址:http://blog.csdn.net/wangmei4968/article/details/47405671