<%@ 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. 关于Redis的ACID

    事务是一个数据库必备的元素,对于redis也不例外,对于一个传统的关系型数据库来说,数据库事务满足ACID四个特性: A代表原子性:一个事务(transaction)中的所有操作,要么全部完成,要么全 ...

  2. win10关机指示灯亮解决办法

    新上市的win10,大家都迫不及待的装上了,但是却遇到了很多问题. 对于win10关机指示灯亮的解决办法有下面几种. 指示灯 如果是只有电源的指示灯亮,拔掉电源即可. 如果是信号灯和其他的指示灯都亮原 ...

  3. Win10全屏看视频时任务栏不隐藏

    解决办法: 1.对任务栏鼠标右键点击,选择"任务管理器" 2.在进程选项下找到Windows进程中的Windows资源管理器 3.对Windows资源管理器鼠标右键,选择重新启动

  4. 对C#泛型实例化对像

    public class A { } public class B<T> { public static T Get() { //在这一块如何实例化T这个对象呢?如果用default(T) ...

  5. 用 JSP 实现对文件的相关操作

    前段时间一直忙着作业,实验,动手的时间真是少之又少,今天终于可以继续和大家分享关于 JSP 的学习心得. 简单总结一下吧: JSP 理论性很强,感觉就是纯语法. 我更偏向于实际编写代码,这样更容易理解 ...

  6. [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)

    Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义:   文本:由0个或 ...

  7. [LeetCode] Encode String with Shortest Length 最短长度编码字符串

    Given a non-empty string, encode the string such that its encoded length is the shortest. The encodi ...

  8. [LeetCode] Find the Duplicate Number 寻找重复数

    Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...

  9. [LeetCode] Reorder List 链表重排序

    Given a singly linked list L: L0→L1→…→Ln-1→Ln, reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do th ...

  10. SQL函数汇总【精选篇】

    1.绝对值   SQL:select abs(-1) value  O:select abs(-1) value from dual  2.取整(大)   S:select ceiling(-1.00 ...