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中的各种id
 网卡Mac地址会随机化 
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ②)
距上一篇博客"APP引导页的高度集成 - DHGuidePageHUD - ①"的发布有一段时间了, 后来又在SDK中补充了一些新的内容进去但是一直没来得及跟大家分享, 今天来跟大 ...
- MAC的SVN怎么设置允许.a文件上传
首先在mac中svn的安装会去选择Cornerstone 如果遇到这个问题肯定是已经安装并准备上传.a 文件了.首先要清楚svn是默认过滤忽略.a文件的上传的,要想可以上传.a 可以通过这个简单的方法 ...
- TiQuery
TiQuery 是一个基于JQuery 的在Titanium上使用的 javascript 库 TiQuery 为TI 提供了很快捷的方法: // Utilities $.info('My messa ...
- linux 安装mysql数据库——tar.gz包解压安装法
mysql数据库有多种安装方式,本文只介绍在Linux服务器上的tar.gz包解压安装法, 先通过mysql官网或者网络资源下载 mysql-5.7.3-m13-linux-glibc2.5-x86_ ...
- ubuntu系统安装初始化脚本
ubuntu系统安装初始化脚本 经常安装卸载ubuntu,每次系统安装完成后要安装好多软件,一个个命令输很麻烦浪费时间,一个sh文件全搞定! 1. flashplayer下载:点击这里 2. Auda ...
- ubuntu中用户使用的shell如何指定
在机器上给同事开了一个账号,结果ssh登陆后,补全,高亮都没有,但是我自己的账号都可以．首先怀疑是.bashrc文件设置有问题,对比2个用户目录的这个文件并未发现可以的地方．搜索得知可能是所使用的sh ...
- Dom探索之基础详解
认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...
- 【转】前端工程师必须了解的 谷歌 HTML/CSS 规范
背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...
- C#把 DataTable转换为Model实体
public static List<T> GetModelFromDB<T>( DataTable dt ) { List<T> data = new List& ...