Difference between revisions of "CSS built-in classes"
From Lianjapedia
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | |||
− | |||
==See Also== | ==See Also== | ||
− | [[CSS | + | [[CSS]] |
[http://doc.qt.io/qt-5/stylesheet-reference.html QT Style Sheets Reference] | [http://doc.qt.io/qt-5/stylesheet-reference.html QT Style Sheets Reference] | ||
Line 11: | Line 9: | ||
==Overview== | ==Overview== | ||
− | Lianja CSS has built-in support for common bootstrap classes, e.g. btn, btn-success, btn-warning, btn-danger. The full list is defined below. | + | Lianja CSS has built-in support for common bootstrap classes, 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. | Using these classes provides you with the ability to standardise on colors and the general UI appearance in your Apps. | ||
+ | ==Usage== | ||
+ | The CSS classes can be specified in the [[Page Builder Assistant]] or in the [[Attributes#Skills Levels|advanced]] level [[Attributes]]. | ||
+ | |||
+ | 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> | ||
− | ==Boostrap classes built into Lianja Desktop, Web and Mobile | + | ==Classes== |
+ | The following Boostrap classes are built into Lianja Desktop, Web and Mobile: | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" |
Revision as of 04:43, 6 July 2023
Contents
See Also
Overview
Lianja CSS has built-in support for common bootstrap classes, 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
The CSS classes can be specified in the Page Builder Assistant or in the advanced level Attributes.
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;...
Classes
The following Boostrap classes are built into Lianja Desktop, Web and Mobile:
Class |
---|
btn |
flatbtn |
flatbtnlast |
badge |
rounded |
rounded-top |
rounded-right |
rounded-bottom |
rounded-left |
rounded-0 |
rounded-circle |
border |
border-primary |
border-secondary |
border-success |
border-warning |
border-danger |
border-info |
border-light |
border-dark |
border-0 |
noborder |
border-top-0 |
border-right-0 |
border-left-0 |
border-bottom-0 |
alert |
badge-pill |
btn-xs |
btn-sm |
btn-md |
btn-lg |
btn-primary |
badge-primary |
btn-default |
alert-primary |
btn-secondary |
badge-secondary |
alert-secondary |
btn-success |
badge-success |
alert-success |
btn-danger |
badge-danger |
alert-danger |
btn-warning |
badge-warning |
alert-warning |
btn-info |
badge-info |
alert-info |
btn-light |
badge-light |
alert-light |
btn-dark |
badge-dark |
alert-dark |
btn-link |
text-primary |
text-secondary |
text-success |
text-info |
text-warning |
text-danger |
text-light |
text-dark |
text-blue |
text-indigo |
text-purple |
text-pink |
text-red |
text-orange |
text-yellow |
text-green |
text-teal |
text-cyan |
text-white |
text-gray |
text-gray-dark |
bg-primary |
bg-secondary |
bg-success |
bg-info |
bg-warning |
bg-danger |
bg-light |
bg-dark |
bg-white |
bg-blue |
bg-indigo |
bg-purple |
bg-pink |
bg-red |
bg-orange |
bg-yellow |
bg-green |
bg-teal |
bg-cyan |
bg-white |
bg-gray |
bg-gray-dark |
text-left |
text-center |
text-right |
font-weight-bold |
font-weight-normal |
font-weight-light |
font-italic |
h1 |
h2 |
h3 |
h4 |
h5 |
h6 |
label |
label-default |
label-primary |
label-success |
label-info |
label-warning |
label-danger |
well |
well-sm |
well-lg |
dropshadow |
shadow |
dropshadowleft |
dropshadowright |
boxshadow |
mdc-textfield |