|
|
|
Template Button Designs
|
|
|
|
====== |
|
|
\ No newline at end of file |
|
|
|
======
|
|
|
|
|
|
|
|
|
|
|
|
Das Template bietet vordefinierte Klasse für Buttons an. Um sie zu benutzen, muss die Klasse `.btn` auf das gewünschte Element gesetzt werden. So wird schon das Grundaussehen angepasst (mit Blau als Hauptfarbe). Das vorgefertigte Aussehen funktioniert auch für folgende Elemente ohne diese CSS-Klasse:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<!-- no css class required but recommended -->
|
|
|
|
<button>Button</button>
|
|
|
|
<input type="button" />
|
|
|
|
<input type="send" />
|
|
|
|
<input type="reset" />
|
|
|
|
|
|
|
|
<!-- other elements (like <a>) require at least ".btn" css class -->
|
|
|
|
<a href="#" class="btn">Button</a>
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
Auch die **QUI Buttons** (`.qui-button`) werden überschrieben, wenn zusätzlich die Klasse `.btn` hinzugefügt wird.
|
|
|
|
|
|
|
|
Mehrere designs
|
|
|
|
======
|
|
|
|
|
|
|
|
Die Buttons sind in verschiedenen Designs vorbereitet (basiert an _Bootstrap 4_ und _Bulma_ Frameworks). Um sie zu benutzen muss neben muss einfach eine der folgenden Klassen neben der `.btn` Klasse gesetzt werden:
|
|
|
|
|
|
|
|
* .btn-primary
|
|
|
|
* .btn-secondary
|
|
|
|
* .btn-success
|
|
|
|
* .btn-danger
|
|
|
|
* .btn-warning
|
|
|
|
* .btn-info
|
|
|
|
* .btn-dark
|
|
|
|
* .btn-light
|
|
|
|
* .btn-link
|
|
|
|
|
|
|
|
```html
|
|
|
|
<a class="btn btn-primary">Primary</a>
|
|
|
|
<a class="btn btn-secondary">Secondary</a>
|
|
|
|
<a class="btn btn-success">Success</a>
|
|
|
|
<a class="btn btn-danger">Danger</a>
|
|
|
|
<a class="btn btn-warning">Warning</a>
|
|
|
|
<a class="btn btn-info">Info</a>
|
|
|
|
<a class="btn btn-dark">Dark</a>
|
|
|
|
<a class="btn btn-light">Light</a>
|
|
|
|
<a class="btn btn-link">Link</a>
|
|
|
|
```
|
|
|
|
|
|
|
|
Ergibt:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Outline version
|
|
|
|
=======
|
|
|
|
Jeder Button (bis auf `.btn-link`) hat auch alternatives Design. Das gewünschte Element muss zusätzlich die Klasse `.btn-outline` haben.
|
|
|
|
|
|
|
|
```html
|
|
|
|
<button class="btn-outline">Button</button>
|
|
|
|
<button class="btn-primary btn-outline">Primary</button>
|
|
|
|
<button class="btn-secondary btn-outline">Secondary</button>
|
|
|
|
<button class="btn-success btn-outline">Success</button>
|
|
|
|
<button class="btn-danger btn-outline">Danger</button>
|
|
|
|
<button class="btn-warning btn-outline">Warning</button>
|
|
|
|
<button class="btn-info btn-outline">Info</button>
|
|
|
|
<button class="btn-dark btn-outline">Dark</button>
|
|
|
|
<button class="btn-light btn-outline">Light</button>
|
|
|
|
```
|
|
|
|
|
|
|
|
Ergibt:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Disabled
|
|
|
|
======
|
|
|
|
|
|
|
|
Sowohl das Standard Desing als auch die Outline Version unterstützen das `:disabled` HTML Attribut.
|
|
|
|
|
|
|
|
**Wichtig**
|
|
|
|
|
|
|
|
Weil das Attribut nicht bei allen Elementen gesetzt werden kann, muss z.B. bei `<a>` die CSS Klasse `.btn-disabled` gesetzt werden.
|
|
|
|
|
|
|
|
```html
|
|
|
|
<p>
|
|
|
|
<button disabled>Button</button>
|
|
|
|
<button disabled class="btn-primary">Primary</button>
|
|
|
|
<button disabled class="btn-secondary">Secondary</button>
|
|
|
|
<button disabled class="btn-success">Success</button>
|
|
|
|
<button disabled class="btn-danger">Danger</button>
|
|
|
|
<button disabled class="btn-warning">Warning</button>
|
|
|
|
<button disabled class="btn-info">Info</button>
|
|
|
|
<button disabled class="btn-dark">Dark</button>
|
|
|
|
<button disabled class="btn-light">Light</button>
|
|
|
|
<button disabled class="btn-link">Link</button>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
<button disabled class="btn-outline">Button</button>
|
|
|
|
<button disabled class="btn-outline btn-primary">Primary</button>
|
|
|
|
<button disabled class="btn-outline btn-secondary">Secondary</button>
|
|
|
|
<button disabled class="btn-outline btn-success">Success</button>
|
|
|
|
<button disabled class="btn-outline btn-danger">Danger</button>
|
|
|
|
<button disabled class="btn-outline btn-warning">Warning</button>
|
|
|
|
<button disabled class="btn-outline btn-info">Info</button>
|
|
|
|
<button disabled class="btn-outline btn-dark">Dark</button>
|
|
|
|
<button disabled class="btn-outline btn-light">Light</button>
|
|
|
|
<button disabled class="btn-outline btn-link">Link</button>
|
|
|
|
</p>
|
|
|
|
```
|
|
|
|
|
|
|
|
Ergibt:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Button sizes
|
|
|
|
=======
|
|
|
|
|
|
|
|
Neben der Standardgröße wird auch kleinere und größere Version unterstützt. Es muss nur die Klasse `.btn-small` bzw. `.btn-large` zusätzlich gesetzt werden.
|
|
|
|
|
|
|
|
```html
|
|
|
|
<button class="btn-primary btn-small">Primary small</button>
|
|
|
|
<button class="btn-primary">Primary</button>
|
|
|
|
<button class="btn-primary btn-large">Primary large</button>
|
|
|
|
|
|
|
|
<button class="btn-success btn-small">Success small</button>
|
|
|
|
<button class="btn-success">Success</button>
|
|
|
|
<button class="btn-success btn-large">Success large</button>
|
|
|
|
```
|
|
|
|
|
|
|
|
Ergibt:
|
|
|
|
|
|
|
|
 |
