<%@ 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. 【代码笔记】iOS-获得现在的日期

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  2. MySQL 之 Metadata Locking 研究

    MySQL5.5 中引入了 metadata lock. 顾名思义,metadata lock 不是为了保护表中的数据的,而是保护 database objects(元数据)的.包括表结构.schem ...

  3. mongodb简介（转）

    1.简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数 ...

  4. uboot的配置流程分析

    简单介绍一下uboot的基本配置流程.和绝大多数源码编译安装一样,uboot在执行make之前需要执行make XXXconfig来配置相关信息,而且uboot本身是针对多种平台的bootloader ...

  5. x01.TestViewContent: 插件测试

    开发神器 SharpDevelop 的插件系统,很有学习的必要. 1.首先在 github 上下载源代码,确保编译运行无误. 2.在 AddIns/Misc 下添加 SharpDevelop 插件项目 ...

  6. Fragment之间传值

    Activity: String myArguments;    public String getarguments() {   return myArguments;  } public void ...

  7. TCP连接建立和终止小结

    TCP连接建立(三次握手) 如图: 请求端发送一个SYN到服务器的相应端口,以及初始序号ISN 服务器发送包含服务器的初始序号的SYN作为应答,同时确认序号设置为客户的ISN+1 客户将确认序号设置为 ...

  8. chrome防止自动填充密码

    是防止,不是禁止.禁止需要在浏览器设置. chrome浏览器保存密码之后,页面上有password存在的时候会出现自动填充用户名和密码的情况. 添加disableautocomplete和autoco ...

  9. easy_UI

    引入js/css样式 <link rel="stylesheet" type="text/css" href="<%=path%>/ ...

  10. 安装ArcGIS Engine 9.3

    本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6217003.html 准备: ArcGIS Engine 9.3.crack_for ...