Bootstrap"
From Documentation
| (One intermediate revision by the same user not shown) | |||
| Line 9: | Line 9: | ||
See the integration example: [https://github.com/zkoss-demo/admin-template admin template] | See the integration example: [https://github.com/zkoss-demo/admin-template admin template] | ||
| − | = Include | + | = Include JAR = |
To avoid downloading bootstrap manually, it's convenient to include it by [https://www.webjars.org/ WebJars] with Maven. | To avoid downloading bootstrap manually, it's convenient to include it by [https://www.webjars.org/ WebJars] with Maven. | ||
| Line 20: | Line 20: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | = Include CSS = | ||
| + | ==Page Scope== | ||
| + | <syntaxhighlight lang='xml'> | ||
| + | <?link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css"?> | ||
| + | </syntaxhighlight> | ||
| − | = | + | ==Application Scope== |
<syntaxhighlight lang='xml'> | <syntaxhighlight lang='xml'> | ||
| − | <? | + | <?xml version="1.0" encoding="UTF-8"?> |
| + | <language-addon> | ||
| + | <addon-name>bootstrap</addon-name> | ||
| + | <language-name>xul/html</language-name> | ||
| + | <stylesheet href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css" type="text/css"/> | ||
| + | </language-addon> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | See [[ZK%20Client-side%20Reference/Language%20Definition/stylesheet]] | ||
{{ZKDevelopersReferencePageFooter}} | {{ZKDevelopersReferencePageFooter}} | ||
Latest revision as of 08:35, 29 March 2023
Bootstrap is a very popular front-end framework for building responsive, mobile-first sites. It can be a good companion for ZK with the following usages:
- Layout a page with the responsive grid system
- Style a page with utility CSS classes
See the integration example: admin template
Include JAR
To avoid downloading bootstrap manually, it's convenient to include it by WebJars with Maven.
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.6.0</version>
</dependency>
Include CSS
Page Scope
<?link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css"?>
Application Scope
<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
<addon-name>bootstrap</addon-name>
<language-name>xul/html</language-name>
<stylesheet href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css" type="text/css"/>
</language-addon>
See ZK Client-side Reference/Language Definition/stylesheet