ZK Bootstrap Theme"

From Documentation
(Created page with "{{ZKDevelopersReferencePageHeader}} __TOC__ ZK Bootstrap theme is a ZK addon to provide a set of molds for [http://getbootstrap.com/ Bootstrap V3], and developer can apply this...")
 
m (remove empty version history (via JWB))
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
−
 
+
{{Deprecated Content}}
 
__TOC__
 
__TOC__
  
−
ZK Bootstrap theme is a ZK addon to provide a set of molds for [http://getbootstrap.com/ Bootstrap V3], and developer can apply this addon to combine ZK with Bootstrap styling seamlessly.
+
ZK Bootstrap theme is a ZK addon to provide a set of molds for [http://getbootstrap.com/ Bootstrap V3], and developers can apply this addon to combine ZK with Bootstrap styling seamlessly.
  
 
=Installation=
 
=Installation=
−
# Download the ZK Bootstrap jar file from [https://github.com/jumperchen/zk-bootstrap/releases Github]
+
# Download the ZK Bootstrap jar file from [https://github.com/jumperchen/zk-bootstrap/releases Github] or use [[#Maven Installation]]
 
# Put the zk-bootstrap.jar file under '''WEB-INF/lib''' folder
 
# Put the zk-bootstrap.jar file under '''WEB-INF/lib''' folder
 
# Specify the following setting in zk.xml. ('''Note:'''  if you don't want to apply for all default mold, you can skip this step.)
 
# Specify the following setting in zk.xml. ('''Note:'''  if you don't want to apply for all default mold, you can skip this step.)
−
<pre>
+
<source lang='xml'>
 
<library-property>
 
<library-property>
 
<name>org.zkoss.zul.Button.mold</name>
 
<name>org.zkoss.zul.Button.mold</name>
Line 30: Line 30:
 
<value>bs</value>
 
<value>bs</value>
 
</library-property>
 
</library-property>
−
  </pre>
+
  </source>
 
'''Note:''' we use the word '''bs''' as bootstrap's nickname for the extra zk component molds.
 
'''Note:''' we use the word '''bs''' as bootstrap's nickname for the extra zk component molds.
 +
 +
==  Maven Installation ==
 +
<source lang="xml">
 +
    <dependency>
 +
      <groupId>org.zkoss.addons</groupId>
 +
      <artifactId>zk-bootstrap</artifactId>
 +
      <version>1.0.0</version>
 +
    </dependency>
 +
</source>
  
 
= Component Mapping Table =
 
= Component Mapping Table =
  
−
{| border="1"
+
{| class='wikitable' | width="100%"
 
! scope="col" | ZK Component
 
! scope="col" | ZK Component
 
! scope="col" | Bootstrap Component
 
! scope="col" | Bootstrap Component
 
! scope="col" | Mold Name
 
! scope="col" | Mold Name
 +
! scope="col" | Demo
 +
! scope="col" | Sketch
 
|-
 
|-
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Button Button]
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Button Button]
 
| [http://getbootstrap.com/components/#btn-groups Button]
 
| [http://getbootstrap.com/components/#btn-groups Button]
 
| ''bs''
 
| ''bs''
 +
| [http://www.zkoss.org/zk-bootstrap/#btn-groups Demo]
 +
| [[File:zk-bootstrap-button.PNG]]
 
|-
 
|-
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Menu/Menupopup Menupopup]
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Menu/Menupopup Menupopup]
 
| [http://getbootstrap.com/components/#dropdowns Dropdown Menu]
 
| [http://getbootstrap.com/components/#dropdowns Dropdown Menu]
 
| ''bs''
 
| ''bs''
 +
| [http://www.zkoss.org/zk-bootstrap/#btn-dropdowns Demo]
 +
| [[File:zk-bootstrap-menupopup.PNG]]
 
|-
 
|-
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Containers/Panel Panel]
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Containers/Panel Panel]
 
| [http://getbootstrap.com/components/#panels Panel]
 
| [http://getbootstrap.com/components/#panels Panel]
 
| ''bs''
 
| ''bs''
 +
| [http://www.zkoss.org/zk-bootstrap/#panels Demo]
 +
| [[File:zk-bootstrap-panel.PNG]]
 
|-
 
|-
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Supplementary/Paging Paging]
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Supplementary/Paging Paging]
 
| [http://getbootstrap.com/components/#pagination Pagination]
 
| [http://getbootstrap.com/components/#pagination Pagination]
 
| ''bs''
 
| ''bs''
 +
| [http://www.zkoss.org/zk-bootstrap/#pagination Demo]
 +
| [[File:zk-bootstrap-paging.PNG]]
 
|-
 
|-
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Nav/Navbar Navbar]
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Nav/Navbar Navbar]
 
| [http://getbootstrap.com/components/#navbar Navbar]
 
| [http://getbootstrap.com/components/#navbar Navbar]
 
| ''bs''
 
| ''bs''
 +
| [http://www.zkoss.org/zk-bootstrap/#navbar Demo]
 +
| [[File:zk-bootstrap-navbar.PNG]]
 
|-
 
|-
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Nav/Navbar Navbar]
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Nav/Navbar Navbar]
 
| [http://getbootstrap.com/components/#nav-tabs Tabs]
 
| [http://getbootstrap.com/components/#nav-tabs Tabs]
 
| ''bs-tabs''
 
| ''bs-tabs''
 +
| [http://www.zkoss.org/zk-bootstrap/#nav-tabs Demo]
 +
| [[File:zk-bootstrap-tabs.PNG]]
 
|-
 
|-
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Nav/Navbar Navbar]
 
| [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Nav/Navbar Navbar]
 
| [http://getbootstrap.com/components/#nav-pills Pills]
 
| [http://getbootstrap.com/components/#nav-pills Pills]
 
| ''bs-pills''
 
| ''bs-pills''
 +
| [http://www.zkoss.org/zk-bootstrap/#nav-pills Demo]
 +
| [[File:zk-bootstrap-pills.PNG]]
 
|}
 
|}
  
 
For more usage example, please  refer to [http://www.zkoss.org/zk-bootstrap this demo]
 
For more usage example, please  refer to [http://www.zkoss.org/zk-bootstrap this demo]
−
=Version History=
+
 
−
{{LastUpdated}}
+
 
−
{| border='1px' | width="100%"
 
−
! Version !! Date !! Content
 
−
|-
 
−
| &nbsp;
 
−
| &nbsp;
 
−
| &nbsp;
 
−
|}
 
  
 
{{ZKDevelopersReferencePageFooter}}
 
{{ZKDevelopersReferencePageFooter}}

Latest revision as of 10:26, 5 February 2024


DocumentationZK Developer's ReferenceTheming and StylingZK Official ThemesZK Bootstrap Theme
ZK Bootstrap Theme


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




Last Update : 2024/02/05

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Reference/Theming_and_Styling/ZK_Official_Themes/ZK_Bootstrap_Theme&oldid=56829"