关于ZK、BootStrap这里不做介绍了，如果不了解的，可能也不需要看这篇文章了。

目前ZK对Bootstrap的支持，完全可以插件化，也就是说页面可以完全不用改，而实现换样式。

这里简单介绍一下原理。

一、ZK插件的原理

首先需要在resources目录下进行下配置：

如上图，这两个文件时最主要的。Config文件定义了该插件的基本信息，比如名称和版本；

Lang-addon文件定义了插件的详细信息，如下图，定义了js的目录（以web.js为默认前缀），以及要加载的css文件，当然还要定义所扩展的控件，比如这里的button。

相应的js目录下，需要有zk.wpd文件，该文件具体定义了，要加载哪些js文件

如上图，我们这里重写了button，textbox、menu等控件。

如lang-addon文件所示，我们扩展的控件，为了不影响原有控件的属性，或者说和原有控件一起存在，我们定义了自己的mold属性，这里是bs。那在哪里定义哪些控件具体用哪个mold呢，就是zk.xml中，如下图：

这里，具体定义了哪些控件需要用我们自定义的mold。

二、简单介绍一下，我们如何来支持bootstrap的。

通过插件的方式，我们其实已经把bootstrap.min.css加载进来，这样就不需要在page页面上单独定义了，我们以扩展textbox支持bootstrap为例,

看上图，zk在js端提供了一种机制，让我们可以在原有zk js控件的基础上，任意的修改，这个机制就是通过zk.afterLoad function实现的。

afterLoad的第一个参数是zk js的package name,这里我们需要查看zk自身的js实现，来确定某个控件到底属于哪个package，zk自身的实现在他的jar包中：

比如Textbox是在zul.inp下。

知道在哪个package后，我们就可以用afterLoad方法，在这个package加载完成后，执行我们自己的操作，用来对zk原生的js进行修改。

比如这里的input.zul，我们仅仅实现了，当这个控件是bs mold的时候，他的sclass是form-control，最终我们在page zul文件中不用做任何修改，就可以支持bootstrap了，比如：

<textbox placeholder="test" />

三、示例代码简介

ui-examples.zip是示例代码，这个代码是在原有zk示例代码基础上做了一些调整，去掉了不需要的东西。

首先，先说一下java代码，如下图，只有两个类，Version类用于我们bootstrap插件的版本号，Runtime类是为了破解ZK。

最重要的是我们的插件实现：全部在resources目录下

最后是页面代码：如果要看某个例子的实现，就可以访问/zk/xx.zul即可。

示例代码详见附件中。

ZK整合BootStrap