Buttons (deutsch: Schaltfächen) sind nicht nur in Formularen wichtige visuelle Anker, um den Besucher zum Klicken zu animieren. Gut gestaltete Buttons können auch anstelle normaler Textlinks angezeigt werden um eine höhere Click-Trough-Rate zu erreichen. Das Bootstrap Framework bietet von Haus aus verschiedene Buttonstyles für die meisten Anwendungsfälle, die in diesem Tutorial exemplarisch erläutert werden.
Um einen Standard-Button in Bootstrap zu definieren, genügt es dem jeweiligen HTML-Element die CSS-Klasse „btn“ zuzuweisen. Buttons eignen sich für folgenden HTML-Elemente:
Um das Aussehen des Buttons zu ändern, muss ein zusätzliche Klasse entsprechend der anchfolgenden Tabelle vergeben werden.
| Aussehen | CSS-Klasse | Beschreibung |
|---|---|---|
class="btn" |
Standardbutton (grau) | |
class="btn btn-primary" |
Call-To-Action Button | |
class="btn btn-info" |
Info-Button | |
class="btn btn-success" |
Button mit positiver Nachricht (z. B. Element speichern) | |
class="btn btn-warning" |
Button mit Warnung (z. B. Element ersetzen) | |
class="btn btn-danger" |
Button mit negativer Nachricht (z. B. Element löschen) | |
class="btn btn-inverse" |
Button ohne klar erkennbaren semantischen Zusammenhang (schwarz) | |
class="btn btn-link" |
Button als Link darstellen (z. B. Falls Formular-Button nicht als solcher erkennbar sein soll |
Um die Buttongröße zu ändern ist wiederum eine weitere CSS-Klasse nötig.
| Größe | CSS-Klasse | Beschreibung |
|---|---|---|
class=" |
normalgroßer Standardbutton (grau) | |
class="btn btn-lg" |
großer Standardbutton | |
class="btn btn-sm" |
kleiner Standardbutton | |
class="btn btn-xs" |
winziger Standardbutton | |
class="btn btn-primary btn-lg" |
großer Call-To-Action Button |
Möchte man, dass ein Button über die ganze Breite des Eltern-HTML-Elementes aufspannt, so ist die Klasse „btn-block“ dafür geeignet.
Mittel der CSS-Klasse „disabled“ kann ein gesperrter Button gestaltet werden, der nicht anklickbar ist.
Alle oben genannten Features lassen sich am besten nachvollziehen, wenn man anhand einer Beispiel-HTML-Seite das gewünschte Resultat mit dem zugehörigen Quellcode vergleichen kann. Im Bootstrap Tutorial findest du genau das.
Beispiel Buttons in Bootstrap