如何解决在Bootstrap框架内使用zTree树控件出现css冲突

html-css065

如何解决在Bootstrap框架内使用zTree树控件出现css冲突,第1张

找到zTree相关的zTreeStyle.css文件,增加相应的样式,避免继承Bootstrap框架的样式。 如ztree li ul.line{ height: 80%} 这样就能避免继承了。

样式定义在metro.css文件里(或者是zTreeStyle.css……),其中可加载单个的图片,也可以从一张图片中根据坐标获取我们要用的图形。对metro.css比较重要的一个图片是metro.png,在图片中每个小方格是5px,在css中加载时按照横纵坐标进行图标的获取。

在ztree中,css主要用了两种方式来加载图标。第一种:根据背景图,图标大小,和坐标位置

第二种:直接加载图片

这两种方式,第二种比较常用,但是对于数据量大的情况,第一种方法貌似更好。对于我们想要修改的元素,可以先在网页中定位一下,找到它具体的class,然后来这里更改就可以了。

3.Bootstrap风格装饰ztree

以最近很流行的Bootstrap为例,给ztree装饰成Bootstrap的风格。上边我们已经分析过ztree是如何设定样式,这里我们只需要任选其一做更改就行了,鉴于它使用了大量以背景图片为基础的图标设定,我们最好还是设定成直接加载图片的比较方便,要不然改的数据太多了……

1)ztree也有黑白色的css、png成套的样式设置,为了更符合Bootstrap的图标样式,让它替换掉原有的css文件和彩色图标

如果页面框架是Bootstrap的,则在显示的时候根节点的图标是“破碎”的,经过查找发现,是根节点图标位置受到Bootstrap的影响,在css文件中找到设置它的位置,进行坐标更改

2)上边的步骤只能算是在ztree内部设定,还不算加上Boostrap的风格。不过,我们只需要再给它更换一个图标,看起来就有那么点味道了(为了展示方便,进行了换行处理)

这样就是另一种风格了,如果你想要自定义其它风格,根据上边的demo来做,应该不算什么难事了。

小结:

ztree中有自定义图标的方法,但是在遇到图标显示不完整的时候还是没办法解决,最后更改了css文件才让图标显示完整。在解决这个问题的过程中了解了ztree图标的加载过程,所有顺便练练手,直接从CSS来给ztree换了个风格。