Bootstrap bietet eine Vielzahl von Button-Stilen und -Größen, die für unterschiedliche Designanforderungen und Situationen verwendet werden können.

Gängige Button-Klassen

Grundlegender Button

Die Klasse btn dient als grundlegende Klasse für die Gestaltung von Buttons. Sie stellt essentielle Button-Stile wie Abstände, Rahmen und Hover-Effekte bereit.

Button-Stile

Bootstrap bietet eine Vielzahl vordefinierter Button-Stile, die mit bestimmten Klassen angewendet werden können. Zu diesen Stilen gehören:

• btn-primary: Verleiht dem Button eine Primärfarbe, typischerweise für Hauptaktionen verwendet;
• btn-secondary: Verleiht dem Button eine Sekundärfarbe, häufig für Nebenaktionen genutzt;
• btn-success: Gibt dem Button eine Farbe, die Erfolg signalisiert, oft für positive Aktionen verwendet;
• btn-danger: Verleiht dem Button eine Farbe, die Gefahr oder kritische Aktionen signalisiert;
• btn-warning: Verleiht dem Button eine Farbe, die Warnung oder Vorsicht darstellt;
• btn-info: Gibt dem Button eine Farbe, um Informationsnachrichten zu vermitteln;
• btn-light: Verleiht dem Button ein helles Farbschema, geeignet für helle Hintergründe;
• btn-dark: Verleiht dem Button ein dunkles Farbschema, geeignet für dunkle Hintergründe;
• btn-link: Stellt den Button als einfachen Link ohne zusätzliche Gestaltung dar, häufig für Inline-Aktionen verwendet.

Button-Größen

Die Größe von Buttons kann mit bestimmten Klassen angepasst werden.

• btn-lg: Diese Klasse vergrößert den Button und macht ihn größer als die Standardgröße. Sie wird typischerweise für primäre oder hervorgehobene Buttons verwendet, die mehr Aufmerksamkeit erfordern;
• btn-sm: Diese Klasse verkleinert den Button und macht ihn kleiner als die Standardgröße. Sie wird häufig für sekundäre oder unterstützende Buttons verwendet, die weniger hervorgehoben werden sollen.

Deaktivierter Zustand

Das Hinzufügen des disabled-booleschen Attributs zu einem beliebigen <button>-Element macht dieses inaktiv. Deaktivierte Schaltflächen haben pointer-events: none angewendet, wodurch Hover- und Aktivzustände verhindert werden.