<%@ 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的混搭的更多相关文章

  1. webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署

    本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...

  2. python_way day17 html-day3 前端插件（fontawsome，easyui，bootstrap，jqueryui，bxslider，jquerylazyload），web框架

    python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...

  3. 解决easyui和bootstrap兼容问题

    在使用bootstrap和easyui的时候,发现很多有冲突的地方,包括datagrid控件和combo等,以下进行的问题修正,保证easyui正常显示 /*bootstrap兼容问题和easyui的 ...

  4. EasyUI与Bootstrap完美结合

    注意点:版本问题.两者都是基于jQuery来构建,所以对于版本的选择要注意下

  5. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  6. <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫

    并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...

  7. EasyUI - 要引入的JS文件

    引入的JS: 使用时候修改路径. <script src="../Quote/EasyUI/locale/easyui-lang-zh_CN.js"></scri ...

  8. Spring Boot 之整合 EasyUI 打造 Web 应用

    SpringBootTutorial :: Web :: UI :: EasyUI EasyUI 是一个简单的用户界面组件的集合.由于 EasyUI 已经封装好大部分 UI 基本功能,能帮用户减少大量 ...

  9. easyUI 数据表格datagrid的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. HTML5-电影影评网

    学习完了HTML5的新标签,然后结合之前的案例做了第一个小案例.自我感觉良好.下面我来展示一下图片 这是我浏览其他网站的时候以为发现的新功能可以运行代码,这是运行之后截得图片.自我感觉照片还是蛮高大上 ...

  2. Java中的经典算法之冒泡排序(Bubble Sort)

    Java中的经典算法之冒泡排序(Bubble Sort) 神话丿小王子的博客主页 原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一 ...

  3. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

  4. Hibernate 系列 03 - 使用Hibernate完成持久化操作

    引导目录: Hibernate 系列教程 目录 康姆昂,北鼻,来此狗.动次打次,Hibernate继续走起. 目录: 使用Hibernate实现按主键查询 使用Hibernate实现数据库的增.删.改 ...

  5. VMware的三种网络连接方式区别

    关于VMware的三种网络连接方式,NAT,Bridged,Host-Only ,在刚接触的时候通常会遇到主机Ping不通虚拟机而虚拟机能Ping得通主机:主机与虚拟机互不相通等等网络问题.本文就这三 ...

  6. sql面试题（学生表_课程表_成绩表_教师表）

    原帖链接:http://bbs.csdn.net/topics/280002741 表架构 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程 ...

  7. javascript函数setInterval和setTimeout的使用区别详解

    setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...

  8. xml类型使用注意事项

    xml 的数据类型在平常的开发也是很常用的,燃鹅.也是有一些地方需要留意.今天我就分享几个测试的例子. 使用 xquery.exist (有但不仅仅限于)的注意事项.通常使用来判断节点是否存在,值是否 ...

  9. Java 加解密技术系列文章

    Java 加解密技术系列之 总结 Java 加解密技术系列之 DH Java 加解密技术系列之 RSA Java 加解密技术系列之 PBE Java 加解密技术系列之 AES Java 加解密技术系列 ...

  10. 《WePayUI组件设计的秘密》——2016年第一届前端体验大会分享

    本文是博主参加第一届前端体验大会 | 物勒工名做的分享<WePayUI组件设计的秘密>,内容主要分为2个部分: 一.浅析UI库/框架的未来 讨论的UI库或者框架,主要包含展示和交互的css ...