解决easyui和bootstrap兼容问题

http://www.joleye.com/viewinfo-586.aspx

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

CSS代码

  1. /*bootstrap兼容问题和easyui的bug*/
  2. .panel-header, .panel-body {
  3. border-width: 0px;
  4. }
  5. .datagrid,.combo-p{
  6. border:solid 1px #D4D4D4;
  7. }
  8. .datagrid *{
  9. -webkit-box-sizing: content-box;
  10. -moz-box-sizing: content-box;
  11. box-sizing: content-box;
  12. }

基本原理就是还原easyui中的默认设置,让bootstrap的作用域不在easyui控件定义的css范围内。

版本:

Bootstrap v3.1.1

EasyUI 1.3.4

最新评论

在当前页面上加上这个样式就可以了。
2015-2-6 12:45:14
OK
2015-1-27 17:48:04
这也没有说是在哪个CSS文件下改呀?
2015-1-5 16:46:44
这是在那里改呀?
2015-1-5 16:46:14


http://www.th7.cn/web/html-css/201508/117337.shtml

今天发现bootstrap和easyui的css类重复用了一个很笨的办法解决了,这种小事网上都不好搜啊。

我先引用的bootstrap后引用的easy UI,bootstrap的会被覆盖,boot的样式不正常就是难看了点,easy UI的有问题页面就直接不能看了,所以还的easy UI放后面,我又增加了个人mybootstrap.css,吧bootstrap被覆盖的重命名复制过去就互不冲突了。

比如:吧所有的panel替换成b-panel存到mybootstrap.css,引用的时候用b-panel




http://www.thinksaas.cn/group/topic/350209/

经过逐个查找,是几个最常见的标签产生了冲突,删除即可。列出如下:

body {
 font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 14px;
 line-height: 1.42857143;
 color: #333;
 background-color: #fff;
}
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
*:before,
*:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
 margin-top: 20px;
 margin-bottom: 10px;
}

时间: 2024-11-16 21:53:20

解决easyui和bootstrap兼容问题的相关文章

用bootstrap兼容ie各大浏览器的解决方法

以bootstrap为框架常常会出现不兼容ie各大浏览器的问题,用以下代码基本可以解决,一般在<head></head>加入以下代码后,网页可能还一些比较不美观,再写一点css hack就可以了,如果加入以下代码网页还是特别乱,请检查一下你的css和js的文件顺序,有加载顺序的... <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="st

解决easyui combobox不能默认选中

开始出现很奇怪的问题,ff没有问题IE8还是会出现不能选中默认项的问题,更改了select.input的方式,数据加载方式也更改为json的方式,未果,最后将datagrid toolbar的初始化放到了datagrid之后,选中使用了 'selected': 'true', 搞定. 解决easyui combobox不能默认选中

解决Easyui Combotree的SetValue方法无效

今天在写代码的时候,遇到个很奇怪的问题: $('#department_parent').combotree('setValue', row.id); AjaxForProvince(); $('#province').combobox('setValue', row.province_id); AjaxForCity(row.province_id); $('#city').combobox('setValue', row.city_id); AjaxForZone(row.city_id);

toddyang3.0版本 最新EASYUI后台框架兼容所有浏览器

        toddyang3.0版本 最新EASYUI后台框架兼容所有浏览器

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

本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. B

bootstrap兼容ie8以下版本

由于bootstrap用到了css3+html5 并且ie8以下的浏览器不支持css3和html5.很多公司现在都市ie8以下的浏览器不用兼容的,但是也有好多地方需要兼容.遇到这样的问题很好解决,只需将下面这段代码加入head中即可. <!--[if lte IE 9]> <script src="components/bootstrap/dist/js/respond.min.js"></script> <script src="c

Bootstrap兼容

转:http://blog.csdn.net/chenhongwu666/article/details/41513901 如有雷同,不胜荣幸,若转载,请注明让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种

如何解决EasyUI树菜单单击文字无法展开菜单的问题

最近遇到一个问题:单击EasyUI树菜单中的文字,菜单无法展开,只有单击加号才能展开,才有效果.如何解决这个问题呢?方法如下: 1 找到要添加的代码的位置,比如说 jquery.easyUI.min.js 文件中菜单的设置处(具体要看自己的项目是  在哪里设置) 2 找到onSelect 函数,然后添加如下代码: onSelect:function(node){      $(this).tree(node.state === 'closed' ? 'expand' : 'collapse', 

解决IE8下不兼容rgba()的解决办法

rgba()是css3的新属性,所以IE8及以下浏览器不兼容,这怎么办呢?终于我找到了解决办法. 解决办法 我们先来解释以下rgba rgba: rgba的含义,r代表red,g代表green,b代表blue,a代表透明度. rgba(0,0,0,.5) 这样就代表了黑色,透明度为0.5 要想解决在IE8下的透明度问题,可以增加这样一句话: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endC