ZK Bootstrap Theme"
From Documentation
Jumperchen (talk | contribs) (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...") |
Jumperchen (talk | contribs) |
||
| Line 39: | Line 39: | ||
! 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= | =Version History= | ||
{{LastUpdated}} | {{LastUpdated}} | ||
Revision as of 09:04, 27 November 2013
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
- Download the ZK Bootstrap jar file from Github
- 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.
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
Version History
| Version | Date | Content |
|---|---|---|