ZK Bootstrap Theme

ZK Bootstrap theme is a ZK addon to provide a set of molds for Bootstrap V3, and developer can apply this addon to combine ZK with Bootstrap styling seamlessly.

Installation

1. Download the ZK Bootstrap jar file from Github
2. Put the zk-bootstrap.jar file under WEB-INF/lib folder
3. Specify the following setting in zk.xml. (Note: if you don't want to apply for all default mold, you can skip this step.)

<library-property>
	<name>org.zkoss.zul.Button.mold</name>
	<value>bs</value>
</library-property>
<library-property>
	<name>org.zkoss.zul.Menupopup.mold</name>
	<value>bs</value>
</library-property>
<library-property>
	<name>org.zkoss.zkmax.zul.Navbar.mold</name>
	<value>bs</value>
</library-property>
<library-property>
	<name>org.zkoss.zul.Paging.mold</name>
	<value>bs</value>
</library-property>
<library-property>
	<name>org.zkoss.zul.Panel.mold</name>
	<value>bs</value>
</library-property>
 

Note: we use the word bs as bootstrap's nickname for the extra zk component molds.

Component Mapping Table

ZK Component	Bootstrap Component	Mold Name
Button	Button	bs
Menupopup	Dropdown Menu	bs
Panel	Panel	bs
Paging	Pagination	bs
Navbar	Navbar	bs
Navbar	Tabs	bs-tabs
Navbar	Pills	bs-pills

For more usage example, please refer to this demo

Version History

Version	Date	Content