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 ...
随机推荐
- Git从码云Clone代码到本地
Git从码云或者Github 克隆代码到本地 1.下载安装Git,傻瓜式下一步下一步即可... 2.配置Git: 2.1.选择你要clone到本地的路径:右键--->$ Git Bash Her ...
- 如何写出高质量的技术博客 这边文章出自http://www.jianshu.com/p/ae9ab21a5730 觉得不错直接拿过来了 好东西要大家分享嘛
如何写出高质量的技术博客?答案是:如果你想,就一定能写出高质量的技术博客.看起来很唯心,但这就是事实.有足够愿力去做一件目标明确,有良好反馈系统的事情往往很简单.就是不停地训练,慢慢地,你自己 ...
- Java 发送邮件
使用Java应用程序发送E-mail十分简单,但是首先你应该在你的机器上安装JavaMail API 和Java Activation Framework (JAF) . 你可以在 JavaMail ...
- Windows 10不能拨L2TP协议的VPN
之前是Windows 10版本1607版本14393.102升级14393.187过后,突然出现不能拨公司防火墙的L2TPVPN了. 网上众说纷纭,原来遇到这个问题的人真不少,不过我是第一次遇到.结合 ...
- jni操作jobject
一. 注册JNI函数 1. 静态方法 一般使用javah进行编译,生成很长的文件名和函数名字,这个书写不方便,影响运行效率. 2. 动态注册 使用JNINativeMe ...
- HAProxy介绍
简单说明 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需 ...
- openstack七大模块概述
前言 OpenStack主要由七部分组成,分别是Identify, Image, Network, Compute, Block Storage, Object Storage, Dashboard, ...
- GDB 完全教程
一.简介 GDB是一个功能强大的调试器,它是一个自由软件,能够用在许多UNIX平台上.它同时也是Linux系统中的默认调试器.GDB已被移植到许多其他的计算机平台上,并且能够用于调试嵌入式实时系统.一 ...
- 010商城项目：商品类目的选择——Dao,Service.Action层的分析
我们现在开始写商品类选择这个功能: 先看效果: 当我们点击"新增商品"---->"选择目录"然后从数据库中查出来数据并显示了. 我们分析数据库的那张表: ...
- [LeetCode] Validate IP Address 验证IP地址
In this problem, your job to write a function to check whether a input string is a valid IPv4 addres ...