From Documentation

Jump to: navigation, search







Contents


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 or use #Maven Installation
  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.

Maven Installation

    <dependency>
      <groupId>org.zkoss.addons</groupId>
      <artifactId>zk-bootstrap</artifactId>
      <version>1.0.0</version>
    </dependency>

Component Mapping Table

ZK Component Bootstrap Component Mold Name Demo Sketch
Button Button bs Demo Zk-bootstrap-button.PNG
Menupopup Dropdown Menu bs Demo Zk-bootstrap-menupopup.PNG
Panel Panel bs Demo Zk-bootstrap-panel.PNG
Paging Pagination bs Demo Zk-bootstrap-paging.PNG
Navbar Navbar bs Demo Zk-bootstrap-navbar.PNG
Navbar Tabs bs-tabs Demo Zk-bootstrap-tabs.PNG
Navbar Pills bs-pills Demo Zk-bootstrap-pills.PNG

For more usage example, please refer to this demo

Version History

Last Update : 2014/6/11


Version Date Content
     



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.



You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum