ZK Bootstrap Theme

From Documentation

Icon info.png Note: The content of this page has been deprecated/removed in the latest version.

ZK Bootstrap theme is a ZK addon to provide a set of molds for Bootstrap V3, and developers 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

Version Date Content
     


Last Update : 2022/07/08


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