<%@ 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. Android无需申请权限拨打电话

    Android打电话有两种实现方法: 第一种方法,拨打电话跳转到拨号界面.源代码如下: Intent intent = new Intent(Intent.ACTION_DIAL); Uri data ...

  2. Android中webView和网页的交互

     Android中webView和网页的交互 Android中webView跟网页的交互式通过JavaScript进行的.具体步骤: 1.创建JavaScript,在点击的时候调用JavaScript ...

  3. 常见排序算法(附java代码)

    常见排序算法与java实现 一.选择排序(SelectSort) 基本原理:对于给定的一组记录,经过第一轮比较后得到最小的记录,然后将该记录与第一个记录的位置进行交换:接着对不包括第一个记录以外的其他 ...

  4. 随笔分类 - [C#6] 新增特性

    C#6.0中引入的基本特性总结 [C#6] 7-索引初始化器 摘要: 0. 目录 C#6 新增特性目录 1. 老版本的代码 早C#3中引入的集合初始化器,可是让我们用上面的语法来在声明一个字典或者集合 ...

  5. 做一个java项目要经过那些正规的步骤

    理论上应该是: 一.立项 1.项目的功能的范围.实现技术方法和细节 2.需要多少人,需要的开发周期(根据客户的需求) 3.分析成本和风险 4.有相应的利润,可以立项 二.需求调研: 三.需求评审.确定 ...

  6. C#设计模式学习笔记-单例模式

    最近在学设计模式,学到创建型模式的时候,碰到单例模式(或叫单件模式),现在整理一下笔记. 在<Design Patterns:Elements of Resuable Object-Orient ...

  7. 文本处理三剑客之sed命令

    第十八章.文本处理三剑客之sed命令 目录 sed介绍 sed命令常用选项 sed常用编辑命令 sed使用示例 sed高级语法 18.1.sed简介 sed全名stream editor,流编辑器,s ...

  8. 中大东校小米路由器mini实现inode上网，ipv6 wifi【中大】【东校】【inode】【ipv6】

    还有不到4个月就要毕业了,前几天半夜没事捣鼓小米路由没想到竟然实现了wifi的ipv6. 正好又安利了同学一台小米路由mini,从刷机到inode到ipv6全搞了一遍. 这里将教程写出来,服务学弟妹. ...

  9. Heartbeat使用梳理

    在日常的集群系统架构中,一般用到Heartbeat的主要就2种:1)高可用(High Availability)HA集群, 使用Heartbeat实现,也称为"双机热备", &qu ...

  10. CentOS 配置MySQL允许远程登录

    Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...