Difference between revisions of "CSS built-in classes"
From Lianjapedia
Yvonne.milne (Talk | contribs) |
Barrymavin (Talk | contribs) (→Classes) |
||
(15 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | {{DISPLAYTITLE:CSS built-in Bootstrap classes}} | |
+ | ==See Also== | ||
+ | [[CSS|Using CSS to style your Apps]] | ||
+ | |||
+ | [http://doc.qt.io/qt-5/stylesheet-reference.html QT Style Sheets Reference] | ||
+ | |||
+ | [http://doc.qt.io/qt-5/stylesheet-syntax.html QT Style Sheets Syntax] | ||
+ | |||
+ | [http://www.w3schools.com/css/default.asp W3Schools CSS] | ||
+ | |||
+ | ==Overview== | ||
+ | Lianja CSS has built-in support for common bootstrap classes and much more, e.g. btn, btn-success, btn-warning, btn-danger. The [[#Classes|full list is defined below]]. | ||
+ | |||
+ | Using these classes provides you with the ability to standardise on colors and the general UI appearance in your Apps. | ||
+ | |||
+ | ==Usage== | ||
+ | Use the '''CSS Style''' [[:Category:Attributes|Attribute]] in the [[Page Builder Assistant]] or in the [[Attributes#Skills Levels|advanced]] level [[Attributes]] to specify the CSS classes. | ||
+ | |||
+ | You can combine classes by separating them with a space, e.g. | ||
+ | <pre>btn btn-success</pre> | ||
+ | |||
+ | You can override individual attributes like this: | ||
+ | <pre>btn btn-success;background-color:lightgreen;...</pre> | ||
+ | |||
+ | You can programatically assign CSS to UI controls using the "css" (or "stylesheet") property: | ||
+ | |||
+ | <code lang="recital"> | ||
+ | obtn1 = createObject("commandbutton") | ||
+ | obtn1.resize(60, 50) | ||
+ | obtn1.flat = 1 | ||
+ | obtn1.fixedheight = 50 | ||
+ | obtn1.caption = "Click me" | ||
+ | obtn1.css = "btn btn-success" | ||
+ | </code> | ||
+ | |||
+ | ==Classes== | ||
+ | The following Bootstrap classes are built into Lianja Desktop, Web and Mobile: | ||
+ | |||
+ | {| class="wikitable" width="100%" | ||
+ | !width="100%"|Class | ||
+ | |- | ||
+ | |valign="top"|alert | ||
+ | |- | ||
+ | |valign="top"|alert-danger | ||
+ | |- | ||
+ | |valign="top"|alert-dark | ||
+ | |- | ||
+ | |valign="top"|alert-info | ||
+ | |- | ||
+ | |valign="top"|alert-light | ||
+ | |- | ||
+ | |valign="top"|alert-primary | ||
+ | |- | ||
+ | |valign="top"|alert-secondary | ||
+ | |- | ||
+ | |valign="top"|alert-success | ||
+ | |- | ||
+ | |valign="top"|alert-warning | ||
+ | |- | ||
+ | |valign="top"|badge | ||
+ | |- | ||
+ | |valign="top"|badge-danger | ||
+ | |- | ||
+ | |valign="top"|badge-dark | ||
+ | |- | ||
+ | |valign="top"|badge-info | ||
+ | |- | ||
+ | |valign="top"|badge-light | ||
+ | |- | ||
+ | |valign="top"|badge-pill | ||
+ | |- | ||
+ | |valign="top"|badge-primary | ||
+ | |- | ||
+ | |valign="top"|badge-secondary | ||
+ | |- | ||
+ | |valign="top"|badge-success | ||
+ | |- | ||
+ | |valign="top"|badge-warning | ||
+ | |- | ||
+ | |valign="top"|bg-black | ||
+ | |- | ||
+ | |valign="top"|bg-blue | ||
+ | |- | ||
+ | |valign="top"|bg-cyan | ||
+ | |- | ||
+ | |valign="top"|bg-danger | ||
+ | |- | ||
+ | |valign="top"|bg-dark | ||
+ | |- | ||
+ | |valign="top"|bg-gray | ||
+ | |- | ||
+ | |valign="top"|bg-gray-dark | ||
+ | |- | ||
+ | |valign="top"|bg-green | ||
+ | |- | ||
+ | |valign="top"|bg-indigo | ||
+ | |- | ||
+ | |valign="top"|bg-info | ||
+ | |- | ||
+ | |valign="top"|bg-light | ||
+ | |- | ||
+ | |valign="top"|bg-orange | ||
+ | |- | ||
+ | |valign="top"|bg-pink | ||
+ | |- | ||
+ | |valign="top"|bg-primary | ||
+ | |- | ||
+ | |valign="top"|bg-purple | ||
+ | |- | ||
+ | |valign="top"|bg-red | ||
+ | |- | ||
+ | |valign="top"|bg-secondary | ||
+ | |- | ||
+ | |valign="top"|bg-success | ||
+ | |- | ||
+ | |valign="top"|bg-teal | ||
+ | |- | ||
+ | |valign="top"|bg-transparent | ||
+ | |- | ||
+ | |valign="top"|bg-warning | ||
+ | |- | ||
+ | |valign="top"|bg-white | ||
+ | |- | ||
+ | |valign="top"|bg-yellow | ||
+ | |- | ||
+ | |valign="top"|border | ||
+ | |- | ||
+ | |valign="top"|border-0 | ||
+ | |- | ||
+ | |valign="top"|border-bottom-0 | ||
+ | |- | ||
+ | |valign="top"|border-danger | ||
+ | |- | ||
+ | |valign="top"|border-dark | ||
+ | |- | ||
+ | |valign="top"|border-info | ||
+ | |- | ||
+ | |valign="top"|border-left-0 | ||
+ | |- | ||
+ | |valign="top"|border-light | ||
+ | |- | ||
+ | |valign="top"|border-primary | ||
+ | |- | ||
+ | |valign="top"|border-right-0 | ||
+ | |- | ||
+ | |valign="top"|border-secondary | ||
+ | |- | ||
+ | |valign="top"|border-success | ||
+ | |- | ||
+ | |valign="top"|border-top-0 | ||
+ | |- | ||
+ | |valign="top"|border-warning | ||
+ | |- | ||
+ | |valign="top"|boxshadow | ||
+ | |- | ||
+ | |valign="top"|btn | ||
+ | |- | ||
+ | |valign="top"|btn-danger | ||
+ | |- | ||
+ | |valign="top"|btn-dark | ||
+ | |- | ||
+ | |valign="top"|btn-default | ||
+ | |- | ||
+ | |valign="top"|btn-info | ||
+ | |- | ||
+ | |valign="top"|btn-lg | ||
+ | |- | ||
+ | |valign="top"|btn-light | ||
+ | |- | ||
+ | |valign="top"|btn-link | ||
+ | |- | ||
+ | |valign="top"|btn-md | ||
+ | |- | ||
+ | |valign="top"|btn-primary | ||
+ | |- | ||
+ | |valign="top"|btn-secondary | ||
+ | |- | ||
+ | |valign="top"|btn-sm | ||
+ | |- | ||
+ | |valign="top"|btn-success | ||
+ | |- | ||
+ | |valign="top"|btn-warning | ||
+ | |- | ||
+ | |valign="top"|btn-xs | ||
+ | |- | ||
+ | |valign="top"|dropshadow | ||
+ | |- | ||
+ | |valign="top"|dropshadowleft | ||
+ | |- | ||
+ | |valign="top"|dropshadowright | ||
+ | |- | ||
+ | |valign="top"|flatbtn | ||
+ | |- | ||
+ | |valign="top"|flatbtnlast | ||
+ | |- | ||
+ | |valign="top"|font-italic | ||
+ | |- | ||
+ | |valign="top"|font-weight-bold | ||
+ | |- | ||
+ | |valign="top"|font-weight-light | ||
+ | |- | ||
+ | |valign="top"|font-weight-normal | ||
+ | |- | ||
+ | |valign="top"|h1 | ||
+ | |- | ||
+ | |valign="top"|h2 | ||
+ | |- | ||
+ | |valign="top"|h3 | ||
+ | |- | ||
+ | |valign="top"|h4 | ||
+ | |- | ||
+ | |valign="top"|h5 | ||
+ | |- | ||
+ | |valign="top"|h6 | ||
+ | |- | ||
+ | |valign="top"|label | ||
+ | |- | ||
+ | |valign="top"|label-big | ||
+ | |- | ||
+ | |valign="top"|label-danger | ||
+ | |- | ||
+ | |valign="top"|label-default | ||
+ | |- | ||
+ | |valign="top"|label-info | ||
+ | |- | ||
+ | |valign="top"|label-medium | ||
+ | |- | ||
+ | |valign="top"|label-primary | ||
+ | |- | ||
+ | |valign="top"|label-success | ||
+ | |- | ||
+ | |valign="top"|label-warning | ||
+ | |- | ||
+ | |valign="top"|mdc-textfield | ||
+ | |- | ||
+ | |valign="top"|noborder | ||
+ | |- | ||
+ | |valign="top"|rounded | ||
+ | |- | ||
+ | |valign="top"|rounded-0 | ||
+ | |- | ||
+ | |valign="top"|rounded-big | ||
+ | |- | ||
+ | |valign="top"|rounded-bottom | ||
+ | |- | ||
+ | |valign="top"|rounded-bottom-big | ||
+ | |- | ||
+ | |valign="top"|rounded-bottom-medium | ||
+ | |- | ||
+ | |valign="top"|rounded-circle | ||
+ | |- | ||
+ | |valign="top"|rounded-left | ||
+ | |- | ||
+ | |valign="top"|rounded-left-big | ||
+ | |- | ||
+ | |valign="top"|rounded-left-medium | ||
+ | |- | ||
+ | |valign="top"|rounded-medium | ||
+ | |- | ||
+ | |valign="top"|rounded-right | ||
+ | |- | ||
+ | |valign="top"|rounded-right-big | ||
+ | |- | ||
+ | |valign="top"|rounded-right-medium | ||
+ | |- | ||
+ | |valign="top"|rounded-top | ||
+ | |- | ||
+ | |valign="top"|rounded-top-big | ||
+ | |- | ||
+ | |valign="top"|rounded-top-medium | ||
+ | |- | ||
+ | |valign="top"|shadow | ||
+ | |- | ||
+ | |valign="top"|text-blue | ||
+ | |- | ||
+ | |valign="top"|text-center | ||
+ | |- | ||
+ | |valign="top"|text-cyan | ||
+ | |- | ||
+ | |valign="top"|text-danger | ||
+ | |- | ||
+ | |valign="top"|text-dark | ||
+ | |- | ||
+ | |valign="top"|text-gray | ||
+ | |- | ||
+ | |valign="top"|text-gray-dark | ||
+ | |- | ||
+ | |valign="top"|text-green | ||
+ | |- | ||
+ | |valign="top"|text-indigo | ||
+ | |- | ||
+ | |valign="top"|text-info | ||
+ | |- | ||
+ | |valign="top"|text-left | ||
+ | |- | ||
+ | |valign="top"|text-light | ||
+ | |- | ||
+ | |valign="top"|text-orange | ||
+ | |- | ||
+ | |valign="top"|text-pink | ||
+ | |- | ||
+ | |valign="top"|text-primary | ||
+ | |- | ||
+ | |valign="top"|text-purple | ||
+ | |- | ||
+ | |valign="top"|text-red | ||
+ | |- | ||
+ | |valign="top"|text-right | ||
+ | |- | ||
+ | |valign="top"|text-secondary | ||
+ | |- | ||
+ | |valign="top"|text-success | ||
+ | |- | ||
+ | |valign="top"|text-teal | ||
+ | |- | ||
+ | |valign="top"|text-warning | ||
+ | |- | ||
+ | |valign="top"|text-white | ||
+ | |- | ||
+ | |valign="top"|text-yellow | ||
+ | |- | ||
+ | |valign="top"|well | ||
+ | |- | ||
+ | |valign="top"|well-lg | ||
+ | |- | ||
+ | |valign="top"|well-sm | ||
+ | |- | ||
+ | |} | ||
+ | |||
[[Category:Page Builder]] | [[Category:Page Builder]] | ||
Line 5: | Line 333: | ||
[[Category:PageAnatomy]] | [[Category:PageAnatomy]] | ||
[[Category:SectionAnatomy]] | [[Category:SectionAnatomy]] | ||
+ | [[Category:Lianja v9.1]] | ||
+ | [[Category:Lianja v9.4]] |
Latest revision as of 23:24, 18 May 2024
Contents
See Also
Overview
Lianja CSS has built-in support for common bootstrap classes and much more, e.g. btn, btn-success, btn-warning, btn-danger. The full list is defined below.
Using these classes provides you with the ability to standardise on colors and the general UI appearance in your Apps.
Usage
Use the CSS Style Attribute in the Page Builder Assistant or in the advanced level Attributes to specify the CSS classes.
You can combine classes by separating them with a space, e.g.
btn btn-success
You can override individual attributes like this:
btn btn-success;background-color:lightgreen;...
You can programatically assign CSS to UI controls using the "css" (or "stylesheet") property:
obtn1 = createObject("commandbutton") obtn1.resize(60, 50) obtn1.flat = 1 obtn1.fixedheight = 50 obtn1.caption = "Click me" obtn1.css = "btn btn-success"
Classes
The following Bootstrap classes are built into Lianja Desktop, Web and Mobile:
Class |
---|
alert |
alert-danger |
alert-dark |
alert-info |
alert-light |
alert-primary |
alert-secondary |
alert-success |
alert-warning |
badge |
badge-danger |
badge-dark |
badge-info |
badge-light |
badge-pill |
badge-primary |
badge-secondary |
badge-success |
badge-warning |
bg-black |
bg-blue |
bg-cyan |
bg-danger |
bg-dark |
bg-gray |
bg-gray-dark |
bg-green |
bg-indigo |
bg-info |
bg-light |
bg-orange |
bg-pink |
bg-primary |
bg-purple |
bg-red |
bg-secondary |
bg-success |
bg-teal |
bg-transparent |
bg-warning |
bg-white |
bg-yellow |
border |
border-0 |
border-bottom-0 |
border-danger |
border-dark |
border-info |
border-left-0 |
border-light |
border-primary |
border-right-0 |
border-secondary |
border-success |
border-top-0 |
border-warning |
boxshadow |
btn |
btn-danger |
btn-dark |
btn-default |
btn-info |
btn-lg |
btn-light |
btn-link |
btn-md |
btn-primary |
btn-secondary |
btn-sm |
btn-success |
btn-warning |
btn-xs |
dropshadow |
dropshadowleft |
dropshadowright |
flatbtn |
flatbtnlast |
font-italic |
font-weight-bold |
font-weight-light |
font-weight-normal |
h1 |
h2 |
h3 |
h4 |
h5 |
h6 |
label |
label-big |
label-danger |
label-default |
label-info |
label-medium |
label-primary |
label-success |
label-warning |
mdc-textfield |
noborder |
rounded |
rounded-0 |
rounded-big |
rounded-bottom |
rounded-bottom-big |
rounded-bottom-medium |
rounded-circle |
rounded-left |
rounded-left-big |
rounded-left-medium |
rounded-medium |
rounded-right |
rounded-right-big |
rounded-right-medium |
rounded-top |
rounded-top-big |
rounded-top-medium |
shadow |
text-blue |
text-center |
text-cyan |
text-danger |
text-dark |
text-gray |
text-gray-dark |
text-green |
text-indigo |
text-info |
text-left |
text-light |
text-orange |
text-pink |
text-primary |
text-purple |
text-red |
text-right |
text-secondary |
text-success |
text-teal |
text-warning |
text-white |
text-yellow |
well |
well-lg |
well-sm |