ZK Bootstrap Theme

From Documentation
Revision as of 01:30, 30 September 2020 by Hawk (talk | contribs) (→‎Installation)

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 : 2020/09/30


Version Date Content
     



Last Update : 2020/09/30

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