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 ...
随机推荐
- android常用框架收录
1.Volley.Retrofit 网络框架2.ormlite.GreenDao数据库框架3.AndroidAnnotations.butterknife.Dagger注解框架4.响应式编程 R ...
- 利用sphinx为python项目生成API文档
sphinx可以根据python的注释生成可以查找的api文档,简单记录了下步骤 1:安装 pip install -U Sphinx 2:在需要生成文档的.py文件目录下执行sphinx-apido ...
- Python中获取当前日期的格式
在Python里如何获取当前的日期和时间呢?在Python语言里,我们可以通过调用什么模块或者类函数来得到当前的时间或日期呢? 当然你可以使用时间模块(time module),该模块提供了各种和时间 ...
- python3: error while loading shared libraries: libpython3.5m.so.1.0: cannot open shared object file: No such file or directory
安装python3遇到报错: wget https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgz ./configure --prefix=/u ...
- 微信app支付 ci框架做的
/** * 组合微信app支付 获得prepayid * @param int $order_num */ private function _wxpay_reques ...
- HAProxy介绍
简单说明 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需 ...
- LAMP环境配置 linux+apache+mysql+php
虚拟机安装Linux系统: 新建虚拟机过程中选择Linux,下面选择centos或者是Ubuntu Linux切换图像命令:注意只有装了图像界面才可以切换 查看安装环境的版本: rpm -qa 查看安 ...
- Linux ——————用Secure传文件时直接拖了文件用的是AssIC导致linux那边直乱码
如下: 解决办法: 直接删除.
- 010商城项目：商品类目的选择——Dao,Service.Action层的分析
我们现在开始写商品类选择这个功能: 先看效果: 当我们点击"新增商品"---->"选择目录"然后从数据库中查出来数据并显示了. 我们分析数据库的那张表: ...
- mac机上搭建php56/nginx 1.8.x/thinkphp 3.2.x/gearman扩展/seaslog扩展/redis扩展环境
php的各种扩展配置起来实在不容易,记录一下备忘: 一.php56 安装 虽然php7出来了,但是没用过,不知道有没有坑,这里仍然使用php5.6版本 1.1 安装php/php-pfm brew u ...