easyUI和bootstrap的混搭
<%@ 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>主页</title>
<link rel="stylesheet" type="text/css"
href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="http://www.w3cschool.cc/try/jeasyui/demo/demo.css">
<link rel="stylesheet"
href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript"
src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<script type="javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<script>
$(function(){
cover();
$(window).resize(function(){ //浏览器窗口变化
cover();
});
});
function cover(){
var win_width = $(window).width();
$('#subwrap').layout('panel', 'east').panel('resize',{width:win_width/3});
$('#subwrap').layout('resize');
}
</script>
<style>
.panel-title {
background-color: #F2F2F2;
padding: 0;
}
</style>
<body>
<div id="subwrap" class="easyui-layout" fit="true">
<div data-options="region:'north'" style="height: 70px">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">XXX管理系统</a>
</div>
<div class="collapse navbar-collapse navbar-right "
id="navbarCollapsr">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span
class="glyphicon glyphicon-home"></span> 首页</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list"></span>
咨询</a></li>
<li><a href="#"><span class="glyphicon glyphicon-fire"></span>
案例</a></li>
<li><a href="#"><span
class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div data-options="region:'south',split:true" style="height: 80px;"></div>
<div data-options="region:'east',split:true" title="east"></div>
<div data-options="region:'west',split:true" title="west"
style="width: 180px;"></div>
<div
data-options="region:'center',title:'main title',iconcls:'icon-ok',fit:true">
<table id="dg" class="easyui-datagrid"
style="width: 600px; height: 350px" toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add"
plain="true" onclick="newUser()">New User</a> <a href="#"
class="easyui-linkbutton" iconCls="icon-edit" plain="true"
onclick="editUser()">Edit User</a> <a href="#"
class="easyui-linkbutton" iconCls="icon-remove" plain="true"
onclick="destroyUser()">Remove User</a>
</div>
</div>
</div>
</body>
</html>
整合了一下入门范例。
easyUI和bootstrap的混搭的更多相关文章
- webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署
本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...
- python_way day17 html-day3 前端插件（fontawsome，easyui，bootstrap，jqueryui，bxslider，jquerylazyload），web框架
python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...
- 解决easyui和bootstrap兼容问题
在使用bootstrap和easyui的时候,发现很多有冲突的地方,包括datagrid控件和combo等,以下进行的问题修正,保证easyui正常显示 /*bootstrap兼容问题和easyui的 ...
- EasyUI与Bootstrap完美结合
注意点:版本问题.两者都是基于jQuery来构建,所以对于版本的选择要注意下
- Bootstrap框架的学习（一）
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
- EasyUI - 要引入的JS文件
引入的JS: 使用时候修改路径. <script src="../Quote/EasyUI/locale/easyui-lang-zh_CN.js"></scri ...
- Spring Boot 之整合 EasyUI 打造 Web 应用
SpringBootTutorial :: Web :: UI :: EasyUI EasyUI 是一个简单的用户界面组件的集合.由于 EasyUI 已经封装好大部分 UI 基本功能,能帮用户减少大量 ...
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- iOS项目iCloud及CloudKit Dashboard运用
CloudKit是苹果推出的基于iCloud的一个云端数据存储服务.其 主要由下面两部分组成: 一个仪表web页面,用于管理公开数据的记录类型. 一组API接口,用于iCloud和设备之间的数据传递. ...
- 5、项目间的沟通协调 - PMO项目管理办公室
沟通是人类所具备的优良而有一定技巧的一种方式.但是,沟通也是PMO项目管理办公室中所有项目组必须建立起来的能力,也是PMO项目管理办公室日常所需要进行的一项工作内容. 一.项目间的沟通: PMO项目管 ...
- Python脚本调用Django内容
一.添加系统的环境变量 1.需要引用os模块中environ关键字,其中'mybbs.settings'表示是django项目下的setings文件 eg: import os os.environ[ ...
- centos本地yum源安装
1.为DVD或U盘创建一个用于挂载的目录 [root@localhost ~]# mkdir /media/CentOS/ 2.查看DVD或U盘所在的路径 [root@localhost ~]# fd ...
- 前端开发必备！Emmet使用手册
介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...
- CentOS安装Apache-2.4.10+安全配置
注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. #准备工作# 在安装Nginx之前,请确保已经使用yum安装了各基础组件,并且配置了www用户和用户组,具体见<CentOS ...
- 安装TFS（2015）工作组模式代理服务器(Agent)
TFS的代理服务器(agent)用于持续集成编译和发布,为开发.测试团队和运维团队带来的非常便捷高效的发布和测试速度,许多企业和研发团队都在自己的研发测试平台中广泛使用这一技术. 在部署TFS代理服务 ...
- Caffe Python MemoryDataLayer Segmentation Fault
转载请注明出处,楼燚(yì)航的blog,http://home.cnblogs.com/louyihang-loves-baiyan/ 因为利用Pyhon来做数据的预处理比较方便,因此在data_l ...
- 设计 api, url 的原则
设计 api, url 的原则 做微信公众号的项目,账号体系使用微信的 openid.现在增加需求,要求适应 web 端--做成普通的 web 项目.然后 url 的变化:我想给现有的 url 加上 ...
- 搭建一套自己实用的.net架构(3)【ORM-Dapper+DapperExtensions】
现在成熟的ORM比比皆是,这里只介绍Dapper的使用(最起码我在使用它,已经运用到项目中,小伙伴们反馈还可以). 优点: 1.开源.轻量.小巧.上手容易. 2.支持的数据库还蛮多的, Mysql,S ...