Bootstrap 4 Schnellstart – Buttons

Buttons

Das wohl bekannteste Bootstrap Design ist wahrscheinlich das Button-Design. Es gibt 9 verschiedene Button-Bedeutungen mit eigenen Farben.

Die Farben gehen wir im nächsten Modul durch, deswegen werden wir hier nur mit der Primärfarbe arbeiten.

Um ein Element als Button zu markieren, wird die Klasse btn und eine Klasse für die Farbe verwendet, z.B. btn-primary.

<a class="btn btn-primary" href="#" role="button">Klick mich!</a>

Zusätzlich zu den Buttons gibt es ein Outline Design, welches z.B. über die Klasse btn-outline-primary (für die Primärfarbe) verwendet werden kann.

<button type="button" class="btn btn-outline-primary">Senden</button>

Buttons können in verschiedenen Größen bereitgestellt werden mit den Klassen btn-sm und btn-lg. Außerdem gibt es die btn-block Klasse, mit der der Button in voller Breite gezeigt wird.

Ob ein Button aktiv ist, kann mit der active Klasse gesetzt und abgefragt werden!

<button type="button" class="btn btn-primary active">Kaufen</button>

Mehrere Buttons zu einer Gruppe zusammenzufassen erfolgt über die Klasse btn-group.

In dieser Übung siehst du die verschiedenen Buttons im Einsatz: