ZK Bootstrap Theme"
From Documentation
Jumperchen (talk | contribs) |
m (remove empty version history (via JWB)) |
||
(5 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 | + | 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= | ||
Line 9: | Line 9: | ||
# 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.) | ||
− | + | <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> | ||
− | </ | + | </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. | ||
Line 40: | Line 40: | ||
<version>1.0.0</version> | <version>1.0.0</version> | ||
</dependency> | </dependency> | ||
+ | </source> | ||
= Component Mapping Table = | = Component Mapping Table = | ||
− | {| | + | {| class='wikitable' | width="100%" |
! scope="col" | ZK Component | ! scope="col" | ZK Component | ||
! scope="col" | Bootstrap Component | ! scope="col" | Bootstrap Component | ||
Line 95: | Line 96: | ||
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] | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{{ZKDevelopersReferencePageFooter}} | {{ZKDevelopersReferencePageFooter}} |
Latest revision as of 10:26, 5 February 2024
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
- Download the ZK Bootstrap jar file from Github or use #Maven Installation
- 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.)
<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 | |
Menupopup | Dropdown Menu | bs | Demo | |
Panel | Panel | bs | Demo | |
Paging | Pagination | bs | Demo | |
Navbar | Navbar | bs | Demo | |
Navbar | Tabs | bs-tabs | Demo | |
Navbar | Pills | bs-pills | Demo |
For more usage example, please refer to this demo